Schwarzcode

Nachschlagewerk zur Ergänzung des Unterrichts in Frontend Development – und für mich. Sehr subjektiv gefärbt und ohne Anspruch auf Vollständigkeit.


Bilder mit Textumfluss

Ausgangslage

Bilder verhalten sich in HTML wie Zeichen: Sie sind Inline-Elemente, stehen somit auf einer Grundlinie der Schrift und reagieren auf Wortabstände und Zeilenabstände. Sind die Bilder zu gross, drücken sie den Zeilenabstand partiell auseinander.

561

Umfliessen

Möchte man die Bilder mit umfliessen, brauchen sie nebst etwas Aussenabstand die Eigenschaft float mit dem Wert left oder right. Das ist soweit ziemlich simpel. Etwas ungewöhnlich fürs Bauchgefühl: Es spielt hier keine Rolle, ob man ein Bild oder die Bilder am Schluss des Absatzes oder am Anfang platziert.

561

Was verschoben?

Wenn ein Text zu wenig lang ist, um ein Bild vollständig zu umfliessen, so wie im Absatz 3 des Musters oben, reagiert der nachfolgende Absatz ebenfalls auf dieses Floating, was zu ungewollten Ergebnissen führt. Spätestens dann empfiehlt es sich, den Absätzen selbst höflich mitzuteilen, das vorangehende Floating zu beenden. Probiert es aus und entfernt den Kommentar im CSS.

p { clear:both; }

Blöcke statt Bilder

Wie man float verwendet, um mehrspaltige Layouts zu bauen, lest ihr im Beitrag Spaltenlayout mit Floating.


Verantwortlich:
Jürgen Wössner
E-Mail

Schwarzcode

Nachschlagewerk zur Ergänzung des Unterrichts in Frontend Development – und für mich. Sehr subjektiv gefärbt und ohne Anspruch auf Vollständigkeit.

Aber mit so einem kleinen Bildschirm hier ist das ganze echt nutzlos. Geh mal rüber an einen grösseren Bildschirm.