3.5 Layoutanpassungen über 'basemod.css'

Im Basis-Stylesheet base.css wurden die Position der einzelnen DIV-Container auf der Seite sowie Standardbreiten der Spalten festgelegt. Diese Vorgaben sorgen zunächst nur dafür, dass das Basislayout browserübergreifend korrekt dargestellt wird. Aber schön sieht es noch nicht aus.

Das Stylesheet basemod.css im Verzeichnis css/modifications dient dazu, dieses unformatiertes Basis-Layout optisch an die eigenen Wünsche anzupassen. Im Einzelnen bedeutet dies:

  • Formatierung aller DIV-Container des Basislayouts (Header, Footer, Content-Spalten usw.), einschließlich deren Sichtbarkeit
  • Formatierung aller in den Quelltext des Basis-Layouts eingefügten DIV-Container. Als Beispiel sei die Teaser-Box über den drei Spalten auf der Startseite genannt.

Innerhalb der Datei basemod.css werden noch keine Inhalte formatiert. Jetzt geht es erst einmal um die grundlegende Gestaltung aller Elemente des Basis-Layouts. Dies sind im Einzelnen:

  • die Festlegung von Breiten width,
  • die Festlegung von Randabständen padding und margin,
  • die Wahl von Hintergrundfarben bzw. -grafiken background,
  • die Festlegung von Element-Rändern border.

Aus welchem Grund erfolgt die Aufteilung in base.css und basemod.css?

Mit der Unterteilung der Stylesheets in einzelne Bausteine haben wir uns ein mächtiges Werkzeug für die Layoutgestaltung geschaffen. Die Grundbausteine sorgen für die browserübergreifende Kompatibilität und die Modifikationen werden ausgesprochen übersichtlich, weil keine Mehrfachdefinitionen von Basiselementen mehr erforderlich sind. Es ist daher sinnvoll, diese funktionierende Grundstruktur unangetastet zu lassen und sämtliche Modifikationen in eine andere Datei auszulagern. So können Sie Änderungen am Layout jederzeit in der basemod.css vornehmen, ohne versehentlich wichtige CSS-Eigenschaften des Basis-Layouts dauerhaft zu überschreiben oder zu löschen. Einen Überblick über die Variationsmöglichkeiten von YAML vermittelt das spätere Kapitel 4: Modifikation.

Noch ist es aber nicht soweit. Nach der Gestaltung des Basis-Layouts folgt nun die Gestaltung der Navigationselemente der Webseite.

»»» Abschnitt 3.6: Navigationselemente gestalten