| Autor |
Nachricht |
EHST
Dabei seit: 08.08.2006
Ort: Orbg.-Sachsenhausen
Alter: -
Geschlecht: -
|
Verfasst Mo 14.05.2007 21: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 21:09, insgesamt 1-mal bearbeitet
|
|
| |
    |
 |
Raumwurm
Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Mo 14.05.2007 22: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.
|
|
| |
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 27
Geschlecht:
|
Verfasst Mo 14.05.2007 22: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 22:45, insgesamt 3-mal bearbeitet
|
|
| |
|
|
EHST
Dabei seit: 08.08.2006
Ort: Orbg.-Sachsenhausen
Alter: -
Geschlecht: -
|
Verfasst Di 15.05.2007 05: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 05:59, insgesamt 1-mal bearbeitet
|
|
| |
|
|
Raumwurm
Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 15.05.2007 07: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
Dabei seit: 08.08.2006
Ort: Orbg.-Sachsenhausen
Alter: -
Geschlecht: -
|
Verfasst Di 15.05.2007 18: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 |
Problem mit <div>'s nebeneinander
css Div _Layer Problem / mehrere Divs nebeneinander und unte
DIV nebeneinander
2 div-bereiche nebeneinander...
Div horizontal nebeneinander ?
Problem mit Listen-Menü (horizontal)
|
|
Willkommen auf dem Portal für Mediengestalter
