4.7 Layoutentwurf "2col_left_vlines"
Im folgenden Beispiel soll es darum gehen, die Flexibilität des YAML-Frameworks bei der Erstellung verschiedenster Layoutvariationen aufzuzeigen. Ausgangsbasis für die folgenden Beispiele ist das 3-spaltige Basis-Layout, des YAML-Framworks.
In diesem ersten Layoutentwurf mit der Bezeichnung 2col_left_vlines werden folgende Anforderungen gestellt:
- 2 Content-Spalten (Navigation links #col1 und Hauptinhalt rechts #col3)
- Beide Spalten mit flexiblen Breiten
- grafikfreier Spaltentrenner (graue Punktlinie) als Trennlinie zwischen den Spalten, dabei soll zwischen Trennlinie und Header sowie zwischen Trennlinie und Footer ein Abstand von 1em verbleiben.
- Horizontale Hauptnavigation "Sliding Door"
- Drucklayout: Es sollen nur die Hauptinhalte in der Spalte #col3 ausgegeben werden.
layout_storage/layout_2col_left_vlines.html
Layoutentwurf im Detail
Das zentrale Stylesheet layout_2col_left_vlines.css beinhaltet folgende CSS-Bausteine:
@import url(main/base.css);
@import url(modifications/basemod.css);
@import url(modifications/basemod_2col_left_vlines.css);
@import url(navigation/nav_slidingdoor.css);
@import url(main/content.css);
@import url(print/print_003.css);
Die Layoutgrundlage, das 3-spaltige Layout wird über die Bausteine base.css und basemod.css eingebunden. Die Modifikationen für das 2-spaltige Layout finden sich in der Datei basemod_2col_left_vlines.css.
/* Rechte Spalte abschalten */
#col2 { display:none; }
#col2_content { display:none; }
/* rechten Randabstand anpassen */
#col3 { margin-right:0; border-right:0; }
/* Spaltentrenner */
#col3 {border-left: 2px #ddd dotted;} 2 Spalten: Die rechte Spalte #col2 und deren Inhalt #col2_content werden abgeschaltet. Mit dem dritten Befehl wird der rechte Rand der mittleren Spalte #col3 angepasst. Damit ist das 2-Spalten-Layout fertig.
Spaltentrenner: Zusätzlich wird in diesem Beispiel eine 2 Pixel breite Punktlinie als vertikaler Spaltentrenner gefordert. Dies geschieht mittels der CSS-Eigenschaft border für die statische Spalte #col3. Der geforderte Abstand der Trennlinie von Header und Footer ist bereits im Basislayout ( siehe basemod.css ) über die CSS-Definitionen der Container #main (oberes Padding) und #footer (oberer Margin) vorhanden.
Anpassungen für den Internet Explorer
Die Anpassungen für den Internet Explorer sind in der Datei iehacks_2col_left_vlines.css im Verzeichnis css/explorer abgelegt.
/* LAYOUT-UNABHÄNGIGE ANPASSUNGEN -----------------------------
*/
@import url(../main/iehacks.css);
/* LAYOUT-ABHÄNGIGE ANPASSUNGEN -------------------------------
*/
@media screen
{
/* IE5.x kollabierendes padding bei #main abfangen */
* html #main {margin-top: 1em; padding-top: 0; }
}
Als erstes wird die globale Anpassungsdatei iehacks.css eingebunden.
IE 5.x und IE6 "ignorieren" bei diesem Layout das obere Padding an #main, welches für den Abstand des Headers von der vertikalen Trennlinie sorgt. Um dies zu korrigieren, wird im IE stattdessen die Eigenschaft margin-top: 1em; verwendet, welche der IE korrekt interpretiert.
