Schönere Seiten dank "float"
Teil 2: CSS-Workshop: float
- CSS-Workshop: float
- Teil 2: CSS-Workshop: float
- Teil 3: CSS-Workshop: float
Pseudoklasse :after
Unter Verwendung dieser Methode wird die benötigte Anweisung nicht als ein Markup-Element dem Quelltext der Webseite hinzugefügt, sondern mittels :after aus einem CSS-Stylesheet übertragen.
Mittels :after fügt man der Webseite ein ansonsten bedeutungsloses Inhaltselement wie einen Punkt hinzu und definiert es mittels {display: block;} als ein Block-Level-Element, um ihm dann {clear: both;} zu übergeben. Damit der Punkt die Optik der Seite nicht stört, sollte man ihn unsichtbar machen, zum Beispiel mittels {height: 0;} und {visibility: hidden;}. Der zugehörige CSS-Quelltext sieht dann in etwa so aus:
.clearfix:after {
content: ".";
display:
block;
height: 0;
clear: both;
visibility: hidden;
}
Diese Methode setzt die float-Anweisung wirksam außer Gefecht und wird in allen aktuellen Webbrowsern außer im Internet Explorer umgesetzt, wo die Pseudoklasse :after derzeit noch nicht unterstützt wird.
Wenn Sie sowohl den aktuellen stabilen IE 7 als auch den älteren IE 6 noch unterstützten müssen, dann kann es durchaus passieren, dass Sie auf unerwartete Überraschungen zum Beispiel mit Flash in bestimmten float-Konstruktionen stoßen werden.
Im Falle von Internet Explorer 5.5 bis 7 muss man sicherstellen, dass die Container- Box die Eigenschaft hasLayout besitzt. Dadurch werden nebenbei Microsofts eigene Bugfixes für verschiedene float-Überraschungen aktiviert. Bei verschachtelten floats muss das nicht immer funktionieren.
Um das Verhalten des Internet Explorer hinsichtlich der hasLayout-Eigenschaft zu steuern, fügen Sie dem Quelltext jeder betreffenden Webseite hinter dem Aufruf der eigentlichen CSS-Stylesheets im Head-Abschnitt drei versteckte bedingte Kommentare (Conditional Comments) hinzu:
<head><link rel="stylesheet" type="text/
css" href="meinStylesheet.css" /><!--[if IE]><link rel="stylesheet" type="text/
css" href="IE.css" /><![endif]--><!--[if lte IE 6]><script type="text/javascript" src=
"IE.js"></script><![endif]--><!--[if lt IE 6]><link rel="stylesheet" type="text/
css" href="IE-5.5.css" /><![endif]--><!-- Ende der IE-Korrekturen --></head>
Bei den bedingten Kommentaren handelt es sich um einen Microsoft-spezifischen, proprietären Trick zum Steuern der verschiedenen Versionen des Internet Explorer. Diese Methode hat zwei Vorteile: Andere Browser nehmen bedingte Kommentare nicht zur Kenntnis und die Webseite validiert sich problemlos.
Der erste bedingte Kommentar beinhaltet einen Aufruf einer CSS-Datei mit Anweisungen, welche die hasLayout-Eigenschaft von Microsoft aktivieren, zum Beispiel:
.meinElement,
.meinElement a,
.colwrapper div {
zoom: 1;
}
Die Anweisung {zoom: 1} aktiviert bei den betreffenden Elementen die hasLayout- Eigenschaft im Internet Explorer 5.5 bis 7 und da sie die Zoomstufe genau auf 100% setzt, ändert sich nichts am Aussehen der Seite. In die Datei im zweiten bedingten Kommentar werden nur Anweisungen eingetragen, die die Darstellung der Webseite im Internet Explorer 6 korrigieren.
Hier könnte man zum Beispiel die overflow-Eigenschaft betreffender Objekte mittels Javascript auf hidden setzen (object.style.overflow="hidden"), um zu verhindern, dass Bilder in einem float-Element über seine Grenzen hinausragen und die gesamte Layoutkonstruktion durcheinanderwerfen.
Die Anweisungen im zweiten der beiden bedingten Kommentare werden von IE 6, IE 5.5 und IE 5.01 ausgewertet. Wenn Sie sich auch noch um Bugs in älteren Versionen als IE 6 herumarbeiten müssen, benötigen Sie noch den dritten bedingten Kommentar aus dem obigen Beispiel.
Von dem dritten bedingten Kommentar mit dem Verweis auf eine weitere CSS-Datei fühlt sich nur IE bis einschließlich Version 5.5 angesprochen; dadurch kann man sich um die Bugs auch noch in diesem Webbrowser herumarbeiten. Hier muss unter anderem die nicht unterstütze Anweisung {zoom: 1;} zum Beispiel durch {height: 100%;} ersetzt werden.
Solange die wesentlichen Browser sich nicht W3C-konform verhalten, muss man zwangsläufig auf die Benutzer nicht-konformer Browser Rücksicht nehmen. Der Einsatz von Skripten zur Browsererkennung (browser sniffing) ist übrigens aufgrund des Phishing-Verdachtes nicht immer empfehlenswert. Bedingte Kommentare sind dagegen in dieser Hinsicht unbedenklich.
Tipp: Bauen Sie Ihre Webseiten stets mit einem Auge auf Ihre Darstellung in einem standardkonformen Webbrowser, nicht im Internet Explorer. Erst wenn die finale Version der Seite feststeht, testen und optimieren Sie diese für die Webbrowser von Microsoft. Andernfalls würden Sie mit den unzähligen mehr oder weniger nicht dokumentierten float-Bugs im Internet Explorer nur Zeit verlieren und unter Umständen Webseiten erstellen, die in standardkonformen Browsern nur mit Mühe laufen.
overflow:auto
Die dritte und einfachste Methode zum Beenden von float-Konstruktionen basiert auf overflow:auto. Das Hinzufügen von overflow:auto zu der letzten Zeile in der äußeren Container-Box erzwingt eine Anpassung der Höhe an den Inhalt in allen gängigen Webbrowsern (außer Netscape 4).
In einzelnen Fällen kann es jedoch je nach Aufbau der Seite Darstellungsprobleme bei Bildern geben, die einer gesonderten Optimierung bedürfen, es handelt sich dabei jedoch um eine Ausnahme. Das innere div-Element wird zum Beispiel mit diesem CSS-Code positioniert:
#innenbereich
{
width:25%;
float:left;
}
Um die float-Konstruktion zu schließen, fügt man am Ende der CSS-Definition des äußeren div-Elementes {overflow:auto;} zum Beispiel:
#aussenbereich
{
background-
color:#fff;
width:100%;
overflow:auto;
}
hinzu.
