Modifikationen
- Erweiterung der Basis
- 2col_left_vlines
- 2col_right_vlines
- 3col_fixed
- Minimale & Maximale Breiten
- Freie Spaltenanordnung
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a nisl. Nullam mollis odio id dolor. In nec mauris sed leo semper sollicitudin. Maecenas eget leo in eros convallis mattis. Nulla in arcu. Nullam sed lorem rhoncus tellus ornare hendrerit. Nunc placerat lorem nec leo. Curabitur arcu neque, molestie eu, aliquet et, volutpat quis, leo. Donec egestas velit a sem. Ut congue laoreet orci. In enim metus, varius ac, vulputate id, consequat non, nulla. Nulla ullamcorper ultricies eros. Duis rhoncus enim ut nulla. Quisque in nisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing posuere odio. Nulla sodales orci eget enim.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a nisl. Nullam mollis odio id dolor. In nec mauris sed leo semper sollicitudin. Maecenas eget leo in eros convallis mattis. Nulla in arcu. Nullam sed lorem rhoncus tellus ornare hendrerit. Nunc placerat lorem nec leo. Curabitur arcu neque, molestie eu, aliquet et, volutpat quis, leo. Donec egestas velit a sem. Ut congue laoreet orci. In enim metus, varius ac, vulputate id, consequat non, nulla. Nulla ullamcorper ultricies eros. Duis rhoncus enim ut nulla. Quisque in nisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing posuere odio. Nulla sodales orci eget enim.
4.5 Fixes 3-Spalten-Layout mit Spaltentrennern
Wie eben schon beschrieben, ist auch die Erstellung eines Layouts mit fixer Breite kein Problem.
Die erforderlichen Änderungen für diese Variante stehen in der Datei basemod_3col_fixed.css im Verzeichnis css/modifications:
#page_margins {
width:960px;
margin-left: auto;
margin-right: auto;
max-width:inherit;
min-width:inherit;
}
Der umlaufende minimale Freiraum von 10px wurde bereits in der Datei basemod.css für body definiert und unverändert übernommen.
Der DIV-Container #page_margins bekommt in diesem Fall die gewünschte Breite des Layouts zugewiesen. Durch die zusätzliche Angabe von flexiblen Margins (CSS-Eigenschaft: auto;) wird das Layout zentriert. Diese Methode zur Zentrierung funktioniert in allen modernen Browsern, egal ob fixes oder flexibles Layout. Im Internet Explorer 5.x wird das Layout jedoch linksbündig angezeigt.
Doch auch dagegen gibt es ein Mittel. Für fixe Layouts bietet sich folgende alternative Möglichkeit der Zentrierung:
body { padding: 0em; }
#page_margins {
max-width:inherit;
min-width:inherit;
position:absolute;
top: 0;
left: 50%;
margin-left: -480px;
}
#page { width: 960px; margin: 1em; }
Dabei wird die Webseite durch Angabe eines negativen Margins zentriert. Diese Variante funktioniert auch in den älteren Versionen des Internet Explorers, ist jedoch für flexible Layouts nicht einsetzbar.
Wie man sieht, erweist sich der Einsatz von floats für die Layouterstellung als sehr komfortabel. Mit nur wenigen CSS-Befehlen lassen sich verschiedenste Modifikationen erstellen, ohne dass strukturelle Änderungen am XHTML-Quellcode erforderlich werden. Was gerade nicht benötigt wird, kann einfach abgeschaltet werden.
