4.9 Layoutentwurf "3col_abb"
Ausgangsbasis für die folgenden Beispiele ist das 3-spaltige Basis-Layout, des YAML-Frameworks.
In diesem Layoutentwurf mit der Bezeichnung 3col_abb werden folgende Anforderungen gestellt:
- 3 Content-Spalten
- Navigation links #col1,
- zwei gleichrangige Inhaltsspalten #col2 und #col3 nebeneinander
- flexibles Layout, alle Spalten flexibel
- keine Spaltentrenner
- Horizontale Hauptnavigation "Sliding Door "
- Drucklayout: Es sollen beide Inhaltsspalten ausgegeben werden.
layout_storage/layout_3col_abb.html
Layoutentwurf im Detail
Das zentrale Stylesheet layout_3col_abb.css beinhaltet folgende CSS-Bausteine:
@import url(main/base.css);
@import url(modifications/basemod.css);
@import url(modifications/basemod_3col_abb.css);
@import url(navigation/nav_slidingdoor.css);
@import url(main/content.css);
@import url(print/print_abb.css);
Die Layoutgrundlage, das 3-spaltige Layout wird über die Bausteine base.css und basemod.css eingebunden. Die Modifikationen für das abb-Layout finden sich in der Datei basemod_3col_abb.css.
Beachte: Texte werden üblicherweise von links nach rechts gelesen. Textbrowser orientieren sich jedoch nicht an der Position der Inhalte am Bildschirm sondern an der Reihenfolge der DIV-Container im Quelltext. Im Quelltext kommt die rechte Spalte #col2 vor statischen Spalte #col3. Am Bildschirm müssen diese beiden Spalten also vertauscht werden, sodass #col2 in die Mitte rückt und #col3 zur rechten Randspalte wird.
Umsetzung: Die Lösung liegt in den Möglichkeiten der freien Spaltenanordnung, genauer gesagt in der Spaltenreihenfolge 1-2-3. Die ehemals rechte Spalte #col2 erhält ein float:left; und rutscht damit direkt neben #col1 — sie wird damit 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.
#main { padding: 0; }
/* linke Spalte */
#col1 { width: 22.5%; margin: 0px; }
/* Rechte Spalte */
#col2 { width: 38.75%; float:left; margin: 0px;}
/* Mittlere Spalte und rechte Spalte sind gleich breit:
Spaltenbreite
= (100% - 22,5%) / 2 = 38.75% */
#col3 { margin-left: 61.25%; margin-right: 0px; }
Anpassungen für den Internet Explorer
Die Anpassungen für den Internet Explorer sind in der Datei iehacks_3col_abb.css im Verzeichnis css/explorer abgelegt.
/* LAYOUT-UNABHÄNGIGE ANPASSUNGEN -----------------------
*/
@import url(../main/iehacks.css);
/* LAYOUT-ABHÄNGIGE ANPASSUNGEN -------------------------
*/
@media screen
{
...
/*--------------------------------------------------------*/
/* Bug: 3-Pixel-Jog des Internet Explorers
**
/* Hides from IE-mac \*/
* html #col3 { height: 1%; }
* html #col2 {margin-right: -3px;}
* html #col3 { margin-left: 60.25%; margin-right: 0; }
/* End hide from IE-mac */
/*--------------------------------------------------------*/
Als erstes wird die globale Anpassungsdatei iehacks.css eingebunden. Als layoutabhängige Anpassung erfolgt die Beseitigung des 3-Pixel-Bugs des Internet Explorers (siehe Abschnitt 3.5: CSS-Anpassungen für den Internet Explorer).
