[Geronimo]

Servus,

ich habe da mal wieder ein kleines Problem: Folgt auf ein gefloatetes Element ein clearendes Element ist von den für beide Elemente hinterlegten Außenabständen nichts mehr zu sehen. Ist das normal? Ich hätte zwischen den beiden Elementen gerne einen Abstand. Wie lässt sich das realisieren?

Vielen Dank im Voraus für eure Hilfe.

Gerhard

[mcdaniels]

Hey
Gibts hierzu ein Anzeigebeispiel / code?

[Geronimo]

[...]

<p>Fließtext</p>

<img/>

<p>Fließtext</p>

<h3>Überschrift</h3>

<p>Fließtext</p>

[...]

So sieht die Struktur des Dokuments aus. Das Bild ist gefloatet und wird vom Fließtext umschlossen. Ist dieser (vertikal) kürzer als das Bild, soll die Überschrift dennoch darunter dargestellt werden. Dabei müssen die Außenabstände natürlich auch zwischen Bild und Überschrift erhalten bleiben.

[mcdaniels]

Gut...
Also du definierst zb in der css, dass:
img {float:left;}

html sieht dann so aus:
<img src="bild.jpg" alt="alternativtext" width="xx" height="yy">
<p>Fliesstext</p>

dann kommt die <h3> Überschrift, der musst du das clear mitgeben, also in der css zusätzlich:
h3 {clear:left;}

somit ist dann die h3 unter dem Bild, egal wie lang der text neben dem Bild ist. Welche Abstände meinst du denn hier genau... (online live Beispiel, oder Zeichnung würd mir weiterhelfen, aber vielleicht is es heut schon zu spät und jemand anderer hier hat das Problem gleich

[Geronimo]

Scheint wohl doch mit einem Beispiel einfacher zu verdeutlichen sein: http://designfanatiker.de/das-jahr-2006/ (Benutzername und Paßwort lauten „fehlersuche“). Achtet mal auf den Abstand zwischen dem ersten Bild im Fließtext und der darauffolgenden Überschrift. Noch besser sieht man es etwas weiter unten bei den fünf nebeneinanderliegenden Bildern. Im FF betrachtet ist in beiden Fällen scheinbar kein Außenabstand vorhanden.

[mcdaniels]

Hoi!
Bin mir jetzt nicht sicher mit der Geschichte, aber evtl. kommt das daher, dass dein Bild ja aus der Box (p-tag) herausragt. (Siehe Anhang).

Man müsste nach dem Bild clearen, damit die Box auch das Bild umrahmt.

Somit kommt der Abstand zwischen dem Bild und der darauffolgenden Überschrift wahrscheinlich nicht zum tragen. (Weil der Abstand bezogen auf die Box mit deinem Fliesstext ist).

[Geronimo]

Die Bilder befinden sich allerdings nicht in den Absätzen, sondern vielmehr dazwischen. Übrigens zeigt der IE die Abstände wie gewünscht an.

[mazzo]

clearst Du auch richtig nach dem Float? Siehe auch den Link in meiner Sig, Stichwort "containing float", das scheint mir das Problem zu sein.

[Geronimo]

Zitat von mazzo

clearst Du auch richtig nach dem Float?

Ich wüsste nicht, wie ich anders clearen könnte. Mir stehen nun einmal nur die vorhandenen Elemente zur Verfügung. Mich stört der nicht vorhandene Abstand zwischen dem gefloateten Bild und der darauffolgenden Überschrift.

[IChao]

Wenn ein Element mit z.B. clear:left einem float:left folgt, bedeutet das nicht, dass der margin-top des Elements nun zwischen beiden stehen würde.

http://www.w3.org/TR/CSS21/visuren.html#flow-control

Computing the clearance of an element on which 'clear' is set is done by first determining the hypothetical position of the element's top border edge within its parent block. This position is determined after the top margin of the element has been collapsed with previous adjacent margins (including the top margin of the parent block).

If the element's top border edge has not passed the relevant floats, then its clearance is set to the amount necessary to place the border edge of the block even with the bottom outer edge of the lowest float that must be cleared.

(kursiv von mir)

Margin-Collapsing betrifft nicht Float und Clearer, sondern Clearer und andere vorausgehende vertikale Margins.

Die obere border-Kante des clearenden Elements wird zum unteren Rand des Floats gesetzt, wenn der margin-top kollabiert ist oder eben nicht ausreicht, um das clearende Element unter das Float zu schieben.

Der margin-top kollabiert nicht mit dem float, da margins bei floats grundsätzlich nie kollabieren.

Der margin-top kollabiert, als ob der float nicht vorhanden wäre ("hypothetical position"), erst danach wird genug Clearance hinzugefügt, damit das clearende Element auch wirklich unter dem float zu liegen kommt.

Hierzu ein Beispiel von Philippe. Viermal ein testgrid, in jedem ein 80x80px Bild, gefolgt von einem Clearer.

Nur im dritten Fall, sonst nicht, bleibt ein Abstand zwischen Clearer und Float im Fx -- und das ist richtig so. Der margin-top von 100px kann nicht mit dem testgrid kollabieren, da dieses ein padding von 10px hat. Der Abstand zwischen der testgrid-border und dem Clearer ist demnach 110px, der Abstand vom Bild zum Clearer: 20px.

Zur Clearance: das ist der vertikale Abstand, der hinzuaddiert wird, damit der Clearer unbedingt unter dem Float zu liegen kommt.

• Im ersten Beispiel beträgt die Clearance 80px,
• im zweiten Null (da der margin-top von 80px gerade ausreicht),
• im dritten auch Null (da der margin-top sogar noch 20px übrig lässt),
• und im vierten 90px (da man 80px braucht, von denen aber -10px fehlen)

Wenn man einen Abstand von 100px zwischen float und Clearer sieht, wie im Opera8.5, so ist das falsch.

Und ob irgendetwas im IE logischer erscheint oder nicht, hat wie so oft beim IE nichts mit der Spezifikation zu tun; und wenn es doch mal richtig erscheint, dann doch meist aus Zufall, nicht aus Absicht.