YAML ist ein tolles HTML/CSS-Framework, um browserübergreifende Seitenlayouts zu erstellen. Spalten bzw. Subtemplates lassen sich leicht mit Hilfe des CSS-Klasse subcolumns definieren. YAML bringt Spalten verschiedener Breite mit. Im Folgenden beschreibe ich, wie man eigene Spaltenbreiten einführen kann.

YAML stellt standardmäßig so genannte Subtemplates bereit, um Spalten zu definieren. Die Standardspalten sind Aufteilungen in Prozent: 20, 40, 60, 80, 25, 33, 50 und 75 Prozent. Dazu gibt es eine gleichmäßige Aufteilung und eine nach dem goldenen Schnitt. In vielen Fällen reichen diese Aufteilungen aus. Wer jedoch pixelgenaue Spalten benötigt, muss eigene Spaltenformate definieren.

Am Beispiel erklärt

Ein Beispiel: Wir benötigen drei Spalten mit einer Breite von 100, 120 und 350 Pixeln. Dazu definieren wir folgendes HTML-Element:

Wie man unschwer erkennen kann, definieren wir zwei Typen von CSS-Klassen:

  • cleft und cright definieren Spalten
  • c120px, c100px, c350px definieren Spalten mit einer bestimmten Pixelbreite. Natürlich sind auch Breitenangaben in Prozent oder anderen Maßeinheiten möglich.

Ich habe zwei Typen von CSS-Klassen definiert, um flexibler sein zu können. Grundsätzlich kann man nämlich auf die zweite Gruppe von Klassen verzichten und diese als Inline-CSS angeben. Dies ist z.B. bei Angaben sinnvoll, die nur auf ein Element auf einer Seite zutreffen. Letztlich ist es jedoch Geschmacksache, wo man die Styles definiert.

Nun müssen wir die Klassen noch definieren. In YAML ist es sinnvoll dafür die Dateien basemod.css und patch_my_layout.css zu verwenden. In der Datei basemod.css wird folgendes definiert:

Patches für den Internet Explorer 6

Damit funktioniert die beliebige Spaltenaufteilung unter den meisten Browsern. Die Datei patch_my_layout.css wird für IE6 benötigt, um die zahlreichen Fehler des Browsers in der CSS-Umsetzung zu umschiffen. patch_my_layout.css wird folgendermaßen erweitert:

Komischerweise funktioniert die Ausrichtung beim IE6 nur, wenn man die Styles genauso wie oben definiert. Wenn man die Anweisungen zusammenfasst, klappt die Ausrichtung eigenartigerweise nicht mehr.

Viel Spaß beim Definieren von eigenen Spaltenbreiten unter YAML!