4.6 Gestaltung der Spalten
Im Abschnitt 2.7 wurde das besondere Clearing am Ende der statischen Spalte #col3 bereits ausführlich erläutert.
Zwar erreicht man damit noch nicht das große Ziel von echten gleich langen Spalten, jedoch kommt die Lösung des YAML-Frameworks diesem Wunsch sehr nahe. Wie nahe, das sollen die folgenden zwei Beispiele demonstrieren.
Wichtig: Die Spalte #col3 behält in der Regel den Wert width:auto;! Andernfalls vergibt der Internet Explorer intern das Merkmal hasLayout = true (siehe Artikel: on having Layout), was dazu führt das das IE-Clearing am Ende von #col3 wirkungslos wird, denn es würde ebenso eingeschlossen werden.
Hintergrund: Die statische Spalte #col3 ist der Lieferant für die Spaltentrennlinien. Die Spalte würde in diesem Fall nicht mehr nach unten erweitert werden und die an #col3 gebundenen Spaltentrennlinien reichen dann nicht mehr in jedem Fall bis zur Fußzeile.
Beispiel 1 - Spaltentrennlinien
Ein oft genutztes Gestaltungselement sind vertikale Trennlinien zwischen den einzelnen Content-Spalten. Damit diese - unabhängig vom Füllstand der Spaltencontainer - immer gleich lang sind, wird hierfür in der Regel die Faux-Columns-Technik (Verwendung von Hintergrundgrafiken) eingesetzt.
Bei den Spaltenanordnungen 1-3-2 und 2-3-1 (siehe Abschnitt 4.4) kann bei YAML auf den Einsatz von Grafikelementen für dieses Gestaltungselement vollständig verzichtet werden. Stattdessen wird die CSS-Eigenschaft border der statischen Spalte #col3 verwendet. Dies ist möglich, da #col3 bei diesen Spaltenanordnungen immer die längste ist.
Hier ein Beispiel für eine zwei Pixel breite Punktlinie als Trennlinien zwischen den Spalten eines 3-Spalten-Layouts.
#col3 {
border-left: 2px #ddd dotted;
border-right: 2px #ddd dotted;
}
Beispiel 2 - Spaltenhintergründe
Um Spalten mit Hintergrundfarben oder -grafiken zu belegen, bedarf es eines kleinen Tricks. Denn wie bereits mehrfach erwähnt, ist in CSS ein "echtes" Spaltenlayout mit floatenden Elementen nicht wirklich herstellbar, denn die einzelnen Spaltencontainer sind immer nur so hoch, wie es die Inhalte bedingen. Eine robuste und deshalb hier vorgestellte Methode, dennoch die gewünschte Optik zu erzeugen, ist die "Faux Columns" Technik.
Hierbei wird der Umstand ausgenutzt, dass die Spaltencontainer (deren Länge variiert) von Elterncontainern wie #main umschlossen wird, die deshalb praktisch immer über die volle Spaltenhöhe besitzen. Also belässt man den Hintergrund der Spaltencontainer transparent und weist das gewünschte Hintergrundbild einfach einem Container wie #main zu. Da jedoch in CSS 2 immer nur ein Hintergrundbild pro Container festgelegt werden kann, muss für die zweite Spaltengrafik auch ein zweiter Container gefunden werden. In den beiliegenden Beispielen ist dies .page. Und damit die Hintergrundgrafik von .page - welcher auch #header und #footer einschließt - wirklich nur im Bereich der Spalten sichtbar ist, erhalten #header und #footer zusätzlich die Hintergrundfarbe Weiß.
Das folgende Beispiel verdeutlicht die einfache Implementation dieser Technik. Sie finden die notwendigen CSS-Definitionen in der Datei basemod_faux_columns.css.
04_layouts_styling/3col_faux_columns.html
Etwas aufwändiger wird es bei flexiblen Layouts. So Sie Ihre Spaltenbreiten in Prozentwerten definieren, gibt es auch hierfür eine Lösung mit der Faux-Columns-Technik. Ein wenig komplizierter wird es deshalb, weil Sie die Hintergrundgrafik speziell aufbereiten müssen, damit die Positionierung per CSS korrekt erfolgen kann. Die Funktionsweise wird im Artikel "Faux Colums for liquid layouts" sehr gut erläutert. Das folgende Beispiel zeigt Anwendung innerhalb eines dreispaltigen Layouts mit grafisch gestalteten Randspalten.
04_layouts_styling/3col_liquid_faux_columns.html
Hinweis: In früheren YAML-Versionen war es alternativ auch möglich, die border-Eigenschaft des Containers #col3 zu verwenden, um einfarbige Spaltenhintergründe der Randspalten zu erzeugen. Diese Methode wird ab YAML 3.2 nicht mehr unterstützt, da sie ein potentielles Zugänglichkeitsproblem erzeugt, sobald unter Windows bestimmte Kontrastmodi verwendet werden.
