Seiten über gutes Webdesign, Usability (Benutzbarkeit) und Accessibility (Zugänglichkeit) mit HTML und CSS.
Floats, Aufzucht und Hege
Eigentlich ist es doch ganz einfach: Ein (beliebiges Block-) Element
bekommt im Stylesheet die Eigenschaft float:left zugewiesen.
Schon
wird es aus dem normalen (Text-) Fluss herausgenommen, nach links
positioniert und vom Rest umflossen. Aber es gibt ein paar Tücken,
denn sowohl die Elemente im float, als auch außerhalb verhalten
sich anders, als ohne das floatende Element:
Auf dieser Seite:
Breite (width) des floatenden Elements
Die Breite von floatenden Elementen muss eindeutig festgelegt sein.
Sobald diese (auch) Text enthalten, der automatisch umbrochen werden
kann, muß dies durch die Angabe einer festen Breite
(width:) geschehen.
(CSS2: Floats)
Wie ein floatendes Element darzustellen ist, dessen Breite nicht definiert ist, ist nicht festgelegt und handhabt jeder Browser anders: manche Browser nehmen die maximale Breite (IE 6.0) und manche nehmen die minimale Breite und brechen somit nach jedem Wort um (IE 5.0 unter bestimmten Bedingungen)!
zur Beispielseite float + width
Überlagerung von floatenden und normalen Boxen
Damit die Inhalte der normalen Blockelemente die floatenden Elemente
umfließen können, überlagern sich die Boxen der floatenden Elemente
mit den anderen Boxen. Also: der linke Rand (margin-left) eines
links-floatendes Elements beginnt da, wo der linke Rand der nicht
floatenden Box beginnt. Nur der Inhalt der nicht floatenden Box wird
nach rechts verschoben.
Dies führt zu einigen, auf den ersten Blick vielleicht unerwarteten Effekten, sobald sich neben dem floatenden Element nicht nur normaler Text befindet:
Vertikaler Rand (margin) des floatenden Elements
Vertikale Ränder (margin-top,
margin-bottom) des floatenden Elements
werden nicht mehr mit anderen Rändern überlagert.
Normalerweise fallen Ränder aufeinanderfolgender Blockelemente zusammen (collapse), sprich: nur der größere der beiden Ränder wird verwendet (CSS2: Block-Formatierungskontext).
Die Ränder der Float-Boxen fallen nicht mit Rändern der benachbarter Boxen zusammen (CSS2: Floats).
Folge: ein <p>-Element, dass die Eigenschaft
float:left zugewiesen bekommt,
rutscht gegenüber einem normalen <p>-Element
um den margin-top nach unten.
Hintergrund (background) und Rahmen
(border)
Der Hintergrund und der Rahmen der normalen Box geht
hinter der floatenden Box weiter. Wenn das
floatende Element einen durchsichtigen Hintergrund hat,
werden diese sichtbar. Ein seitlicher Abstand (margin-left,
margin-right) des floatenden Elements verschiebt zwar den
Inhalt der normal fließenden Elemente wirkt sich auf
Hintergrund und Rahmen nicht aus.
Horizontaler Rand (margin) der normal
fließenden Box
Der horizontale Rand (margin-left, margin-right)
der vom
floatenden Element überlagerten Box beginnt hinter
dem floatenden Element. Deshalb macht sich ein linker Rand
eines Elements, dass von einem Element mit der Eigenschaft
float:left verdrängt wird, nicht
direkt bemerkbar. Erst wenn dieser größer wird, als die Breite
des floatenden Elements, wird er sichtbar.
Listen neben float:left
Die oben beschriebenen Eigenschaften haben insbesondere
Auswirkungen auf Listen (<ul>, <ol>,
<dl>), da
deren Einrückung ggf. hinter dem floatenden Element verschwindet.
Je nach Browser wird das Listenzeichen (Bullet) unterschiedlich behandelt. Dies macht sich dann insbesondere bei einer zweiten Listenebene bemerkbar. Diese ist beim Internet Explorer nicht mehr gegenüber der ersten Ebene eingerückt.
zur Beispielseite float + <ul>
Workaround für Listen neben
float:left
Damit die Aufzählungszeichen von Listen nicht verschwinden und vor allem auch weitere Listenebenen wie sonst auch eingerückt werden, bedarf es eines Workarounds: Die Liste muß den rechten Rand des floatenden Elements als linken Rand wahrnehmen. Diese Eigenschaft haben Tabellen.
Damit sich eine Liste rechts neben einem floatenden Element wie
sonst auch verhält, muß sie in ein
<div>-Element mit der
Eigenschaft display:table gehüllt
werden. Dies geht aber nicht mit einzelnen Listenpunkte sondern
nur mit der ganzen Liste, was bedeutet,
dass diese das floatende Element nicht mehr umfließt, sondern
vollständig rechts neben ihm angeordnet wird.
Einige veraltete Browser beherrschen kein display:table
und benötigen deshalb einen zusäztlichen Workaround. Das sind
zum einen der Netscape Navigator 4.x. Dieser stellt Listen rechts von
floatenden Elementen
auch ohne alles gut dar und bedarf daher keiner zusätzlichen Behandlung.
Zum anderen der Internet Explorer in allen Versionen bis 6.x.
Dieser kann durchaus display:table verarbeiten, aber nur,
wenn die geheimnisvolle Eigenschaft "hasLayout" gegeben ist. (Vgl.
hasLayout Property)
Hier muss man, durch bedingte Kommentare (contitional comments)
vor normalen Browsern verborgen, dem <div>-Element
auch noch die Eigenschaft
zoom:100% geben.
Die gesamte Struktur sieht dann so aus:
<style type="text/css">
.floatfix { display:table; }
</style>
<!--[if IE 6]>
<style type="text/css">
.floatfix { zoom:100%; }
</style>
<![endif]-->
<div class="floatfix">
<ul>
<li>Erster Listenpunkt
<ul>
<li>Erster Listenpunkt, zweite Ebene</li>
<li>Zweiter Listenpunkt, zweite Ebene</li>
</ul>
</li>
<li>Zweiter Listenpunkt
</li>
</ul>
</div>
Urheber © Dr. Joachim Wiesemann
Letzte Aktualisierung: 27.5.2006
