nicht angemeldet
CSS floating - Mein Fehler?
Hallo Forum,
folgender HTML-Code zeigt mir im Firefox 0.9.3 die Blöcke gestuft von links oben nach rechts unten an, statt diese untereinander zu zeichnen. Nehme ich die CSS-Regel mit dem Selektor "#liste .tit" weg, so macht FF es dann doch richtig. Im IE5 sieht es in beiden Fällen ok aus, was ist falsch an meinem Code?
Danke vielmals für Eure Hilfe, Anders
P.S.: nicht sauer sein, wenn ich erst Morgen antworten kann, der Samstagabend ruft mich :)
<html>
<head>
<title>test.html</title>
<style type="text/css">
#liste {
padding-left:0px;
list-style:none;
}
#liste .tit {
font-size: 15px;
font-weight:bold;
}
#liste .image {
float:left;
margin: 10px 10px 10px 10px;
width:100px;
}
</style>
</head>
<body>
<ul id="liste">
<li>
<img src="http://img.stern.de/img/abo/weltall.jpg" class="image" />
<h1 class="tit">Das ist der Titel</h1>
<p class="desc">Das ist die Beschreibung</p>
<p class="year">2001</p>
</li>
<li>
<img src="http://img.stern.de/img/abo/weltall.jpg" class="image" />
<h1 class="tit">Das ist der Titel</h1>
<p class="desc">Das ist die Beschreibung</p>
<p class="year">2001</p>
</li>
<li>
<img src="http://img.stern.de/img/abo/weltall.jpg" class="image" />
<h1 class="tit">Das ist der Titel</h1>
<p class="desc">Das ist die Beschreibung</p>
<p class="year">2001</p>
</li>
<li>
<img src="http://img.stern.de/img/abo/weltall.jpg" class="image" />
<h1 class="tit">Das ist der Titel</h1>
<p class="desc">Das ist die Beschreibung</p>
<p class="year">2001</p>
</li>
</ul>
</body>
</html>
-
Hallo,
folgender HTML-Code zeigt mir im Firefox 0.9.3 die Blöcke gestuft von links oben nach rechts unten an, statt diese untereinander zu zeichnen.
Das macht er richtig, wenn die nachfolgenden LI-Elemente noch Platz haben, um um das vorhergehende Bild mit float:left herum zu floaten.
Folgendes:#liste li {
clear: left;
}sollte helfen.
Nehme ich die CSS-Regel mit dem Selektor "#liste .tit" weg, so macht FF es dann doch richtig.
Ja, wenn dann die Überschriften H1 hoch genug sind, um, zusammen mit der Höhe der P-Elemente, die Bildhöhe zu ergeben, dann muss das nächste LI-Element wieder vorn links anfangen.
viele Grüße
Axel
-
Hallo Alex,
Das macht er richtig, wenn die nachfolgenden LI-Elemente noch Platz haben, um um das vorhergehende Bild mit float:left herum zu floaten.
dann habe ich da etwas falsch verstanden. Ich dachte der float wirkt begrenzt auf die Elemente die das selbe Parent-Element haben wie das gefloatete Element (also alle Elemente _innerhalb_ des <li>-Tags, nicht auch noch die auf das Parent-Element folgenden <li>s auf der selben Ebene).
http://css-technik.de/css-examples/219_9/
"Aber im Gegensatz zu absolut positionierten Elementen, werden Floats direkt nach dem letzten vorausgehenden Block-Element angeordnet (genau wie nicht gefloatete Block-Elemente)".Vermutlich interpretiere ich das nur falsch?
Das Tutorial finde ich übrigens auch nur bedingt verständlich, kennt jemand eine Einführung für Doofe?
Verflucht komplizierte Theorie, dieses Floating :(
Grüsse, Anders-
Hallo Axel,
im Tutorial wird doch durch ein Bild gezeigt, dass Elemente über ihre Eltern hinaus gefloatet (dt. etwa: gefloßt, aus dem Textfluss genommen) werden: http://css-technik.de/css-examples/219_9/beispiele/zweites_beispiel.gif
Villeicht hilft dir ja das weiter: http://css.maxdesign.com.au/floatutorial/
MfG,
Max.
-
-
