4.3 Grundlegende Variationsmöglichkeiten
Sie haben mit YAML zahlreiche Möglichkeiten, das Basis-Layout Ihren eigenen Wünschen anzupassen. Diese Möglichkeiten werde ich in diesem und den folgenden Abschnitten diskutieren. Zunächst werfen wir einen Blick auf die Struktur des (X)HTML-Quelltextes und die Reihenfolge der Spalten darin.
Die Reihenfolge der Spaltencontainer im (X)HTML-Quelltext ist festgelegt und sollte nicht verändert werden. Alle CSS-Bausteine, insbesondere die CSS-Anpassungen für den Internet Explorer, bauen auf dieser Struktur auf.
Mit den Grundvariationen werde ich zunächst Gestaltungsmöglichkeiten ausloten, bei denen die volle Funktionalität des Basislayouts erhalten bleibt. Das betrifft vorrangig das IE-Clearing, was dafür sorgt, dass auch im Internet Explorer die Spalte #col3 immer zur längsten Spalte wird und damit indirekt auch die grafikfreien Spaltentrennlinien verwendet werden können.
In Bezug auf die Barrierefreiheit eines Layouts steht oft die Forderung im Raum, die eigentlichen Hauptinhalte einer Webseite im Quelltext möglichst weit oben anzuordnen. Das Ziel dieser Regelung ist, den Zugang zu diesen Inhalten über Textbrowser oder Screenreader so einfach wie möglich zu gestalten. Andere Seitenelemente (Sidebar, Werbung, usw.) sollen daher im Quelltext möglichst erst nach den Hauptinhalten folgen.
Hinweis: Für dreispaltige Layouts werde ich im Abschnitt 4.4 ausführlich die Möglichkeiten beschreiben, um diesem Konzept mit YAML uneingeschränkt zu folgen. Dabei geht es um die vollkommen freie Anordnung der einzelnen Spalten auf dem Bildschirm, unabhängig von Ihrer Position im Quelltext.
Der Nachteil der freien Spaltenanordnung ist, dass bei vier der insgesamt sechs möglichen Varianten die grafikfreien Spaltentrennlinien nicht mehr einsetzbar sind, da bei diesen Varianten das IE-Clearing nicht umsetzbar ist.
3-Spalten-Layouts
Im Basislayout ist die Spaltenanordnung 1-3-2 umgesetzt. Dabei wird die statische Spalte #col3 von den beiden float-Containern #col1 und #col2 umschlossen. Durch einfaches Vertauschen der float-Richtung, lässt sich die Spaltenanordnung 2-3-1 erzeugen.
#col1 {float:right }
#col2 {float:left }
Das Vertauschen der beiden Spalten ermöglicht Ihnen, die Reihenfolge der Inhalte in den Randspalten Ihres Layouts zu beeinflussen. Auf diese Weise können Sie beispielsweise eine Unternavigation, die sich rechts oder links im Layout befindet, im Quelltext direkt unter der Hauptnavigation platzieren. Dazu setzen Sie die Unternavigation in die Spalte #col1 und wählen sich eine der beiden Spaltenanordnungen, um die Unternavigation am linken oder rechten Rand zu positionieren.
In beiden Fällen ist jedoch die Spalte #col3 für die Hauptinhalte vorgesehen und damit an letzter Stelle im Quelltext. Dieser Umstand ist im Sinne der Barrierefreiheit sicherlich ungünstig zu bewerten, er lässt sich jedoch recht einfach durch die standardmäßig im Quelltext eingebauten Skip-Links entschärfen.
Nun ist dies die gebräuchlichste - jedoch nicht die einzige - Raumaufteilung für ein 3-Spalten-Layout. Eine Alternative bietet sich, indem eine der Randspalten für die Hauptinhalte verwendet wird. In diesem Fall können Navigation, Sidebar und Extras in zwei nebeneinander liegenden, schmalen Spalten platziert werden.
#col1 {width: 60%}
#col2 {width: 20%}
#col3 {margin: 0 60% 0 20%}
Auch bei dieser Variation bietet es sich an, je nach Lage der Hauptinhalte (links oder rechts) die float-Richtung der Spalten #col1 und #col2 zu vertauschen. Der Vorteil dieser Lösung liegt darin, dass sich die statische Spalte #col3 immer noch zwischen den beiden Randspalten befindet und somit der Einsatz der grafikfreien Spaltentrennlinien problemlos möglich ist.
2-Spalten-Layouts
Auch bei Layouts mit zwei Spalten ist es auf einfache Weise möglich, die Platzierung der Hauptinhalte im Quelltext zu optimieren und dennoch volle Gestaltungsfreiheit im Layout zu behalten. Im Regelfall gibt es bei 2-Spaltern eine schmale Spalte für die Navigation und eine breite Spalte für die Inhalte.
Hierbei ist es auf einfache Weise möglich, die Platzierung der Hauptinhalte im Quelltext zu optimieren und dennoch volle Gestaltungsfreiheit im Layout zu behalten. Als Beispiel soll die Navigation am linken Rand erscheinen. Für dieses Beispiel gibt es zwei Wege.
Die obenstehende Grafik verdeutlicht die möglichen Anordnungen der Spalten. Generell kommt hierbei ausschließlich ein floatender Container (#col1) und ein statischer Container (#col3) zum Einsatz.
Bei all diesen Kombinationen lassen sich alle Funktionen des Frameworks uneingeschränkt anwenden (Stichwort: grafikfreie Spaltentrennlinien oder -hintergründe) und gleichzeitig besteht die Möglichkeit, die Inhalte optimal für Suchmaschinen innerhalb des Quelltextes zu platzieren.
Die erforderlichen Eingriffe in das Basislayout sind dabei minimal. Per CSS muss lediglich die Randlage (links/rechts) des Containers #col1 festgelegt und die zugehörigen Randabstände für #col3 angepasst werden. Welche Funktion innerhalb des Layouts die beiden Container übernehmen, entscheidet sich dabei lediglich über die Festlegung der Containerbreite.
Hinweis: In den Beispielen des Download-Paketes finden Sie vier Varianten für 2-Spalten-Layouts, die jeweils mit den Containern #col1 und #col3 umgesetzt wurden. Dabei werden alle möglichen Kombinationen für die Anordnung der Container am Bildschirm vorgestellt.
Weitere Alternativen zur Anordnung der Container
Damit aber noch nicht genug. In den vorangegangen 2-Spalten-Layouts wurde jeweils eine der beiden float-Spalten ausgeblendet. Letztlich kann ein 2-Spalter ebenso gut aus #col2 und #col3 erstellt werden. In diesem Fall steht #col1 für weitere Spielereien zur Verfügung.
Im Standardlayout werden die drei Container zwar als Spalten eines Mehrspaltenlayouts behandelt, jedoch entscheiden letztlich nur Sie über die Verwendung und damit auch die Anordnung der Container.
Im nebenstehenden Beispiel wird zwischen dem Header der Seite und den zweispaltigen Hauptteil noch ein weiterer Container benötigt, der sich über die volle Breite erstreckt. In diesem Fall ist es vorstellbar, den zweispaltigen Hauptteil mit #col2 und #col3 zu erstelllen und #col1 darüber zu platzieren.
#col1 {float: none; width: auto; }
#col2 {float: left; width: 25%; }
#col3 {margin-left: 25%; margin-right: 0 }
Dem Vorgehen bei der Platzierung der Spaltencontainer am Bildschirm sind kaum Grenzen gesetzt. Auf Grund der immer unverändert bleibenden Quelltextstruktur ist es relativ einfach, mögliche störende Einflüsse von CSS-Bugs des Internet Explorers bereits im Vorfeld zu erkennen und abzufangen.
Generische CSS-Klassen zur Layoutgestaltung
Neben der Möglichkeit, alternative Layoutvarianten durch die Einbindung alternativer Stylesheets unter Ausnutzung der CSS-Kaskade zu erstellen, kann das Basislayout alternativ auch durch folgende Standardklassen modifiziert werden.
/**
* @section generic classes for layout switching
* @see ...
*
* .hidecol1 -> 2-column-layout (using #col2 and #col3)
* .hidecol2 -> 2-column-layout (using #col1 and #col3)
* .hideboth -> single-column-layout (using #col3)
*/
.hideboth #col3 { margin-left: 0; margin-right: 0; }
.hideboth #col3_content{ padding-left: 20px; padding-right: 20px; }
.hidecol1 #col3 { margin-left: 0; margin-right: 25%; }
.hidecol1 #col3_content{ padding-left: 20px; }
.hidecol2 #col3 { margin-left: 25%; margin-right: 0; }
.hidecol2 #col3_content{ padding-right: 20px; }
.hideboth #col1, .hideboth #col2, .hidecol1 #col1, .hidecol2 #col2 { display:none; }
Für den praktischen Einsatz muss die jeweils benötigte Klasse entweder an das body Element, bzw. an ein beliebiges Elternelement der Spaltencontainer vergeben werden.
Diese Klassen müssen selbstverständlich für die praktische Anwendung auf die gewünschten Spaltenbreiten des Screenlayouts angepasst werden. Sie dienen daher an dieser Stelle in erster Linie der Orientierung bzw. liefern wiederum Standardwerte.
Hinweis: Der Einsatz dieser Klassen zur Modifizierung des Layouts ist besonders in Verbindung mit Content-Management-Systemen sinnvoll. Bei vielen CM-Systemen ist der Zugang zum Header-Bereich eines Templates schwer oder unmöglich, sodass der Austausch eines Stylesheets zur Modifikation des Layouts unmöglich oder zumindest kompliziert ist. Alternative Versionen des Grundlayouts bedingen daher meistens eigene Templates.
Dagegen ist eine Manipulation der HTML-Elemente innerhalb von body in der Regel unkompliziert. Über die hier definierten generischen Klassen kann ein Template daher sehr einfach manipuliert werden.
Folgendes Beispiellayout verdeutlicht die Anwendung der Generischen CSS-Klassen:
examples/04_layouts_styling/dynamic_layout_switching.html
