3.4 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.

Einheitliche Ausgangsbedingungen schaffen

Das große Ziel von YAML besteht darin, ein möglichst einheitliches, browserunabhängiges Erscheinungsbild des Layouts zu ermöglichen. Dazu ist es ratsam, zunächst für browserübergreifend einheitliche Ausgangsbedingungen zu sorgen. Diese ist ohne eigenes Zutun nicht gegeben, da jeder Browser gewisse Standard-Formatierungen vorhält (und natürlich 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-Stylesheets base.css und beginnen mit dem Aufräumen:

* { margin:0; padding:0; }
option {padding-left: 0.4em}

html {height:100%}
body {
    min-height: 101%;
    font-size: 100.01%;
    position: relative;
    color: #000;
    background: #fff;
    text-align: left;
}

fieldset, img { border:0; }

select, input, textarea { font-size: 99% }

Mit * { margin:0; padding:0; } werden die Innen- und Außenabstände aller HTML-Elemente (dafür sorgt der Stern-Selektor) auf Null gesetzt. Diese Lösung hat den Vorteil, auf einfache Weise wirklich alle HTML-Elemente zu erreichen.

Für <select> Elemente ergibt sich daraus ein kleines Problem. Die oben genannte Anweisung setzt auch das Padding des option Elementes (den Auswahlbutton der Selectbox) auf Null, wodurch er unter Windows den letzten Buchstaben des Inhaltstextes überdeckt. Dieses Problem wird durch option {padding-left: 0.4em} behoben, indem der Standardwert wieder eingetragen wird.

Hinweis: Der Eintrag kann 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) verlieren.

In diesem Fall müssen daher für diese Elemente in der CSS-Datei content.css (siehe Abschnitt 3.8: Gestaltung der Inhalte) entsprechende Standardvorgaben vorhanden sein, da sie sonst am Bildschirm schwer zu erkennen sind.

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ächste interessante Eintrag ist body { font-size: 100.01% } und gleicht Rundungsfehler aus. Die krumme Angabe der Schriftgröße ist Browserbugs im Opera 6 und älteren Safari-Versionen 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 deshalb an dieser Stelle gern in das Stylesheet auf.

Anschließend wird für die HTML-Elemente fieldset und img die Standardgröße des Rahmens (border) auf Null gesetzt. Abschließend werden die Schriftgrößen für die Formularelemente select, input und textarea korrigiert, da diese in älteren Safari-Versionen zu groß erscheinen würden.

Rohbau des Layouts

Die Datei base.css enthält für die einzelnen Layout-Bestandteile des Basis-Layouts grundlegende Angaben zur Positionierung für ein flexibles 3-spaltiges Layout.

Das Basis-Layout hat folgende Bestandteile:

  • #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

Bis auf die Festlegung von Standardbreiten für die Spalten werden für diese Grundelemente des Layouts keine optischen Formatierungen (Breiten, Farben, Hintergründe, Randabstände usw.) festgelegt.

Spezielle Vorgaben für Spalten-Container

Die Spalten-Container erhalten spezielle CSS-Eigenschaften zugewiesen, um die Robustheit des Basis-Layouts zu erhöhen.

#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 Eigenschaft 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. Bei der Gestaltung der Spalten (siehe Abschnitt 4.2), wird diese z-Index-Sortierung später ausgenutzt werden.

Hinweis: Im YAML-Framework sind Standard-CSS für moderne Browser und alle für den Internet Explorer zusätzlich erforderlichen CSS-Hacks voneinander getrennt.

Die Datei iehacks.css beinhaltet alle layoutunabhängigen Anpassungen für diesen Browser. Diese Datei ist einer der Grundbausteine des YAML-Frameworks (siehe Abschnitt 3.5: CSS-Anpassungen für den Internet Explorer).

Standardvorgaben für Listen und Zitate

Listen und HTML-Elemente zur Kennzeichnung von Zitaten (blockquote und cite) erhalten einheitliche Randabstände und Zeilenhöhen, um ein browserübergreifend einheitliches Erscheinungsbild zu gewährleisten.

ul, ol, dl { margin: 0 0 1em 1em }
li { margin-left: 1.5em; line-height: 1.5em; }

dt { font-weight: bold; }
dd { margin: 0 0 1em 2em; }

blockquote, cite { margin: 0 0 1em 1.5em; font-size: 0.93em; width: auto;}

Weitere Bestandteile

Die Datei base.css enthält noch weitere wichtige Bestandteile, die für die browserübergreifend einheitliche Darstellung YAML-basierter Layouts erforderlich sind.

»»» Abschnitt 3.5: Anpassungen für den Internet Explorer