Flicken für den IE

Patch_my_layout.css selbst hat zwei Funktionen: Zum einen bindet es die Datei yaml/ core/iehacks.css ein, die die layoutunabhängigen Patches für den Internet Explorer beinhaltet. Außerdem stehen in patch_my_ layout.css die speziell für das ausgewählte Layout benötigten Patches.Im Beispiellayout würde im Internet Explorer 6 und kleiner der 3Pixel-Jog-Bug zuschlagen. Dieser tritt bei Elementen auf, die an gefloatete Bereiche angrenzen, und bewirkt eine Verschiebung um 3 Pixel. Hier wird er behoben. Außerdem findet sich in patch_my_layout.css eine Simulation von Mindest- und Maximalbreite über Expressions für den Internet Explorer vor Version 7. Das benötigen Sie natürlich nur, wenn Sie min-width und max-width verwenden.

Aufteilung der Spalten bestimmen

Erst einmal gilt es, die grundlegende Aufteilung der Spalten und ihre Breiten festzulegen. Hierfür editieren Sie die Datei basemod.css.Die Gesamtbreite des Layouts bestimmen Sie für das umfassende Element mit der Klasse page_margins. Beim Simple Project steht hier keine Breitenangabe, was 100 Prozent entspricht, aber es gibt eine Mindest- und eine Maximalbreite.

Die eigentliche Anordnung der Spalten geschieht durch folgenden Code:

Sie erinnern sich, dass <div id="col1_content"> innerhalb von <div id="col1"> steht? Wie Sie sehen, wird die Breite der äußeren Spalte #col1 zugewiesen, padding hingegen der inneren Spalte.Dass die Spalten dann nebeneinander angeordnet sind, liegt daran, dass #col1 und #col2 über die Datei base.css, die ja immer als Allererstes eingebunden wird, gefloatet werden:

#col3 selbst ist nicht gefloatet, aber mit Außenabständen versehen, in die #col1 und #col2 hineinpassen. Breitenanpassungen gehen einfach: Sie geben die entsprechenden Werte für die Breite an und passen dann die Außenabstände bei #col3 an.

Andere Spaltenreihenfolge

Beim Beispiellayout des Simple Project steht #col1 ganz links, #col3 in der Mitte und #col2 ganz rechts. Diese Reihenfolge lässt sich auch als 1-3-2 darstellen. Das Spannende ist jetzt, dass mit YAML prinzipiell jede der theoretisch möglichen sechs Kombinationen durch Änderungen an der CSS-Datei realisiert werden kann.Hier ein paar Beispiele für weitere Kombinationen: Bei der Reihenfolge 1-2-3 sind die Spalten wie im Quellcode angeordnet:

Dafür wird #col2 links gefloatet - und damit wird das rechte Floaten von base.css überschrieben. Außerdem muss der linke Außenabstand von #col3 jetzt so groß sein, dass sowohl #col1 als auch #col2 darin Platz finden (25% + 50% = 75%).Ähnlich einfach geht auch die umgekehrte Reihenfolge 3-2-1:

Hierfür wird #col1 rechts gefloatet, bei #col2 ist nichts angegeben, da diese Spalte ja schon über base.css rechts gefloatet ist. Und #col3 benötigt dann entsprechend auch einen genügend großen rechten Außenabstand.Bei der Reihenfolge 2-1-3 muss man tiefer in die CSS-Trickkiste greifen - genau genommen zu negativen Margins.Für alle möglichen Kombinationen finden Sie auf der YAML-Webseite Beispiele. Am besten sehen Sie sich diese im Browser an, aktivieren dann das Bookmarklet YAML Debug und betrachten die für dieses Projekt benötigte basemod.css -Datei mit ihren Änderungen. Der Name dieser Datei gibt die Spaltereihenfolge wieder, also beispielsweise basemod-3-2-1.css.Es gibt aber Unterschiede zwischen den Layouts: So können Sie beispielsweise bei bestimmten Layoutanordnungen den border bei #col3 für einen grafischen Spaltentrenner verwenden:

Dies funktioniert nur bei 1-3-2 und 2-3-1, nicht jedoch bei den anderen Spaltenanordnungen; außerdem ist in diesem Fall die Behebung des 3Pixel-Bugs nicht mehr möglich.

Weitergehende Layoutvarianten

Viele weitere Layoutmöglichkeiten finden Sie in der Online-Dokumentation von YAML genauer beschrieben. Sehr attraktiv ist beispielsweise 3col_fullheight, bei dem die Höhe des Layouts immer mindestens 100 Prozent des Bildschirms beinhaltet. Hierfür ist allerdings eine etwas andere Anordnung im HTML-Code notwendig: Der #footer ist außerhalb von page_margins platziert.Einen Layouttyp, den man ebenfalls heute häufiger sieht, besonders bei Blogs, ist der fullpage_3col. Bei diesem Layout gehen Kopf- und Fußzeile über die Breite des gesamten Browserfensters, nur der Inhaltsbereich ist in seiner Ausdehnung beschränkt. Auch hierfür muss der Quellcode angepasst werden: Der div-Container mit der Klasse parge_margins wird mehrfach benutzt und ist nicht mehr das umfassende Element. Aber auch Zweispalter sind möglich, oder Sie verlassen das Spaltenkonzept ganz und erstellen über Subtemplates ein Gridlayout.

Feinere Aufteilung

Eine Webseite besteht nicht nur aus Spalten, es sind auch innerhalb der Spalten weitere Aufteilungen notwendig. Genau dafür gibt es die Subtemplates.Sollen Bereiche weiter unterteilt werden, so weisen Sie zuerst dem umfassenden Container die Klasse subcolumns zu und definieren die feinere Aufteilungen über weitere Klassen.Eine Zweiteilung in eine Spalte mit 33 Prozent und eine Spalte mit 66 Prozent funktionieren folgendermaßen: Die Klasse c33l steht für die linke Spalte mit ihrer Breite von 33 Prozent, c66r für die rechte Spalte mit 66 Prozent und der Inhalt steht innerhalb von div-Elementen mit subcl beziehungsweise subcr.