CSS Kurs

CSS FLOAT-Crash Kurs und die gängigsten CSS Hacks

Mittels CSS kann man ganz wunderbar flexible tabellenlose Layouts basteln. Hier ein kleiner CSS FLOAT-Crash Kurs.

Vorbemerkung: Die hier gezeigten Ergebnisse, führen bei unterschiedlichen Browser zu teilweise anderen Darstellungen. Um die unterschiedliche Interpretation von CSS in den verschiedenen Browser in den Griff zu bekommen, kann man so genannte CSS Hacks einsetzen. Mehr zu den CSS Hacks am Ende dieser Seite unter der Überschrift: Gängige Browser Bugs und deren Umgehung mittels CSS-Hacks.

Fragen zu dieser Anleitung für tabellenlose Layouts mittels CSS und float können in meinem Weblog mittels Kommentarfunktion des Artikels: Amazon Modul und Anleitung für tabellenlose Layouts mittels CSS und float gestellt werden.

Vorbemerkung: Die hier gezeigten Ergebnisse, führen bei unterschiedlichen Browser zu teilweise anderen Darstellungen. Um die unterschiedliche Interpretation von CSS in den verschiedenen Browser in den Griff zu bekommen, kann man so genannte CSS Hacks einsetzen. Mehr zu den CSS Hacks am Ende dieser Seite unter der Überschrift: Gängige Browser Bugs und deren Umgehung mittels CSS-Hacks.

Nehmen wir an, wir möchten einen einfachen Zweispalter erstellen. Das HTML-Grundgerüst sollte dafür wie folgt ausschauen:

Quelltext HTML:

<div id="gesamt">
<div id="rot">Roter Container</div>
<div id="gelb">Gelber Container</div>
</div>

Ergebnis:

Roter Container
Gelber Container

 

Damit das Ganze visuell etwas besser sichtbar wird, weisen wir nun mittels CSS jedem DIV-Container eine Hintergrundfarbe zu. Der äußere DIV Container mit der ID „gesamt“ soll blau, der erste innere DIV Container soll „rot“ und der zweite innere DIV Container soll „gelb“ werden. Gesagt getan:

Quelltext CSS:

#gesamt {background-color:#0000FF}
#rot {background-color:#FF0000}
#gelb {background-color:#FFFF00}

Ergebnis:

Roter Container
Gelber Container

Die CSS Eigenschaft: float

Nun möchten wir den roten Container, der selbstverständlich auch durch einen anderes HTML Element ersetzt werden könnte (z.B. p, img, iframe), mittels der CSS float-Eigenschaft nach links positionieren, sodass ihn der gelben Container und auch dessen Inhalt umfließen kann.

Quelltext CSS:

#gesamt {background-color:#0000FF}
#rot {background-color:#FF0000; float:left;}
#gelb {background-color:#FFFF00}

Ergebnis:

Roter Container
Gelber Container Gelber Container
Gelber Container Gelber Container Gelber Container

Die CSS Eigenschaft: margin

Möchten wir, dass der gelbe Container den roten Container nicht umschließt, dann können wir dem roten Container eine Breite mittels „width“ und dem gelben Container einen linken Außenrand mittels „margin“ zuweisen. Sollte der rote Container aus einem HTML Element bestehen, welches von Haus aus eine Breite besitzt z.B. ein img-Tag, dann kann die Breitenangabe für den roten Container entfallen.

Quelltext CSS:

#gesamt {background-color:#0000FF}
#rot {background-color:#FF0000;float:left; width:100px}
#gelb {background-color:#FFFF00;margin-left:100px}

Ergebnis:

Roter Container
Gelber Container Gelber Container
Gelber Container Gelber Container Gelber Container

 

Wir müssen also dem roten Container eine Breite zuweisen und dem gelben Container einen linken Rand. Nun wird auch der äußere blaue Container sichtbar. Als unerwünschten Nebeneffekt erhalten wir in den Internet Explorer Versionen kleiner 7 (nur bei IE < 7 sichtbar) einen 3 Pixel Fehler (Vergleich gelben Container Zeile 1 und Zeile 2). Mehr dazu im Abschnitt: Browser Bugs und CSS Hacks.

Fußzeile mit CSS erstellen

Was passiert aber, wenn wir nach unserem blauen Container einen Folgetext, also einen Text der unter unserem blauen Container steht haben möchten? Erweitern wir einfach das HTML-Grundgerüst:

Quelltext HTML:

<div id="gesamt">
<div id="rot">Roter Container</div>
<div id="gelb">Gelber Container</div>
</div>
<div id="folgetexte">Gr&uuml;ner Container</div>

und den CSS Quelltext:

