2.7 Das Clearing der Spalte #col3
Im vorigen Abschnitt wurde bereits auf das globale Verhalten von clear:both; und seine Auswirkungen innerhalb des statischen Containers #col3 hingewiesen. Während dieser Effekt in Bezug auf die Position der Inhalte innerhalb von #col3 unerwünscht ist, wird dieser Effekt innerhalb von YAML gezielt ausgenutzt, um #col3 immer zur längsten Spalte werden zu lassen — unabhängig vom Füllstand der einzelnen Spalten.
Das Ziel dieser Bemühungen ist es, die CSS-Eigenschaft border von #col3 dazu zu verwenden, um vertikale Spaltentrennlinen (vertikale Voll-, Strich- oder Punktlinien) oder auch einfarbige Spaltenhintergründe für die float-Spalten ohne Grafikeinsatz erzeugen zu können. Durch das globale Clearing würden diese immer bis zum #footer reichen. Damit entstünde eine alternative Möglichkeit zur grafischen Layoutgestaltung, die zudem extrem einfach editierbar wäre.
Globales Clearing macht #col3 zur längsten Spalte
Wie wird #col3 zur längsten Spalte? In allen modernen Browser (Mozilla, Firefox, Opera usw.) erfolgt dieses bereits ohne weitere Maßnahmen. Da es sich bei #col3 um einen statischen Container handelt, wirkt das durch die Klasse clearfix ausgelöste Clearing von #col3_content global und erzwingt eine Verlängerung von #col3 bis zum unteren Ende der längsten float-Spalte. Näheres zur Funktionsweise der clearfix-Klasse 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>
...
Schauen wir uns nun den unsichtbaren DIV-Container etwas genauer an. Ich erwähnte bereits, dass dieser spezielle Container nur im Internet Explorer benötigt wird. In allen modernen Browser wird er daher komplett abgeschaltet. Die dafür nötigen Angaben finden sich in der Datei base.css im Verzeichnis yaml/core/:
/* IE-Clearing: ... */
#ie_clearing { display: none; }
Die Anpassung der Eigenschaften dieses speziellen Clearing-DIVs für den Internet Explorer sind in der Datei iehacks.css im Verzeichnis yaml/core/ 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: -2px 0 -1em 0; }
#col3_content { margin-bottom: -2px; }
/* (de) Vermeidung horizontaler Scrollbalken ... im IE7 */
html { margin-right: 1px; }
* html { margin-right: 0; }
/* (de) Bugfix: Notwendig im IE7 */
#col3 { position:relative; }
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. Mit Hilfe des Backslash wird Parser-Bug des IE 5.x und 6.0 ausgenutzt, der dafür sorgt, 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 von #col3 führt. Nähere Informationen dazu finden Sie im Abschnitt 5.3: Bekannte Probleme - Internet Explorer. Im IE 5.x 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 ein spezielles Clearing-Verfahren eingesetzt, welches das Auftreten dieses Bugs verhindert.
IE-Clearing im Internet Explorer 6.0
Die Clearing-Lösung basiert im Grunde darauf, dass der Internet Explorer übergroße Elemente innerhalb von #col3 selbstständig unter die float-Spalten umbricht. Um dies zu erreichen, erhält der DIV-Container #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 Prozent einschränken, wird ein Umbruch des Containers unter die float-Spalten quasi 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 einen 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.
/* Vermeidung horizontaler Scrollbalken bei randabfallenden Layouts im IE7 */
html {margin-right: 1px}
* html {margin-right: 0}
Durch diesen Trick werden horizontale Scrollbalken verhindert und der verbleibende 1 Pixel breite Rand neben dem vertikalen Scrollbalken des IE7 wird in der Regel nicht als störend wahr genommen.
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.
Grafikfreie Spaltentrennlinien
Geschafft: Jetzt ist es möglich, die CSS-Eigenschaft border von #col3 für vertikale Spaltentrennlinien zu den Nachbarspalten #col1 und #col2 einzusetzen, die bis zum Footer reichen. Und all das, ohne Grafikeinsatz. Als Beispiel könnte man eine vertikale Punkt-Linien erzeugen:
#col3 {
border-left: 2px #eee dotted;
border-right: 2px #eee dotted;
}
Sie wollen einen Beweis, dass es funktioniert? Bitte schön.
/examples/04_layouts_styling/3col_column_dividers.html
Eine detaillierte Beschreibung dieses Beispiels finden Sie im Abschnitt 4.6: Gestaltung der Spalten.
Hinweis: Die Anwendung dieser Technik ist nur sinnvoll in Verbindung mit Spaltenanordnungen bei denen sich #col3 in Mittellage befindet, also 1-3-2 und 2-3-1 bzw. bei 2-Spalten-Layouts. Nähere Informationen zur freien Spaltenanordnung finden Sie im Abschnitt 4.4: Freie Spaltenanordnung.
Bei Verwendung der Spaltananordnungen 1-2-3 / 3-2-1 oder 2-1-3 / 3-1-2 kann diese Technik leider generell nur bedingt eingesetzt werden, da hier im Internet Explorer das Verlängern von #col3 bis auf Höhe der längsten float-Spalte nicht funktioniert. Bei diesen Layoutvarianten sollten Sie auf die "Faux Columns" Technik zur Gestaltung von vertikalen Trennlinien zurückgreifen.
Damit sind der strukturelle Aufbau des XHTML-Quelltextes und die Funktionsweise des IE-Clearings von YAML besprochen. Das Fundament steht somit. Als letzter Punkt der Quelltext-Struktur fehlen noch die Skip-Links, welche im folgenden Abschnitt erläutert werden.
