Elemente von Text umfließen lassen
Textfluß um ein Bild, einen Absatz oder ein anderes Element
Um Text um ein Bild oder ein anderes Element herumfließen zu lassen,
gibt es in CSS die
float
-Eigenschaft. Früher wurde der Umfluß mit dem
align
-Attribut in HTML (align="right"
oder align="left"
) erzeugt. Darauf sollte verzichtet
werden; in neueren HTML-Versionen ist das align-Attribut auch nicht mehr
erlaubt. float
ist ohnehin viel flexibler in der Anwendung.
Folgende Codebeispiele wurden gleich entsprechend formatiert (Du solltest die Formatierungen selbstverständlich lieber in ein externes style sheet schreiben):
style="float:left; width:22em;"
Das erste Beispiel wurde per float:left
links ausgerichtet,
so daß nachfolgender Text und andere Elemente rechts davon fließen; wenn
Du in den Quelltext schaust, wirst Du noch die Verwendung der margin
-Eigenschaft
bemerken, mit der ich den Text etwas zur Seite drücke; sonst würde er
direkt an dem Container kleben. Beachte, daß z. B. Netscape 4 zum Teil
große Probleme mit der float
-Eigenschaft hat. Auch das ist
ein Grund dafür, derartige CSS-Angaben lieber in ein externes style sheet zu schreiben, das man vor älteren Browsern
versteckt.
Achtung! In CSS 2.0 war es bei der Angabe von
float
Pflicht, zugleich auch eine Angabe für width
zu machen. Dies ist in der aktuellen Version CSS 2.1 zwar nicht mehr
der Fall, allerdings benötigen ältere Browser noch immer eine Breitenangabe,
da sie das Element sonst auf die volle verfügbare Breite ausdehnen. Dies
betrifft speziell den Internet Explorer in älteren Versionen als 5.5; und
zwar sowohl unter Windows als auch auf Apple Macintosh. Entweder mußt Du
also grundsätzlich eine Breite angeben (was ich hier getan habe), was jedoch
nicht so flexibel ist, oder Du mußt gezielt nur die problematischen Browser
mit einer Breitenangabe versorgen. Das geht am einfachsten unter Ausnutzung
des whitespace-comment bugs der erwähnten Browser.
Dazu mußt Du die Breite auf jeden Fall in einem
style-Bereich im head
oder extern angeben.
Der whitespace-comment bug (Leerzeichen-Kommentar-bug) beruht darauf, daß die erwähnten Browser CSS-Angaben ignorieren, wenn unmittelbar nach dem Selektor ein CSS-Kommentar folgt:
selector/* */ { [...] }
Wichtig ist hier das Leerzeichen: Fehlt es (selector/**/
statt selector/* */
), so wird nur der IE älter als 5.5 unter Windows
ausgeschlossen.
Wie läßt sich mit dem whitespace-comment bug nun
ausschließlich den älteren IE-Versionen eine Breite geben? Dieser
bug sorgt nämlich genau für das, was wir nicht wollen:
Er schließt ältere IEs
aus, wir suchen aber eine CSS-Angabe nur für diese Browser.
Der Trick geht so (am Beispiel eines Absatzes p
mit der Klasse
remark
):
/* Angaben für alle Browser: feste Breite auch für neuere Versionen */ p.remark { float:left; width:15em; } /* Angaben für neuere Browser: automatische Breite; wird von älteren IEs ignoriert */ p.remark/* */ { width:auto; }
Erst bekommen also alle Browser eine feste Breite vorgegeben; nur neuere
Browser, die nicht auf den whitespace-comment bug
hereinfallen, lesen danach noch die Angabe für eine automatische Breite
(das ist die Voreinstellung). Diese Browser verhalten sich also so, als
hätten sie ausschließlich float:left
gelesen.
Die Verwendung der Einheit em
hat übrigens den Vorteil, daß
sich die Länge so an die vom Benutzer eingestellte Schriftgröße anpaßt.
PS: Danke an Cheatah für den Hinweis, daß bis CSS 2.0 die Angabe von
width
erforderlich war. Ich kenne sonst praktisch nur
CSS 2.1 ;-)
Das nächste Beispiel wird per float:right
rechts ausgerichtet,
so daß nachfolgender Text und andere Elemente links davon fließen.
style="float:right; width:22em;"
Per float
lassen sich auch mehrere Blöcke nebeneinander
anordnen. Hier noch ein Beispiel – verändere die Schriftgröße oder die
Größe Deines Browserfensters, um das Verhalten besser beobachten zu können:
Anschließend folgt ein längerer Blindtext sowie zwei etwas größere Elemente, um das Aussehen und Verhalten noch zu verdeutlichen.
Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand.
Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand.
Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand. Dies ist ein längerer Blindtext ohne Sinn und Verstand.
Viel Spaß!