STARTSEITE BERUFSREIFE HOGA 10-FINGER SCHULE Ö-NORMBei einem geschickten Zusammenspiel von float und clear lässt sich einiges bewerkstelligen. Float und Clear sind die Basis von Tabellenlosen Layouts. Grundsätzlich stehen die beiden Begriffe für das Positionieren von Elementen und wie mit dem Element davor und danach umgegangen wird.
Leider sind werden diese Eigenschaften von den unterschiedlichen Browsern nicht gleich interpretiert. Es gibt jedoch zahlreiche CSS-Hacks um diese Browser-Bugs in den Griff zu bekommen.
Der Begriff "Float" bedeutet soviel wie schwimmen, schweben (übersetzt). Wie schon eingang erwähnt, kann mit float sehr viel bewerkstelligt werden. Mit dieser Eigenschaft können Bilder nebeneinander gesetzt werden, Texte können im Spaltenlayout dargestellt werden. Und eben ganze Seitendesigns.
Grundsätzlich kann jedes Element "floaten"
Absätze <p>, Kontainer <div>, Listen <ul>, <ol>, Tabellen <table>, Grafiken <img>. Auch Inline-Elemente können gefloatet werden, wie <span> oder <strong>. Elemente die man floatet werden automatisch zu Blockelementen. Dies wiederum bedeutet, dass diese auch mit width und height belegt werden können. Es ist sogar so, dass gefloatete Elemente zwingend ein Breite haben müssen, unterlassen Sie die Breitenangabe, so machen die Browser fehler.
Floatende Elemente sind nicht Teil des normalen Textflusses, haben aber jedoch Einfluß auf das Layout des weiteren Inhalts. Zum Beispiel werden Textzeilen die sich neben einem floatierenden Element befinden um die Breite des floatierenden Elements gekürzt, sonst würden sie sie ja überschreiben.
Beispiele:
Diese Beispiele werden Sie mittels div-containern, die in verschiedenen farben dargestellt sind, visuell aufbereiten.
Fangen wir zunächst ganz einfach:
<style type="text/css">
#begrenzung { background-color:#B3BAFF; width:
600px;font-family:Arial, ...}
#rosa { background-color:#FFB3BA; }
#gelb { background-color:#FFF7B3; }
</style>
Obige Angaben über das Stylesheet können Sie im Kopfbereich des (X)HTML-Dokuments machen. Die angaben im body folgen:
<body>
<div id="begrenzung">
<div id="rosa">roter Container</div>
<div id="gelb>gelber Container</div>
</div>
</body>
Dies sieht dann im Browser so aus: Link geht im neuen Fenster auf.
Wenn Sie dieses Beispiel betrachten, sehen Sie dass der Begrenzungscontainer nicht sichtbar ist, er ist hier lediglich für die sichtbare Breite der Seite zuständig und hat eine Breite von "600 Pixel" und ist mit der Schrift "Arial" belegt. Der rote und der gelbe Container enthalten Text und sind Inhalt vom Begrenzungskontainer. Sie benützen beide die volle Breite und werden untereinander dargestellt.
Sieht im Browser so aus: Link geht im neuen Fenster auf!
Das rote Element hat ein float:left; margin-left:10px; und ein width:200px; bekommen. Dies will heißen, dass das rote Element links positioniert ist. Das rote Element muss nicht unbedingt ein div sein, es könnte auch eine img oder ein form sein. Das margin ist hier nur zur demonstration wie es sich damit verhält, sie sehen, es wird vom gelben Element lediglich die Textzeile verkürzt, jedoch nicht das Element. Das gelbe Element umfließt das rote Element rechts. Das width hält einfach das rote Element in grenzen.
Möchten Sie, dass der gelbe Container den roten Container nicht umfließt, dann müssen Sie dem gelben Container ein margin geben.
Sieht im Browser so aus: Link geht im neuen Fenster auf!
Sie sehen, dass durch das margin des gelben Container, das rote Element nicht mehr umfloßen wird, egal wie lang es ist. Weiters sehen Sie in diesem Beispiel zum ersten mal das blaue Element, dieses hält die Seite immer noch auf seine Breite.
In diesem Beispiel kann es zu dem sogenannten 3 Pixel Bug kommen, zu sehen ist er lediglich mit die IE7.
Wenn wir nach unserem blauen Container noch ein Element einfügen passiert folgendes!
Sieht im Browser so aus: Link geht im neuen Fenster auf!
Eigentlich passiert genau dass was logischerweise erwartet wurde.
Problem dabei ist nur, wenn wir dem roten Container mehr Inhalt geben passiert folgendes:
Sieht im Browser so aus: Link geht im neuen Fenster auf!
Ein mit Clear ausgestattetes Element, ist das erste Element das nicht mehr neben anderen Elementen steht. Clear unterbricht das Umfließen. Das Element kann trotz clear ein float bekommen. Clear können Sie verwenden als clear:left; clear:right; clear:none; und clear:both;.
Sieht im Browser so aus: Link geht im neuen Fenster auf!
