Weitere Infos
Sie lesen:
LB1 (2009)

Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.
Aktuelle Infos finden Sie hier:
Sie lesen:
LB1 (2009)
Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.
Aktuelle Infos finden Sie hier:
Die Erweiterung von 2 auf 3 Spalten ist bei der Variante mit entgegengesetzten Floats etwas aufwendiger, denn Sie benötigen innerhalb des Textbereichs zwei div-Bereiche, die dann auch wieder nach links bzw. rechts gefloatet werden.
Der bisherige Inhalt steht dann in einem Bereich namens #inhalt, während der Bereich #sidebar zur dritten Spalte auf der rechten Seite wird und nur ein bisschen Fülltext erhält.
Die Reihenfolge der beiden Bereiche im Quelltext spielt keine Rolle, da sie wieder mit entgegengesetzten Floats positioniert werden.
<div id="wrapper">
<div id="kopfbereich"> ...</div>
<div id="textbereich">
<div id="inhalt">
<!-- Bisheriger Inhalt aus #textbereich -->
</div> <!-- Ende inhalt -->
<div id="sidebar">
<h2>#sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Suspendisse egestas ultricies pede.</p>
</div> <!-- Ende sidebar -->
</div> <!-- Ende #textbereich -->
<div id="navibereich"> ...</div>
<div id="fussbereich"> ...</div>
</div>
Jetzt werden die beiden neuen Spalten im CSS gestaltet. Der Textbereich hat eine Breite von 590px (inklusive 30px padding), die Sie im Stylesheet zwischen den beiden neuen Bereichen beliebig aufteilen können.
Die Hintergrundfarbe für die dritte Spalte wird wieder durch die #wrapper zugewiesene Hintergrundgrafik farbverlauf_dreispaltig.jpg erzeugt.
Im Browser sieht das dann so aus: