XHTML Struktur
2.7 Der Clou: Spaltentrenner, einfach und perfekt
Im vorigen Abschnitt ging es darum, wie das globale Verhalten von clear:both; vermieden werden kann. Doch es gibt durchaus Fälle, in denen genau dieses Verhalten erwünscht ist. Innerhalb von YAML wird es dazu genutzt, die statische Spalte #col3 immer zur längsten Spalte werden zu lassen — unabhängig vom Füllstand der einzelnen Spalten.
Was hat dies für Vorteile? Wenn die statische Spalte #col3 immer genauso lang ist, wie die längste der beiden float-Spalten #col1 und #col2, dann können wir sie dazu benutzen, 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 die möglich wird, dürfen #col1, #col2 und #col3 innerhalb von #main nicht ineinander geschachtelt sein.
Wie wird aber #col3 zur längsten Spalte? Dazu wird am Ende von #col3 wird ein unsichtbarer HR-Tag eingefügt. Unsichtbar wird er durch seine speziellen CSS-Eigenschaften. Eine davon ist clear:both;.
...
<!-- DER CLOU: Globales CLEAR mittels HR -->
<hr class="clear_columns" />
...
Da es sich bei #col3 um ein statisches DIV handelt, ist die Wirkungsweise von clear:both; diesmal wirklich global, d.h. beendet alle Fließumgebungen im Layout - unsere float-Spalten #col1 und #col2. An dieser Stelle nutze ich also den in der Beispieldatei gobal_clear.html gezeigten Effekt für mein Layout gezielt aus.
artikel/xhtml/global_clear.html
Hinweis: Und hier nun die Antwort auf die am Ende des Abschnitts 2.3: Markupfreies Clearing gestellte Frage: Nur die Clearfix-Methode ermöglicht diesen Trick. Selbstverständlich würden sich die einzelnen Spalten genauso gut mit der Overflow-Methode clearen lassen. Der Nachteil dabei: Bei der Anwendung der Overflow-Methode in der CSS-Klasse .clearfix wäre der HR-Tag in #col3 nutzlos.
Den genauen Grund kann ich nicht erklären, die Auswirkungen hingegen schon: Die float-Spalten #col1 und #col2 bleiben in diesem Fall vor der Eigenschaft clear:both; des HR-Tags verborgen. Die statische Spalte #col3 würde daher nicht mehr zwingen zur längsten Spalte werden. Damit wäre der große Vorteil dahin, sie zur Bereitstellung der Spaltentrenner oder Spaltenhintergründe zu nutzen wie es im Kapitel 4: Modifikationen noch gezeigt werden wird.
Ich sprach von einem unsichtbaren HR-Tag. Dies wird mit einer kleinen CSS-Spielerei erledigt (siehe css/main/base.css). Wie man sieht, ist es gar nicht so einfach, den HR-Tag browserübergreifend anwesend aber dennoch unsichtbar zu gestalten.
.clear_columns{
content: ".";
display: block;
height: 0;
line-height: 0;
clear: both;
float: left;
visibility: hidden;
border: 0;
padding: 0;
margin: -2em 0 0 0;
}
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.
artikel/xhtml/spaltentrenner-test.html
Hinweis: Im Internet Explorer kann unter ganz bestimmten Bedingungen zu einer fehlerhaften Darstellung des linken Spaltentrenners kommen. Detailiertere Informationen dazu finden Sie im Abschnitt 5.3: Bekannte Probleme & Hinweise.
Damit sind der strukturelle Aufbau des XHTML-Quelltextes und die Funktionsweise des besonderen HR-Tags von YAML besprochen. Der erste Grundbaustein steht. Allerdings fehlen noch zwei wichtige CSS-Bausteine. Sie werden im Kapitel 2: CSS-Struktur ausführlich erläutert.
