4.4 Freie Anordnung und Verwendung der Content-Spalten
Die Beispiele im Abschnitt 4.3 haben bereits einige Anwendungsmöglichkeiten des Basis-Layouts aufgezeigt. Grundbedingung der damals angesprochenen Variationen war, dass die volle Funktionalität von YAML (grafikfreie Spaltentrenner) erhalten bleibt.
Diese Randbedingung ist jedoch ein rein gestalterisches Kriterium und damit nicht zwingend maßgebend bei der Entwicklung eines Webseiten-Layouts. Hinsichtlich der Barrierefreiheit einer Webseite (z.B. der Darstellung der Inhalte in Textbrowsern) gibt es weitere Kriterien für ein Layout.
Allgegenwärtig ist der Wunsch vieler Webdesigner, den Inhalt einer Webseite möglichst weit vorn im Quelltext zu positionieren, während untergeordnete Elemente (Navigation, Sidebar usw.) weiter hinten im Quelltext erscheinen sollen. Zwar ist die Notwendigkeit dieser Maßnahme durchaus diskussionswürdig, aber dies soll nicht hier geschehen. Nachfolgend werden lediglich die technischen Möglichkeiten von YAML aufgezeigt.
Hinweis 1: Die CSS-Auszüge der nachfolgenden Beispiellayouts sind der dem jeweiligen Layout zugehörigen Datei basemod_xy.css im Verzeichnis css/modifications entnommen.
Hinweis 2: Der 3-Pixel-Jog Hack ist in den folgenden Layoutbeispielen eingebaut, da hier anhand aller 6 möglichen Spaltenanordnungen seine grundsätzliche Anwendung aufgezeigt werden kann.
Für den praktischen Einsatz dieser Layoutbeispiele beachten Sie Bitte die Anwendungsgrenzen für den Einsatz des 3-Pixel-Jog Hacks (siehe Abschnitt 3.5: CSS-Anpassungen für den Internet Explorer).
Spalten in beliebiger Reihenfolge
Der größtmögliche Gestaltungsfreiraum entsteht, wenn die Reihenfolge der Spalten im Quelltext keinen Einfluss auf die Lage der Spalten am Bildschirm hat. In diesem Fall kann der Webdesigner die Inhalte im Quelltext entsprechend den jeweiligen Anforderungen (Barrierefreiheit, Optimierung für Suchmaschinen usw.) platzieren und hat über die Stylesheets dennoch volle Kontrolle über die Positionen der einzelnen Spalten am Bildschirm.
Wie bereits im ersten Artikel beschrieben, kann die Reihenfolge der Spalten im Quelltext nicht beliebig vertauscht werden. Aber das ist auch gar nicht notwendig. Die Lage und Reihenfolge der Spalten am Bildschirm wird vollständig per CSS geregelt. Daher brauchen wir an der Reihenfolge im Quelltext gar nichts zu ändern. Wir müssen lediglich unsere Inhalte an der Stelle des Quelltextes einfügen an der wir sie haben wollen. Anschließend werden die Spalten per CSS platziert. Für drei Spalten mit unterschiedlichen Inhalten ergeben sich genau 6 Kombinationen, in der sie am Bildschirm nebeneinander angeordnet werden können.
Die Klassiker: 1-3-2 und 2-3-1
Die 1-3-2 Aufteilung der Spalten entspricht exakt der Standarddefinition von YAML, wie sie in der Datei base.css (siehe Abschnitt 3.4: Das Basis-Stylesheet) verankert ist.
/* #col1 wird zur linken Spalte */
#col1 { width: 25%; }
/* #col2 wird zur rechten Spalte */
#col2 { width: 25%; }
/* #col3 wird zur mittleren Spalte */
#col3 { margin-left: 25%; margin-right: 25%; }
layout_storage/layout_1-3-2.html
Um das Gegenstück 2-3-1 zu erzeugen, müssen wir nicht etwa die Randspalten im Quelltext vertauschen. Viel einfacher ist es, in einer basemod_xy.css die float-Richtung der beiden Spalten zu ändern.
/* #col1 wird zur rechten Spalte */
#col1 { float:right; width: 25%; }
/* #col2 wird zur linken Spalte */
#col2 { float:left; width: 25%; }
/* #col3 wird zur mittleren Spalte */
#col3 { margin-left: 25%; margin-right: 25%; }
Das war's schon. Am Bildschirm hätten wir jetzt die Reihenfolge 2-3-1.
layout_storage/layout_2-3-1.html
Die natürliche Ordnung: 1-2-3 und 3-2-1
Die Spalten sollen genau in der Reihenfolge von links nach rechts (1-2-3) oder von rechts nach links (3-2-1) geordnet werden, in der sie auch im Quelltext aufeinander folgen. Um dies mit YAML zu erreichen, sind gerade zwei CSS-Anweisungen innerhalb der Datei basemod_1-2-3.css erforderlich.
Als erstes sorgen wir dafür, dass die beiden float-Spalten direkt nebeneinander platziert werden indem wir einfach beide in die gleiche Richtung floaten lassen. Für die Reihenfolge 1-2-3 würde #col2 daher ein float:left; bzw. für die Reihenfolge 3-2-1 #col1 ein float:right; erhalten.
Mit der zweiten CSS-Anweisung sorgen wir dafür, dass die Spalte #col3 an den rechten bzw. linken Rand geschoben wird. Dies erledigt man praktischerweise mit einem einseitigen Margin, welcher genau so breit gewählt wird, wie die beiden Spalten #col1 und #col2 zusammen benötigen.
/* #co11 wird zur linken Spalte */
#col1 { width: 25%; margin: 0;}
/* #col2 wird zur mittleren Spalte */
#col2 { width: 50%; float:left; margin: 0;}
/* #col3 wird zur rechten Spalte */
#col3 { margin-left: 75%; margin-right: 0%; }
In der YAML-Dokumentation wird diese Art der Darstellung beispielsweise für ein Layout mit zwei gleichrangigen Inhaltsspalten (siehe Abschnitt 4.10: Der Layoutentwurf "3col_abb" ) eingesetzt.
layout_storage/layout_1-2-3.html
Für die Reihenfolge 3-2-1 ordet man das System genau anders herum.
/* #col1 wird zur rechten Spalte */
#col1 { width: 25%; float:right; margin: 0;}
/* #col2 wird zur mittleren Spalte */
#col2 { width: 50%; margin: 0;}
/* #col3 wird zur linken Spalten */
#col3 { margin-left: 0; margin-right: 75%; }
layout_storage/layout_3-2-1.html
Der negative Einfluß: 2-1-3 und 3-1-2
Die letzten beiden verbliebenen Kombinationsmöglichkeiten sehen vor, dass die mittlere Spalte am Bildschirm gleichzeitig die erste Spalte im Quelltext ist. Die zuvor beschriebene natürliche Ordnung zeigt, dass bei gleicher float-Richtung die beiden Spalten #col1 und #col2 automatisch in der Reihenfolge erscheinen, in der sie im Quelltext stehen. Das müssen wir jetzt noch irgendwie ändern.
An dieser Stelle sei ein Blick über den Tellerrand gestattet, denn darüber haben sich bereits an anderer Stelle kreative Leute den Kopf zerbrochen und eine wunderbar einfache Lösung entdeckt: Negative Margins. Alex Robinson verwendet diese Technik auch im Abschnitt "any order columns" seines Artikels "In search of the One True Layout". Mittels der negativen Margins können die beiden Spalten so verschoben werden, dass genau der gewünschte optische Effekt entsteht. Das gleiche Prinzip lässt sich auf die beiden float-Spalten des YAML-Layouts anwenden.
Wir sorgen also zunächst dafür, dass die beiden Spalten #col1 und #col2 in die gleiche Richtung floaten. Daher bekommt #col2 ein float:left;. Dann geben wir der Spalte #col1 einen linken Margin (Randabstand), welcher der Breite von #col2 entspricht. Weiterhin bekommt #col2 einen negativen linken Margin in der Größe: Breite #col1 + Breite #col2. Die Spalte #col3 wird wie schon bei der natürlichen Ordnung an den rechten Rand geschoben.
/* #col1 wird zur mittleren Spalte */
#col1 { width: 50%; float:left; margin-left: 25%; }
/* #col2 wird zur linken Spalte */
#col2 { width: 25%; float:left; margin-left: -75%; }
/* #col3 wird zur rechten Spalte */
#col3 { margin-left: 75%; margin-right: 0%; }
Bei dieser Spaltenanordnung schlägt der "Doubled Float-Margin-Bug" des Internet Explorer normalerweise gnadenlos zu. Der entsprechende Hack ist in der Datei iehacks.css bereits integriert, wir brauchen uns also keine Sorgen machen. Das war's.
layout_storage/layout_2-1-3.html
Das Vorgehen für die Reihenfolge 3-1-2 ist analog, nur muss die float-Richtung der Spalten #col1 und #col2 gewechselt und die Margins angepasst werden.
/* #col1 wird zur mittleren Spalte */
#col1 {
width: 50%;
float:right; margin-left: -75%;
margin-right: 25%;
}
/* #col2 wird zur rechten Spalte */
#col2 { width: 25%; float:right; margin-right: 0%; }
/* #col3 wird zur linken Spalte */
#col3 { margin-left: 0; margin-right: 75%; }
layout_storage/layout_3-1-2.html
Die Verschiebung der Spalten mittels negativer Margins funktioniert in allen modernen Browsern. Allerdings gibt es nach Aussage von Alex Robinson im Netscape 6 & 7, sowie mit dem älteren Opera 6 Probleme. Die aktuelle Browserversion Netscape 8 stellt das Layout jedoch nach eigenen Tests fehlerfrei dar und der Opera 6 darf wohl auch mittlerweile zum Alten Eisen gezählt werden.
Fazit
Mit YAML ist die Reihenfolge der Spalteninhalte im Quelltext völlig unabhängig von der Position der Spalten am Bildschirm. Über die Verwendung der drei Spalten #col1 bis #col2 für Inhalt, Navigation, Sidebar usw. entscheidet daher einzig und allein der Webdesigner. Die Vor- und Nachteile der einzelnen Lösungen sind bekannt und können damit im Verhältnis zu ihrem Nutzen objektiv bewertet werden.
Hinweis 1: In der derzeitigen YAML Version werden die Auszeichnungen der Spaltenpositionen für das Drucklayout innerhalb der print_xy.css Stylesheets vorgenommen. Sinnvollerweise sollte diese Auszeichnung an die endgültige Lage der jeweiligen Spalten am Bildschirm angepasst werden und diese Festlegung aus dem Druck-Stylesheet in die Datei basemod.css vorgezogen werden, da dort über die Lage der Spalten entschieden wird.
Hinweis 2: Durch die modifizierte Anordnung der Spalten am Bildschirm ist die Verwendung grafikfreier Spaltentrenner nur bedingt möglich, da diese zwingend an #col3 gebunden sind. Befindet sich die Spalte in Randlage, so ist für Spaltentrenner zwischen #col1 und #col2 ggf. der Einsatz einer Hintergrundgrafik erforderlich. Aber das sollte kein größeres Problem darstellen.
Denken Sie auch daran, dass bei Verwendung der grafikfreien Spaltentrenner der 3-Pixel-Jog Bug des Internet Explorers nicht gepatcht werden kann.
