4.9 Layoutentwurf "3col_fixed"
Ausgangsbasis für die folgenden Beispiele ist das 3-spaltige Basis-Layout, des YAML-Frameworks.
In diesem Layoutentwurf mit der Bezeichnung 3col_fixed werden folgende Anforderungen gestellt:
- 3 Content-Spalten mit Spaltenanordnung 2-1-3
(Navigation links #col2, Hauptinhalt Mitte #col1, Sidebar rechts #col3) - zentriertes fixes Layout, Gesamtbreite 1020 Pixel, Randspalten jeweils 250 Pixel breit
- Spaltenhintergrund links: Hintergrundgrafik mit "Faux Columns" Technik
- Horizontale Hauptnavigation "Shiny Buttons "
- Drucklayout: Es sollen nur die Hauptinhalte in der Spalte #col1 ausgegeben werden.
layout_storage/layout_3col_fixed.html
Layoutentwurf im Detail
Das zentrale Stylesheet layout_3col_fixed.css beinhaltet folgende CSS-Bausteine:
@import url(main/base.css);
@import url(modifications/basemod.css);
@import url(modifications/basemod_3col_fixed.css);
@import url(navigation/nav_shinybuttons.css);
@import url(main/content.css);
@import url(print/print_001.css);
Die Layoutgrundlage, das 3-spaltige Grundlayout wird über die Bausteine base.css und basemod.css eingebunden. Die Modifikationen für das fixe 3-spaltige Layout finden sich in der Datei basemod_3col_fixed.css.
Fixe Breite und Zentrierung des Layouts: Die fixe Layoutbreite von 1020 Pixeln wird an den äußersten Container #page_margins übergeben. Anschließend kann dieser Container zentriert werden, indem die seitlichen Margins auf den Wert auto gesetzt werden. Die minimalen und maximalen Breiten werden abgeschaltet, da sie in einem fixen Layout wirkungslos sind.
/* Festlegung der Layoutbreite und Zentrierung*/
#page_margins {
width:1020px;
margin-left: auto;
margin-right: auto;
max-width:none; /* min-width für fixes Layout
abschalten */
min-width:none; /* max-width für fixes Layout
abschalten */
}
Anschließend werden die Randabstände der Container #main und #footer angepasst damit die Spalten den Header und Footer berühren.
/* Korrektur von Randabständen */
#main {margin: 0; padding: 0;}
#footer {margin:0; padding: 1em; border-color: #aaa; }
Spaltenanordnung 2-1-3: Die Technik für die Umsortierung der Spalten habe ich bereits im Abschnitt 4.4: Freie Spaltenanordnung erklärt. Jetzt wird sie angewendet, um eine optimale Zuordnung der Inhalte im Quelltext entsprechend ihrer Relevanz zu erhalten. Bei der Festlegung der einzelnen Margins ist jedoch darauf zu achten, dass das Grundlayout eine 2 Pixel breite umlaufende Schatterierung besitzt. Das schränkt die Breite der mittleren Spalte um 4 Pixel auf 516 Pixel ein.
/* #col1 wird zur mittleren Spalte */
#col1 { width: 516px; float:left; margin-left: 250px; }
/* #col2 wird zur linken Spalte */
#col2 { width: 250px; float:left; margin-left: -766px;}
/* #col3 wird
zur rechten Spalte */
#col3 { margin-left: 766px; margin-right: 0%; }
Faux Columns Hintergrund : Die am linken Rand angeordnete Floatspalte #col2 soll einen durchgehenden Spaltenhintergrund erhalten. Dazu bietet sich die Faux Columns Technik an. Dazu erhält der Container #main die Grafik als linksbündig platziertes und vertikal zu wiederholendes Hintergrundbild.
/* Himtergrundgrafik für linke Spalte - Grafikbreite
250 Pixel */
#main { background: #fff url(../../img/bg_left2.gif) repeat-y top
left; }
Damit ist das Layout soweit vollständig. Fehlt nur noch der Internet Explorer.
Anpassungen für den Internet Explorer
Die Anpassungen für den Internet Explorer sind in der Datei iehacks_3col_fixed.css im Verzeichnis css/explorer abgelegt.
/*----------------------------------------------------------*/
/* Bug: 3-Pixel-Jog des Internet Explorers *
**
** IE5.x/Win - x
** IE5.x/Mac - 0
** IE6 - x
** IE7 - 0
*/
/* Hides from IE-mac \*/
* html #col1 { margin-left: 253px; margin-right: -3px;}
* html #col3 { margin-left:763px }
/* End hide from IE-mac */
/*----------------------------------------------------------*/
Im ersten Schritt wird die globale Anpassungsdatei iehacks.css eingebunden. Bei der gewählten Spaltenanordnung 2-3-1 wäre mit einem flexiblen Layout die vollständige Beseitigung des 3-Pixel-Bugs nicht möglich. Da dies jedoch ein fixes Layout ist, kann ich mir auch hier die verlorenen 3 Pixel zurückholen.
Alternative Lösung zur Zentrierung fixer Layouts (IE5.x tauglich)
Die in diesem Layoutentwurf verwendete Methode zur Zentrierung funktioniert in allen modernen Browsern, egal ob es sich um ein fixes oder flexibles Layout handelt. Im Internet Explorer 5.x wird das Layout jedoch linksbündig angezeigt.
Für fixe Layouts bietet sich folgende alternative Möglichkeit der Zentrierung, die auch im veralteten Internet Explorer 5.x funktioniert.
body { padding: 0em; }
#page_margins {
max-width:none;
min-width:none;
position:absolute;
top: 0;
left: 50%;
margin-left: -510px;
}
#page { width: 1020px; margin: 1em; }
Dabei wird die Webseite durch Angabe eines negativen Margins zentriert. Diese Variante ist jedoch für flexible Layouts nicht einsetzbar.