#gesamt {background-color:#0000FF}
#rot {background-color:#FF0000;float:left; width:100px}
#gelb {background-color:#FFFF00;margin-left:100px}
#folgetext {background-color:#00FF00}

Ergebnis:

Roter Container
Gelber Container Gelber Container
Gelber Container Gelber Container Gelber Container
Grüner Container

 

Schaut eigentlich wie erwartet aus oder? Wenn wir aber im roter Container mehr Inhalt einfügen, dann passiert Folgendes:

Ergebnis:

Roter Container Roter Container Roter Container Roter Container Roter …
Gelber Container Gelber Container
Gelber Container Gelber Container Gelber Container
Grüner Container

 

 

 

Dieses Verhalten des Folgetextes (grüner Container) könnte natürlich durchaus gewünscht sein, aber mann stelle sich vor der grüne Container solle eine Fußzeile darstellen. In diesem Fall wäre das Verhalten unerwünscht. Wir können dem nun mit verschiedenen Methoden und Tricks entgegenwirken. In der Fachsprache spricht man von „clearen“, das heißt wir wollen das Umfließen beenden.

Wir benutzen folgenden CSS Quelltext:

#gesamt {background-color:#0000FF}
#rot {background-color:#FF0000;float:left; width:100px}
#gelb {background-color:#FFFF00;margin-left:100px}
#folgetext {background-color:#00FF00;clear:left}

Ergebnis:

Roter Container Roter Container Roter Container Roter Container Roter Container Roter Container Roter Container
Gelber Container Gelber Container
Gelber Container Gelber Container Gelber Container
Grüner Container

 

Der grüne Container steht nun unter dem gefloateten roten Container.

Der eine oder andere Leser wird sich nicht erst jetzt fragen wo den der blaue Container geblieben ist? Machen wir ihn mit einem blauen Rahmen sichtbar. Wir verwenden:

CSS Quelltext:

#gesamt {background-color:#0000FF;border:3px solid #0000FF}
#rot {background-color:#FF0000;float:left; width:100px}
#gelb {background-color:#FFFF00;margin-left:100px}
#folgetext {background-color:#00FF00;clear:left}

Ergebnis:

Roter Container Roter Container Roter Container Roter Container Roter Container Roter Container Roter Container
Gelber Container Gelber Container
Gelber Container Gelber Container Gelber Container
Grüner Container

 

Aha, der gefloatete rote Container bleibt scheinbar nicht im umschließenden Container drin! Auch dieses Verhalten kann erwünscht sein.

Gefloatete Container umschließen

Will man mit dem umschließenden blauen Container auch den gefloateten roten Container umschließen, dann kann man folgende Methoden bzw. Tricks benutzen. Alle Methoden bzw. CSS-Tricks haben Vor- und Nachteile:

Methode 1 – ein zusätzliches Element einfügen:

Quelltext HTML:

<div id="gesamt">
<div id="rot">Roter Container</div>
<div id="gelb">Gelber Container</div>
<div id="zusatz">  </div>
</div>
<div id="folgetexte">Grüner Container</div>

CSS Quelltext:

#gesamt {background-color:#0000FF; border:3px solid #0000FF}
#rot {background-color:#FF0000; float:left; width:100px}
#gelb {background-color:#FFFF00; margin-left:100px}
#folgetext {background-color:#00FF00; clear:left}
#zusatz {font-size:1px;clear:left}

Ergebnis:

Roter Container Roter Container Roter Container Roter Container Roter Container Roter Container Roter Container
Gelber Container Gelber Container
Gelber Container Gelber Container Gelber Container
.
Grüner Container

 

Leider ist für diese Methode eine zusätzliches HTML-Element nur für Layoutzwecke notwendig. Außerdem kann diese Methode dazu führen, dass im IE der Peekaboo-Bug ausgelöst wird. (Dieser Bug bewirkt, dass im umfassenden Container Elemente teilweise nicht angezeigt werden, aber bei gewissen Operationen wie Änderung des Browserfenster wieder auftauchen.)

 

Methode 2 – Overflow einsetzen

Quelltext HTML:

<div id="gesamt"><br />
<div id="rot">Roter Container</div><br />
<div id="gelb">Gelber Container</div><br />
</div>
<div id="folgetexte">Grüner Container</div>

CSS Quelltext:

#gesamt {background-color:#0000FF; border:3px solid #0000FF; overflow:hidden; width:200px}
#rot {background-color:#FF0000; float:left; width:100px}
#gelb {background-color:#FFFF00; margin-left:100px}
#folgetext {background-color:#00FF00; clear:left}

Ergebnis:

Roter Container Roter Container Roter Container Roter Container Roter Container Roter Container Roter Container
Gelber Container Gelber Container
Gelber Container Gelber Container Gelber Container
Grüner Container

 

