4.1 Das Baukastenprinzip
In den beiden vorangegangenen Kapiteln wurden die einzelnen Bausteine des YAML-Framework erläutert. Bisher wurde viel von Variabilität geredet, jetzt wird es ernst. In den nachfolgenden Abschnitten wird gezeigt, wie sich das Basis-Layout des YAML-Frameworks den die unterschiedlichsten Layoutanforderungen anpassen lässt.
Zu diesem Zweck bietet das Framework weitere optionale Bausteine, um das Layout nach den eigenen Wünschen zu formen.
- css/modifications
- Verschiedenste optische Anpassungen des Basis-Layouts (Anzahl und Anordnung der Spalten)
- css/navigation
- Verschiedene Listennavigationen (horizontal und vertikal)
- css/print
- Vorgefertigte Druck-Stylesheets mit freier Wahl der auszudruckenden Spalten
Für die eigene Arbeit steht es Ihnen frei, diese Bausteine zu verwenden, zu erweitern oder neue Bausteine zu entwickeln. Von Fehlerkorrekturen in einzelnen Bausteinen können all ihre YAML-basierten Projekte fast automatisch profitieren.
Erste eigene Schritte
Als Einstieg empfehle ich, sich mit den vielfältigen Möglichkeiten der Grundvariationen zu beschäftigen. Dabei wird sowohl auf mögliche Anordnungen der Spalten am Bildschirm als auch auf die Platzierung der Inhalte im XHTML-Markups eingegangen.
Für erste Gehversuche bei der Erstellung eigener Layouts auf Basis des YAML-Frameworks nutzen Sie am besten die Datei example.html. Hierbei handelt es sich um ein vollständiges 3-spaltiges Grundlayout ohne Inhalte.
Welche CSS-Dateien benötige ich für den Start?
Wie schon in der Einführung erwähnt, besteht das Basis-Layout aus drei Grundbausteinen:
Damit wird die korrekte Darstellung des Layouts in allen unterstützten Browsern abgesichert. Die weiteren CSS-Bausteine des Frameworks sind nicht zwingend erforderlich. Sie haben die Wahl:
Sie können ihr eigenes Layout von Grund auf selbst gestalten indem Sie ihre eigene basemod.css schreiben, Schriften- und ein Drucklayout selbst festlegen. Sie können aber auch die vorhandenen CSS-Bausteine für die Layoutgestaltung, Schriftformatierung und Drucklayout übernehmen und nach ihren Wünschen und Erfordernissen anpassen.
Meine Empfehlung: Betrachten Sie das Vorhandene als Anregungen für eigene Ideen. Nutzen Sie fertige Codefragmente und erweitern Sie diese nach Ihren Anforderungen und Wünschen.
4.2 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 gleichlangen Spalten, jedoch kommt die Lösung des YAML-Frameworks diesem Ideal sehr nahe. Wie nahe, das sollen die folgenden zwei Beispiellayouts demonstrieren.
Wichtig: Die Spalte #col3 behält immer den Wert width:auto;! Andernfalls vergibt der Internet Explorer intern das Merkmal hasLayout = true (siehe Artikel: on having Layout), was dazu führt das der clearende DIV-Tag am Ende von #col3 wirkungslos wird.
Hintergrund: Die statische Spalte #col3 ist der Lieferant für die Spaltentrenner. Die Spalte würde in diesem Fall nicht mehr nach unten erweitert werden und die an #col3 gebundenen Spaltentrenner reichen nicht mehr in jedem Fall bis zur Fußzeile.
Beispiel 1 - Spaltentrenner
Es werden jeweils 2-Pixel breite Punktlinien als Trennlinien zwischen den Spalten eines 3-Spalten-Layouts definiert.
Die Definition der Spaltentrenner wird erfolgt über die Eigenschaft border der statischen Spalte #col3.
#col3 {
border-left: 2px #ddd dotted;
border-right: 2px #ddd dotted;
}
Beispiel: Spaltentrenner
Egal welche Spalte am längsten ist, die so erzeugten Spaltentrenner reichen immer bis zur Fußzeile
Beispiel 2 - Spaltenhintergründe
Alternativ kann mit der CSS-Eigenschaft border auch ein farbiger Spaltenhintergrund anstatt der Trennlinie erzeugt werden - vollkommen grafikfrei.
Dafür muss der Randabstand margin der Spalte #col3 auf Null gesetzt und die Breite des border auf die Breite der Randspalte gesetzt werden, deren Hintergrund sie bilden soll.
#col1, #col2 { width: 200px; }
#col3 {
margin: 0; padding:0;
border-left: 200px #cce solid;
border-right: 200px #ecc solid;
}
Die CSS-Definitionen wurden im folgenden Beispiel als Inline-CSS im Header eingefügt.
Beispiel: Spaltenhintergrund
Das Ergebnis kommt dem Eindruck gleichlanger Spalten sehr nahe. Allerdings ist diese Technik auf einfarbige Hintergründe begrenzt.
