CSS Struktur
3.3 Das Basis-Stylesheet 'base.css'
Das Stylesheet base.css im Verzeichnis css/main ist der zweite Grundbaustein von YAML. Es stellt den CSS-Rohbau des Layouts dar und sollte möglichst unverändert bleiben. Warum? Nun, das werde ich sogleich erklären.
Gute Vorbereitung ist alles
Das große Ziel von YAML besteht darin, ein möglichst einheitliches, browserunabhängiges Erscheinungsbild des Layouts zu erreichen. Dazu ist es ratsam, zunächst für eine browserübergreifend einheitliche Basis zu sorgen. Diese ist ohne eigenes Zutun nicht gegeben, da jeder Browser gewisse Standard-Formatierungen vorhält (und jeder Browser andere), um auch unformatierte Inhalte möglichst lesbar auf dem Bildschirm darzustellen.
Also richten wir den Blick auf die ersten Zeilen unseres Basis-Stylesheetsbase.css und beginnen mit dem Aufräumen:
html {height:100%}
body {
min-height: 101%;
font-size: 100.01%;
position: relative;
color: #000;
background: #fff;
text-align: left;
}
* { margin:0; padding:0; }
Der Eintrag body { min-height:101% } erzwingt im Firefox die Anwesenheit des vertikalen Scrollbalkens. Mit diesem kleinen Kniff wird verhindert, dass zentrierte Layouts plötzlich seitlich "springen", wenn die Höhe der Webseite größer als der sichtbare Bereich des Browserfensters wird.
Der nächte interessante Eintrag ist body { font-size: 100.01% }. Die krumme Angabe der Schriftgröße ist Browserbugs im Opera und Safari geschuldet, die sonst zu kleine Schriftgrößen errechnen würden.
Als drittes folgt body { position: relative; }. Mike Foskett erwähnt dies als Bugfix in seinem Artikel "Useful Code Snippets", damit positionierte Elemente (vermutlich im Internet Explorer) beim Verändern der Fenstergröße auch wirklich neu und korrekt positioniert werden. Ich habe diesen Bug selbst noch nicht in Aktion erlebt, allerdings nehme ich seinen Hinweis ernst und an dieser Stelle gern in das Stylesheet auf.
Es folgt ein letzter vorbereitender Eintrag. Mit * {margin:0; padding:0; } werden die oben bereits erwähnten Browservoreinstellungen für alle Randabstände auf Null gesetzt. Dies ist ein ausgesprochen effektiver Putzteufel denn durch den Stern Selektor (*) erfassen wir alle HTML-Elemente auf einmal.
Hinweis: Der Eintrag kann der Einfachheit halber nach Belieben durch die CSS-Eigenschaft * {border: 0;} ergänzt werden. Dies sorgt jedoch dafür, dass die Browser die Vorformatierung von Formular-Elementen (Textarea oder Submit-Button) vergessen.
In diesem Fall müssen daher für diese Elemente in der CSS-Datei css/main/content.css Standardvorgaben vorhanden sein, da sie sonst am Bildschirm schwer zu erkennen sind.
Ab sofort sind alle Randabstände unter unserer Kontrolle.
Rohbau des Layouts
Die Datei base.css enthält für die meisten der einzelnen Bestandteile das YAML-Layouts grundlegende Angaben zur Positionierung. Diese Bestandteile sind im Einzelnen:
- #page_margins - Der Container steht für eine beliebige Randgestaltung des Layouts zur Verfügung. Er hat keine fest definierte Funktion und kann bei Nicht-Gebrauch weg gelassen werden.
- #page - Umschließt alle nachfolgenden DIV-Container der Seite und sorgt über die CSS-Klasse .hold_floats dafür, den Escaping Floats Bug des Internet Explorers bei der Verwendung von float-Umgebungen zu vermeiden.
- #header - Kopfbereich des Layouts
- #topnav - Der Container wird in der rechten oberen Ecke des Headers positioniert und dient zur Aufnahme von Pflichtlinks (z.B. dem Impressum), Skipnavigation usw.
- #nav - Platzhalter für Hauptnavigation
- #main - Container für den Hauptteil
- #col1 & #col1_content - Erste float-Spalte des Hauptteils
- #col2 & #col2_content - Zweite float-Spalte des Hauptteils
- #col3 & #col3_content - Statische Spalte des Hauptteils
- #footer - Fußbereich des Layouts
Weiterhin enthält das Stylesheet die für die korrekte Darstellung der float-Umgebungen erforderlichen Clearing-Lösungen Clearfix und Overflow.
Hinweis: Mit der Version 2.0 von YAML wurden alle für den Internet Explorer zusätzlich erforderlichen CSS-Hacks in die Datei css/base/iehacks.css verschoben. Diese Datei ist der dritte Grundbaustein des YAML Layouts.
Innerhalb von base.css werden, bis auf Standardbreiten für die Spalten, keine Formatierungen (Breiten, Farben, Hintergründe, Randabstände usw.) festgelegt. Durch diese grundlegende Positionierung der einzelnen Layout-Bestandteile wird ein 3-spaltiges Basis-Layout bereitgestellt.
#col1, #col2, #col3 { position: relative; }
#col1_content, #col2_content, #col3_content { position: relative; }
...
#col1 {z-index: 3;}
#col2 {z-index: 5;}
#col3 {z-index: 1;}
#col1_content {z-index: 4;}
#col2_content {z-index: 6;}
#col3_content {z-index; 2;}
Die Vergabe von position:relative; sorgt dafür, dass die Spalteninhalte im Internet Explorer nicht plötzlich verschwinden bzw. erst nach Markierung oder Änderung der Fenstergröße sichtbar werden. Gleichzeitig ist es eine vorbereitende Maßnahme, um bei der späteren Verwendung ggf. Elemente auch absolut innerhalb der Spalten positionieren zu können.
Die Vergabe des z-index in dieser Reihenfolge bewirkt, dass so das Verschwinden der Inhalte der statischen Spalte #col3 verhindert wird, falls der im Abschnitt 5.3: Bekannte Probleme beschriebene IE-Bug auftritt.
Ein weiterer Grund für die Vorgabe der z-index Werte ist praktischer Natur. Normalerweise werden die DIV-Container vom Browser in der Reihenfolge gerendert, in der sie im Quelltext stehen. Für die volle Funktionalität ist jedoch wichtig, dass die mittlere Spalte - die im Quelltext immer nach den Randspalten kommt, zuerst gerendert wird und ggf. von den Randspalten überlappt wird. In der Layout-Modifikation Variante 2, wird diese z-Index-Sortierung später genutzt.