Bei dieser Methode muss wegen der Internet Explorer Versionen kleiner 7 (IE < 7) für den umfassenden blauen Container eine Breitenangabe gemacht werden. Alternativ könnte mittels eines CSS-Hacks und zwar mit dem sogenanten Tan-Hack (Tantek) nur für die IE < 7 dem umfassenden blauen Container eine Höhe von 1% zugewiesen werden also:

* html #gesamt {height:1%}

 

Methode 3 – mittels spezieller CSS-Klasse ein clear Element einfügen

Quelltext HTML:

<div id="gesamt" class="clearfix">
<div id="rot">Roter Container</div>
<div id="gelb">Gelber Container</div>
</div>
<div id="folgetexte">Grüner Container</div>

CSS Quelltext:

#gesamt {background-color:#0000FF; border:3px solid #0000FF}
#rot {background-color:#FF0000; float:left; width:100px}
#gelb {background-color:#FFFF00; margin-left:100px}
#folgetext {background-color:#00FF00; clear:left}
.clearfix:after {
content:"."; clear:both; display:block; height:0; visibility:hidden }
.clearfix {display: inline-block; }
/ * Verstecke vor IE-mac \* /
* html .clearfix {height: 1%; }
.clearfix {display: block; }
/ * Ende Verstecke vor IE-mac * / 

Achtung im CSS Quelltext Leerzeichen zwischen / und * und zwischen * und /entfernen!!!

Ergebnis:

Roter Container Roter Container Roter Container Roter Container Roter Container Roter Container Roter Container
Gelber Container Gelber Container
Gelber Container Gelber Container Gelber Container
Grüner Container

 

Diese Methode beinhaltet so einige CSS-Tricks für den IE, sie funktioniert aber recht zuverlässig. Der große Vorteil: man braucht keine Breitenangabe für den umschließenden blauen Container.

 

Gängige Browser Bugs und deren Umgehung mittels CSS-Hacks

Leider weisen viele Browser vor allem der Internet Explorer (IE) Fehler bei der Umsetzung von CSS auf. Diese Browser Bugs kann man mit sogenannten CSS-Hacks (CSS Tricks) umgehen.

Boxmodell Fehler IE < 6

Der IE < 6 berechnet das Boxmodell falsch. Laut W3C Spezifikation muss sich die Gesamtbreite eines Container aus Breite Innenabstand Rahmenstärke Außenrand ergeben. Der IE < 6 berechnet die Gesamtbreite aber aus Breite Außenrand, die Innenabstände und Rahmenstärken werden nicht auf addiert. Beim IE 6 kann man zwischen dieser falschen Berechnung und der korrekten Berechnung mittels Dokumentweiche umschalten, was aber das Problem nicht löst, wenn man nicht nur für den IE 6 programmieren möchte.

Quelltext HTML:

<div id="gesamt">Diese Box sollte 160px breit sein</div>

 

CSS Quelltext:

 

#gesamt {background-color:#FFFF00; width:100px; padding:20px; border:10px solid #FF0000}

Ergebnis:

Diese Box sollte 160 px breit sein. Ist sie auch, aber leider nicht im IE 5. Im IE 5 ist sie nur 100 px breit.

Lösung um trotz Boxmodell-Fehler auch für den IE 5 die gewünschte Breite zu erhalten

Wir wollen für unseren Container eine Breite (width) von 100px, einen Innenabstand (padding) von 50px und eine Rahmenstärke (border) von 20px definieren. Die korrekte Breite ergibt sich wie folgt:
Gesamtbreite=100 2*30 2*10=160
Weil der IE 5 den Innenabstand und die Rahmenstärke nicht mit rechnet ergibt sich für den IE 5 die Gesamtbreite wie folgt:
Gesamtbreite=100
Um diesen Sachverhalt zu korrigieren, müssen wir nur für den IE <6, mittels des Tan-Hack und einer speziellen Schreibweise für die Breite (w\idth) die nur der IE ab Version 6 versteht, eine Breite (width) von 160px vorgeben:

* html #gesamt {
width:160px;
w\idth:100px;
} 

Ergebnis:

Diese Box ist nun auch im IE 5 160 px breit.

 

Bemerkung: Der Boxmodell-Fehler wirkt sich also nur aus, wenn einem Element eine Breite (width) Innenabstand (padding) oder Rahmenstärke (border) zugewiesen wird. Daraus ergibt sich die Alternative Lösung: Einfach die Kombination von Breitenangabe und Innenabstand oder Rahmenstärke bei dem gleichen Element vermeiden.

Bemerkung2: Der Boxmodell-Fehler gilt natürlich auch für die Höhe (height)!