mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 15:41 Benutzername: Passwort: Auto-Login

Thema: Problem mit 2 Listen (nebeneinander) in einem Div vom 14.05.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Problem mit 2 Listen (nebeneinander) in einem Div
Autor Nachricht
EHST
Gesperrt
Threadersteller

Dabei seit: 08.08.2006
Ort: Orbg.-Sachsenhausen
Alter: -
Geschlecht: -
Verfasst Mo 14.05.2007 20:08
Titel

Problem mit 2 Listen (nebeneinander) in einem Div

Antworten mit Zitat Zum Seitenanfang

Irgendwie finde ich den Fehler nicht, und nach tagelangem Nachdenken und rumprobieren, muss ich hier mal fragen.

In einem Div (mit Hintergrund) soll ganz links ein Bild, und daneben zwei Listen nebeneinander.

Im Internet Explorer klappt das auch super. Mozilla spielt allerdings nicht ganz mit.

Man schaue mit Mozilla hier (und dann mit dem IE zum Vergleich):

http://www.metallkatharsis.de/entwurtung/reviews/axt-die_galerie.html

CSS

Code:

div.review [class] {
   border: 1px solid #4D1C03;
         background-image: url(hg.jpg);
         margin-bottom: 20px;
         padding: 5px;
         min-height: 150px;
}

div.review {
   border: 1px solid #4D1C03;
         background-image: url(hg.jpg);
         margin-bottom: 20px;
         padding: 5px;
         height: 100%;
}

ol.lieder {
   width: 220px;
         float: left;
         list-style-type: none;
         margin: 0;
}

ol.info {
   width: 220px;
         float: right;
         list-style-type: none;
         margin: 0;
}

img.democover {
   float: left;
}

img.cover {
   float: left;
         width: 160px;
         height: 160px;
}



HTML

Code:

<div class="review">

<img class="democover" src="axt.gif" width="109" height="159" alt="">
<ol class="lieder">
<li><h3>Liedtitel</h3></li>

<li>01.Anfangsmonolog</li>
<li>02.Aus dem Dunkel</li>
<li>03.Monolog</li>
<li>04.Verwesung</li>
<li>05.Die Jagd</li>
<li>06.Welkende Gedanken</li>
<li>07.In deinem Körper</li>
<li>08.Blute für mich</li>
<li>09.Knochenmühle</li>
<li>10.Endmonolog</li></ol>


<ol class="info">
<li><h3>Kontakt</h3></li>

<li><strong>Epidemic Human Records:</strong></li>
<li> ehr666[at]freenet[dot]de</li>
<li><strong>Axt:</strong></li>
<li> jakob-baara[at]t-online[dot]de</li>
</ol>
</div>


Wie schaffe ich es, dass es ordentlich aussieht und nicht so zerrupft? Habe ich irgendetwas übersehen?


Zuletzt bearbeitet von EHST am Mo 14.05.2007 20:09, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Raumwurm

Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 14.05.2007 21:15
Titel

Antworten mit Zitat Zum Seitenanfang

Dir fehlt da theoretisch nur das clearende Element nach den
gefloateten Teilen, also z.b. eim <br style="clear:both" /> nach
der letzten <ol>-Liste. Beim ol.lieder noch margin: 0 0 0 5px;
schreiben, dann passen auch die Abstände. Und nicht das die
Seite jetzt mein Geschmack wäre, aber den Zacken oben solltest
Du vielleicht auch noch drüberlegen - anstatt drunter.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich
Verfasst Mo 14.05.2007 21:43
Titel

Antworten mit Zitat Zum Seitenanfang

entweder:
Code:

.clearfix:after {
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
   }
.clearfix {
   display: inline-block;
   }

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

div.review [class] {
   border: 1px solid #4D1C03;
         background-image: url(hg.jpg);
         margin-bottom: 20px;
         padding: 5px;
         min-height: 150px;
}

div.review {
   border: 1px solid #4D1C03;
         background-image: url(hg.jpg);
         margin-bottom: 20px;
         padding: 5px;
         height: 100%;
}

ol.lieder {
   width: 220px;
         float: left;
         list-style-type: none;
         margin: 0;
}

ol.info {
   width: 220px;
         float: right;
         list-style-type: none;
         margin: 0;
}

img.democover {
   float: left;
}

img.cover {
   float: left;
         width: 160px;
         height: 160px;
}



Code:
<div class="review clearfix">

