4.8 Layoutentwurf "2col_right_vlines"
Ausgangsbasis für die folgenden Beispiele ist das 3-spaltige Basis-Layout, des YAML-Frameworks.
In diesem Layoutentwurf mit der Bezeichnung 2col_right_vlines werden folgende Anforderungen gestellt:
- 2 Content-Spalten (Navigation rechts #col2 und Hauptinhalt links #col3)
- Flexibles Layout, Randspalte mit fixer Breite von 250 Pixeln
- grafikfreier Spaltenhintergrund für die rechte Randspalte (blaugrau). Die Spalten sollen sowohl den Header als auch den Footer berühren.
- Horizontale Hauptnavigation "Sliding Door"
- Drucklayout: Es sollen nur die Hauptinhalte in der Spalte #col3 ausgegeben werden.
layout_storage/layout_2col_right_vlines.html
Layoutentwurf im Detail
Das zentrale Stylesheet layout_2col_right_vlines.css beinhaltet folgende CSS-Bausteine:
@import url(main/base.css);
@import url(modifications/basemod.css);
@import url(modifications/basemod_2col_right_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_right_vlines.css.
/* Rechte Spalte mit fester Breite von 250 Pixeln
*/
#col2 { width: 250px; }
/* Abschalten der linken Spalte */
#col1 { display:none; }
#col1_content { display:none; }
#col3 { margin-left:0px; border-left:0; }
/* Hintergrund für rechte Spalte */
#col3 { margin-right: 0; border-right: 250px #f0f0f8 solid; }
/* Randabstände anpassen */
#main { padding: 0; }
#footer {margin: 0em; padding: 1em; }
2 Spalten und fixe Spaltenbreite: Die Spalte #col2 erhält eine feste Breite von 250 Pixeln, die Spalte #col1 wird nicht benötigt und daher vollständig abgeschaltet (sie wird auch aus dem Quelltext entfernt).
Grafikfreier einfarbiger Spaltenhintergrund: Statt des sonst üblichen Margins zur Positionierung von #col3 neben der Randspalte #col2 wird die Eigenschaft border verwendet und ein 250 Pixel breiter Rand erzeugt, welcher den Spaltenhintergrund für die Randspalte bildet. Aufgrund des des speziellen Clearings des YAML-Frameworks ist #col3 immer die längste Spalte und kann daher den Spaltenhintergrund für die Randspalte bereitstellen.
Als letztes erfolgt die Anpassung Randabstände der Container #main und #footer damit die Spalten den Header und Footer berühren.
Anpassungen für den Internet Explorer
Die Anpassungen für den Internet Explorer sind in der Datei iehacks_2col_right_vlines.css im Verzeichnis css/explorer abgelegt.
/* LAYOUT-UNABHÄNGIGE ANPASSUNGEN -----------------------------
*/
@import url(../main/iehacks.css);
/* LAYOUT-ABHÄNGIGE ANPASSUNGEN ------------------------------- */
@media screen
{
/* Keine layoutabhängigen Anpassungen erforderlich */
}
In diesem Layoutentwurf sind keine speziellen Anpassungen erforderlich. Es wird lediglich die globale Anpassungsdatei iehacks.css eingebunden.
