2.7 Das Clearing der Spalte #col3
Im vorigen Abschnitt wurde bereits auf das globale Verhalten von clear:both; und seine Auswirkungen innerhalb der statischen Spalte #col3 hingewiesen. Innerhalb des YAML-Framworks wird dieser Effekt dazu genutzt, die statische Spalte #col3 immer zur längsten Spalte werden zu lassen — unabhängig vom Füllstand der einzelnen Spalten.
Globales Clearing macht #col3 zur längsten Spalte
Was hat dieses Vorgehen für Vorteile? Wenn die statische Spalte #col3 immer genauso lang ist, wie die längste der beiden float-Spalten #col1 und #col2, dann kann sie dazu benutzt werden, um auf einfache Weise Spaltentrenner (vertikale Voll-, Strich oder Punktlinien) zwischen den Spalten zu erzeugen. Diese Spaltentrenner würden somit immer bis hinunter zum Footer reichen. Damit dies möglich wird, dürfen #col1, #col2 und #col3 innerhalb von #main nicht ineinander geschachtelt sein.
Wie wird #col3 zur längsten Spalte? In allen modernen Browser (Mozilla, Firefox, Opera usw.) erfolgt das Clearing durch die CSS-Klasse clearfix, welche an die Inhalts-Container in den drei Spalten vergeben wird. Da es sich bei #col3 um eine statische Spalte handelt, wirkt das so ausgelöste Clearing durch clearfix an #col3_content global und verlängert die Spalte bis zur Untererkante der längsten Floatspalte. Näheres zur Funktionsweise des Clearings finden Sie im Abschnitt 2.6: Die Funktionsweise von floats.
Eine spezielle Clearing-Lösung für den Internet Explorer
Im Internet Explorer funktioniert dieses globale Clearing der Clearfix-Lösung nicht, da der Internet Explorer die CSS2-Pseudoklasse :after, welche die Eigenschaft clear:both; enthält, nicht versteht. Daher muss am Ende der Spalte #col3 ein zusätzliches HTML-Element eingefügt werden, welches die Clearing-Anweisung beinhaltet. Dies geschieht in Form eines unsichtbaren DIV-Tags.
...
<!-- IE Column Clearing -->
<div id="ie_clearing"> </div>
<!-- Ende: IE Column Clearing -->
...
Schauen wir uns nun den unsichtbaren DIV-Tag etwas genauer an. Ich erwähnte bereits, dass dieser spezielle DIV-Container nur im Internet Explorer benötigt wird. In allen modernen Browser wird er daher komplett abgeschaltet. Die Angaben finden sich in der Datei base.css im Verzeichnis css/main:
/* IE-Clearing: ... */
#ie_clearing { display: none } Die Anpassung der Eigenschaften des Clearing-DIVs für den Internet Explorer sind in der Datei iehacks.css im Verzeichnis css/main abgelegt:
#ie_clearing {
display:block; /* DIV sichtbar machen */
\clear:both; /* Normales Clearing für IE5.x/Win */
width: 100%; /* IE-Clearing mit 100%-DIV
für IE 6 */
font-size:0;
margin: -2px 0 -1em 1px; /* IE-Clearing mit übergroßem
DIV für IE7 */
}
* html { margin: 0 0 -1em 0 }
html {margin-right: 1px} /* Vermeidung horizontaler Scrollbalken
bei randabfallenden Layouts im IE7 */
* html {margin-right: 0} /* Der IE6 benötigt das nicht */
#col3_content { margin-bottom:-2px }
#col3 { position:relative } /* Erforderlich für IE7 */
IE-Clearing im Internet Explorer 5.x
Mit display:block wird im IE zunächst die Darstellung des Containers aktiviert. Danach folgt das eigentliche Clearing mittels \clear:both. Der Backslash sorgt dafür, dass die Eigenschaft nur vom Internet Explorer 5.x verstanden wird.
Wichtig: Es handelt sich hierbei um das Standardvorgehen zum Clearen von Fließumgebungen. Allerdings tritt hierbei im Internet Explorer v5.x bis v7 ein unangenehmer Bug auf, der unter bestimmten Randbedingungen zum Kollabieren des linken Margins an #col3 führt. Nähere informationen dazu finden Sie im Abschnitt 5.3: Bekannte Probleme - Internet Explorer. Im IE5 ist dieser Bug nicht zu beheben, daher wird bei dieser Browserversion das reguläre Clearing dennoch eingesetzt.
Für den Internet Explorer 6 und 7, die ebenfalls von diesem Bug betroffen sind, wird eine spezielles Clearing-Verfahren eingesetzt, welches das Auftreten des Bugs verhindert.
IE-Clearing im Internet Explorer 6.0
Die Clearing-Lösung basiert darauf, dass der Internet Explorer übergroße Elemente innerhalb von #col3 selbstständig unter die Floatspalten umbricht. Um dies zu erreichen, erhält der DIV-Container im #ie_clearing die Eigenschaft width: 100% im IE6. Da die float-Spalten jedoch den zur Verfügung stehenden Platz in jedem Fall auf unter 100% einschränken, wird der Umbruch des Clearing-DIVS unter die float-Spalten provoziert.
IE-Clearing im Internet Explorer 7.0
Der IE7 benötigt hierfür einen Box mit einer Größe von über 100 Prozent. Daher erhält der Container ein zusätzlichen linken Margin von 1 Pixel margin: -2px 0 -1em 1px. Der Internet Explorer 7 hat jedoch einen Bug, der dazu führt, dass dieser überstehende Pixel - der im Layout keinerlei Bedeutung hat - bei randabfallenden Layouts (body, #page_margins und #page auf 100% Breite und ohne Rahmen) horizontale Scrollbalken erzeugt. Um auch diesen Sonderfall abzufangen, erhält das HTML-Element html einen 1 Pixel breiten seitlichen Margin.
html {margin-right: 1px} /* Vermeidung horizontaler
Scrollbalken bei randabfallenden Layouts im IE7 */
* html {margin-right:
0}
Durch diesen Trick werden horizontale Scrollbalken verhindert und der 1 Pixel breite Rand neben dem vertikalen Scrollbalken des IE7 wird nicht sichtbar.
Zum Schluss folgt noch eine weitere Hilfestellung für den Internet Explorer 7. Dem Container #col3 muss zum Abschluss die Eigenschaft position:relative zugewiesen werden. Ohne sie würde der Internet Explorer 7 den Container #ie_clearing ignorieren.
Clearing-Container im Layout verstecken
Die Margins in den anderen Richtungen margin: -2px 0 -1em 1px dienen lediglich dazu, den Container in allen IE-Versionen optisch "unsichtbar" werden zu lassen. Um den DIV-Container endgültig unsichtbar zu machen wird die Schriftgröße auf Null gesetzt. Damit schrumpft die Höhe des Containers auf 2 Pixel zusammen. Diese letzten 2 Pixel werden durch einen weiteren negativen Margin an #col3_content ausgeglichen. Damit wird der DIV-Container im Layout nicht sichtbar, erfüllt jedoch seine Aufgaben.
Und noch eine letzte Anpassung ist erforderlich. Das IE-Clearing funktioniert nur solange die Spalte #col3 nicht die proprietäre Eigenschaft hasLayout zugewiesen bekommt. Genau das kann jedoch beispielsweise bei der Beseitigung des 3-Pixel-Bugs (siehe Abschnitt 3.5: CSS-Anpassungen für den Internet Explorer) geschehen. In diesem Fall sind die Spaltentrenner also nicht einsetzbar. Dennoch muss für ein korrektes Clearing der Spalten gesorgt werden, um den Footer unterhalb der Spalten zu platzieren. Dies geschieht einfach, indem dem Container #footer in der Datei base.css ebenfalls die Eigenschaft clear:both; zugewiesen wird.
Hinweis: Bis einschließlich Version 2.4 des YAML-Frameworks wurde für das Clearing am Ende von #col3 ein HR-Tag mit der CSS-Klasse .clear_columns verwendet.
<!-- DER CLOU: Globales CLEAR mittels HR -->
<hr class="clear_columns" />Um die generelle Funktion von Layouts zu gewährleisten, die auf YAML-Versionen bis V2.4 aufsetzen, sind die CSS-Deklarationen der Klasse .clear_columns weiterhin in der Datei base.css enthalten.
Grafikfreie Spaltentrenner und Spaltenhintergründe
Geschafft: Jetzt ist es möglich, die CSS-Eigenschaft border von #col3 als Spaltentrenner einzusetzen und ohne Grafikeinsatz, vertikale Linien zwischen den Spalten oder auch einfarbige Spaltenhintergründe für #col1 und #col2 zu definieren, die bis zum Footer reichen. Als Beispiel könnten wir Punkt-Linien erzeugen:
#col3 {
border-left: 2px #eee dotted;
border-right: 2px #eee dotted;
}
Sie wollen einen Beweis, dass es funktioniert? Bitte schön: Jede Spalte darf einmal die längste sein.
Beispiel: layout_storage/layout_3col_vlines_v1.html
Eine detailiertere Beschreibung dieses Beispiels sowie ein weiteres Beispiel zur Erzeugung farbiger Spaltenhintergründe mit Hilfe dieser Technik finden Sie im Abschnitt 4.2: Gestaltung der Spalten.
Hinweis: Die Anwendung der grafikfreien Spaltentrenner ist nur sinnvoll bei Spaltenanordnungen bei denen sich #col3 in Mittellage befindet, also 1-3-2 und 2-3-1 bzw. den daraus resultierenden 2-Spalten-Layouts. Nähere Informationen zur freien Spaltenanordnung finden Sie im Abschnitt 4.4: Freie Spaltenanordnung.
Bei Nutzung der natürlichen Spaltananordnung 1-2-3 / 3-2-1 bzw. bei Verwendung negativer Margins (Spaltenanordnungen 2-1-3 und 3-1-2) können die grafikfreien Spaltentrenner generell nicht eingesetzt werden, da hier im Internet Explorer das Verlängern von #col3 bis auf Höhe der längsten Floatspalte nicht funktioniert. Bei diesen Layoutvarianten sollten Sie auf die Technik "Faux Columns" zur Gestaltung von Spaltenhintergründen zurückgreifen.
Damit sind der strukturelle Aufbau des XHTML-Quelltextes und die Funktionsweise des IE-Clearings besprochen. Der erste Grundbaustein steht. Als letzter Punkt der Quelltext-Struktur fehlen noch die Skiplinks, welche im folgenden Abschnitt erläutert werden.
