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 |
|
|
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
|
|
|
|
|
Raumwurm
Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 14.05.2007 21:15
Titel
|
|
|
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.
|
|
|
|
|
Anzeige
|
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Mo 14.05.2007 21:43
Titel
|
|
|
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;"> </div>
</div> |
Zuletzt bearbeitet von sahnemuh am Mo 14.05.2007 21:45, insgesamt 3-mal bearbeitet
|
|
|
|
|
EHST
Gesperrt Threadersteller
Dabei seit: 08.08.2006
Ort: Orbg.-Sachsenhausen
Alter: -
Geschlecht: -
|
Verfasst Di 15.05.2007 04:18
Titel
|
|
|
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
|
|
|
|
|
Raumwurm
Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 15.05.2007 06:49
Titel
|
|
|
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.
|
|
|
|
|
EHST
Gesperrt Threadersteller
Dabei seit: 08.08.2006
Ort: Orbg.-Sachsenhausen
Alter: -
Geschlecht: -
|
Verfasst Di 15.05.2007 17:53
Titel
|
|
|
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!
|
|
|
|
|
|
|
|
Ä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
|
|