Modifikationen
- Erweiterung der Basis
- Minimale & Maximale Breiten
- Freie Spaltenanordnung
4.1 Das Baukastenprinzip
Nach dem Baukastenprinzip werden alle erforderlichen Layout-Bausteine über ein zentrales Stylesheet importiert. Auch mögliche Modifikationen des Basis-Layouts sind nichts anderes als weitere kleine Bausteine. So wird beispielsweise auf der Startseite ein allgemeines 3-Spalten-Layout verwendet, wogegen hier die mittlere und rechte Spalte gleich groß sind. Die meisten Unterseiten des Tutorials (z.B. diese Seite) wiederum verwenden ein 2-Spalten-Layout.
Alle diese Modifikationen variieren das Basis-Layout. Sie werden daher als basemod- Dateien in das zentrale Stylesheet eingebunden.
Besonderheit: Gleichwertige Inhaltsspalten
Diese Seite arbeitet beispielsweise mit dem zentralen Stylesheet: 3col_abb.css. Es stellt ein 3-Spalten-Layout mit zwei gleich großen Hauptspalten (Mitte und Rechts) bereit.
Problem: Texte werden üblicherweise von links nach rechts gelesen. Auf dem Bildschirm ist also alles o.k. Textbrowser orientieren sich jedoch an der Reihenfolge der DIV-Container im Quelltext und dort kommt die rechte Spalte #col2 vor der mittleren Spalte #col3.
Lösung: An der Reihenfolge der Spalten im Quelltext kann nichts geändert werden. Also ändern wir einfach die Reihenfolge am Bildschirm. Die ehemals rechte Spalte #col2 erhält ein float:left; und rutscht damit direkt neben #col1 — sie wird zur mittleren Spalte. Die ehemals mittlere Spalte #col3 schieben wir durch ihren Margin einfach an den rechten Rand — sie ist ab sofort unsere rechte Spalte.
#col3
{
margin-left: 61.25%;
margin-right: 0%;
}
#col2 {
width: 38.75%;
float:left;
}
Die spezielle Aufteilung der Spalten wird in der Datei basemod_3col_abb.css im Verzeichnis css/modifications vorgenommen. Damit ist auch bei zwei gleichwertigen Inhaltsspalten die Barriere beseitigt. Durch diese Nutzung der Spalten erscheinen die Inhalte auch im Drucklayout in der richtigen Reihenfolge. Näheres zu diesem Thema finden Sie im Abschnitt 4.7: Freie Spaltenanordnung.
4.2 Gestaltungsmöglichkeiten der Spalten
Für die Randspalten #col1 und #col2 des Basis-Layouts kann der Wert für die Spaltenbreite sowohl variabel (Prozent oder em) oder fix (px) definiert werden. Die Breite der mittleren Spalte #col3 ergibt sich jeweils automatisch aus der Breite des Browserfensters, abzüglich der seitlichen Randabstände (margin), über denen die float-Spalten "schweben".
Wichtig: Die Spalte #col3 behält immer den Wert width:auto;! Andernfalls tritt ein Bug des Internet Explorers in Kraft, der dafür sorgt, dass die an #col3 gebundenen Spaltentrenner nicht mehr bis zur Fußzeile reichen.
Hintergrund: Die statische Spalte #col3 ist der Lieferant für die Spaltentrenner.
Beispiel 1: Es wird eine 2-Pixel breite Punktlinie zur rechten Spalte und eine 1-Pixel breite Volllinie als Spaltentrener zur linken Spalte definiert. Die Definition der Spaltentrenner wird in der Datei basemod.css im Verzeichnis css/modifications vorgenommen.
#col3 {
margin-left: 250px;
margin-right: 20%;
...
border-left: 1px #888 solid;
border-right: 2px #ddd dotted;
}
Die seitlichen Margins sorgen dafür, dass die mittlere Spalte #col3 nicht von Randspalten überdeckt wird.
Alternativ kann mit der CSS-Eigenschaft border auch ein farbiger Spaltenhintergrund ohne seitliche Trennlinie erzeugt werden - vollkommen grafikfrei. Dafür muss der Randabstand margin der entsprechenden Spalte auf Null und die Breite des border auf die Breite der Spalte gesetzt werden.
Beispiel 2 : Statt der gepunkteten Trennlinie erhält eine fixe rechte Spalte einen farbigen Hintergrund. Die CSS-Deklaration lautet wie folgt:
#col3 {
margin-left: 250px;
margin-right: 0;
...
border-right: 250px #f4f4fa solid;
}
Und schon hätten wir eine himmelblaue rechte Spalte. Soll es etwas aufwändiger werden, können alternativ auch Hintergrundgrafiken eingesetzt werden.
Beispiel 3: Für die linke Spalte soll ein Verlaufshintergrund in Form einer Grafik verwendet werden. Am einfachsten lässt diese sich im DIV-Container #main verankern. Somit ist auch hier garantiert, dass die Hintergrundgrafik immer bis zum Footer reicht.
...
#main { background: #fff url("../img/bg_left2.gif") repeat-y
top left; }
...