<img class="democover" src="axt.gif" width="109" height="159" alt="">
<ol class="lieder">
<li><h3>Liedtitel</h3></li>

<li>01.Anfangsmonolog</li>
<li>02.Aus dem Dunkel</li>
<li>03.Monolog</li>
<li>04.Verwesung</li>
<li>05.Die Jagd</li>
<li>06.Welkende Gedanken</li>
<li>07.In deinem Körper</li>
<li>08.Blute für mich</li>
<li>09.Knochenmühle</li>
<li>10.Endmonolog</li></ol>


<ol class="info">
<li><h3>Kontakt</h3></li>

<li><strong>Epidemic Human Records:</strong></li>
<li> ehr666[at]freenet[dot]de</li>
<li><strong>Axt:</strong></li>
<li> jakob-baara[at]t-online[dot]de</li>
</ol>
</div>



oder wie bereits beschrieben:

Code:
<div class="review">

<img class="democover" src="axt.gif" width="109" height="159" alt="">
<ol class="lieder">
<li><h3>Liedtitel</h3></li>

<li>01.Anfangsmonolog</li>
<li>02.Aus dem Dunkel</li>
<li>03.Monolog</li>
<li>04.Verwesung</li>
<li>05.Die Jagd</li>
<li>06.Welkende Gedanken</li>
<li>07.In deinem Körper</li>
<li>08.Blute für mich</li>
<li>09.Knochenmühle</li>
<li>10.Endmonolog</li></ol>


<ol class="info">
<li><h3>Kontakt</h3></li>

<li><strong>Epidemic Human Records:</strong></li>
<li> ehr666[at]freenet[dot]de</li>
<li><strong>Axt:</strong></li>
<li> jakob-baara[at]t-online[dot]de</li>
</ol>
<div style="clear: left;">&nbsp;</div>
</div>


Zuletzt bearbeitet von sahnemuh am Mo 14.05.2007 21:45, insgesamt 3-mal bearbeitet
  View user's profile Private Nachricht senden
EHST
Gesperrt
Threadersteller

Dabei seit: 08.08.2006
Ort: Orbg.-Sachsenhausen
Alter: -
Geschlecht: -
Verfasst Di 15.05.2007 04:18
Titel

Antworten mit Zitat Zum Seitenanfang

Raumwurm hat geschrieben:
Und nicht das die
Seite jetzt mein Geschmack wäre, aber den Zacken oben solltest
Du vielleicht auch noch drüberlegen - anstatt drunter.


War ursprünglich auch so. Aber mit dem IE konnte man dann, trotz z-index, im Kopf nichts mehr anklicken. Deshalb musste ich die Grafik im Kopf leider als Hintergrundbild nehmen. Wenn jemand da noch eine Lösung hätte, würde ich das glatt wieder ändern.


Sahnemuh. Dank Dir, das klappt super. *edit: erledigt.


Zuletzt bearbeitet von EHST am Di 15.05.2007 04:59, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Raumwurm

Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 15.05.2007 06:49
Titel

Antworten mit Zitat Zum Seitenanfang

Wenn Du einen absolut positioniertes Div mit genau
der Größe des Zackens oben drüberlegst, dürfte das
recht wenig Probleme geben. Dann könntest Du ja auch
noch die obere Kante gleichfalls positionieren - weil an
der unteren Kante kommt das ja richtig gut.
  View user's profile Private Nachricht senden
EHST
Gesperrt
Threadersteller

Dabei seit: 08.08.2006
Ort: Orbg.-Sachsenhausen
Alter: -
Geschlecht: -
Verfasst Di 15.05.2007 17:53
Titel

Antworten mit Zitat Zum Seitenanfang

Raumwurm hat geschrieben:
Wenn Du einen absolut positioniertes Div mit genau
der Größe des Zackens oben drüberlegst, dürfte das
recht wenig Probleme geben. Dann könntest Du ja auch
noch die obere Kante gleichfalls positionieren - weil an
der unteren Kante kommt das ja richtig gut.


Stimmt. Auf die Idee kam ich ja noch gar nicht. Ich kann ja die ganze obere Kante inklusive Zacken da nochmal rüberlegen. Danke für den Rat!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Listen Problem
problem mit listen navigation
Problem mit <div>'s nebeneinander
Problem mit Listen-Menü (horizontal)
CSS Problem mit Abstand zwischen Listen-Elementen
[css] problem mit firefox und geschachtelten, unsort. listen
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.