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.
4.4 Zweispalten-Layout mit grafikfreiem Spaltenhintergrund
Auch hier wird mit wenigen Handgriffen aus dem Basis-Layout das entsprechende 2-Spalten-Layout erzeugt.
Die erforderlichen Änderungen für diese Variante stehen in der Datei basemod_2col_right_vlines.css im Verzeichnis css/modifications:
#col1 {display:none;}
#col1_content {display:none;}
#col3 {margin-left:0px; border-left:0;}
Die linke Spalte #col1 und deren Inhalt #col1_content werden abgeschaltet. Mit dem dritten Befehl wird der linke Rand der mittleren Spalte #col3 angepasst. Wiederum sind es nur drei CSS-Befehle.
Die Datei basemod_2col_right_vlines.css enthält weiterhin zwei Anweisungen, um die rechte Spalte mit einer Hintergrundfarbe zu versorgen.
/* Jetzt spielen wir noch mit der border-Definition der rechten Spalte */
#col3 {
margin-right:0;
border-right: 250px #ddc solid;
}
Bei diesem Beispiel zeigt sich die Wirkungsweise des z-index, welcher im Abschnitt 3.3: Das Basis-Stylesheet 'base.css' für die drei Spalten vereinbart wurde. Im Quelltext kommt die mittlere Spalte #col3 erst nach den beiden Randspalten. Damit würde sie ohne die vorgegebene Sortierung via z-index über den Randspalten liegen und der rechte farbige Border die rechte Randspalte überdecken. Durch den vorgegebenen z-index wird diese Variante, der rechten Spalte ohne Grafikeinsatz zu einer Hintergrundfarbe zu verhelfen, erst möglich.
Damit die rechte Spalte bündig am Header und Footer des Layouts anliegt, werden zusätzlich noch einige Randabstände angepasst, die jedoch keiner ausführlichen Erläuterungen bedürfen.
