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:
Das eben erstellte zweispaltige Layout lässt sich relativ leicht in ein dreispaltiges verändern, das dann wie folgt aussehen könnte:
Im HTML benötigen Sie dazu eine dritte Spalte, die im Quelltext vor dem Textbereich stehen muss:
...
</div> <!-- Ende navibereich -->
<div id="sidebar">
<h2>#sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Suspendisse egestas ultricies pede.</p>
</div>
<div id="textbereich">
...
Die im HTML neu erzeugte Spalte wird mit einem neuen Style und einem rechten Außenrand für #textbereich in das vorhandene Layout eingefügt.
Die Hintergrundfarbe bekommt #sidebar von #wrapper und wäre deshalb eigentlich Weiß. Eine eigene Farbe kann die Spalte nicht so ohne Weiteres bekommen, da kein HTML-Element vorhanden ist, an das man die »falsche Spalte« aufhängen könnte.
Um der dritten Spalte trotzdem einen farbigen Hintergrund zu geben, benötigen Sie eine neue Hintergrundgrafik:
Diese Grafik ist 720px breit, links 130px farbig, in der Mitte 460px weiß und rechts 130px farbig. Am einfachsten erstellen Sie dazu eine Kopie von farbverlauf.jpg und färben den mittleren Bereich weiß. Sie können natürlich auch einfach farbverlauf_dreispaltig.jpg aus dem Basisordner in den Übungsordner kopieren.
Im ersten Style weisen Sie #wrapper die neue Hintergrundgrafik zu, im zweiten wird die dritte Spalte mit einer Breite von 110px nach rechts gefloatet. Dazu kommen noch die 2 x 10px padding rechts und links, sodass die Spalte genau in 130px margin-right passt.
Das Ergebnis ist optisch ein dreispaltiges Layout. Bemerkenswert ist dabei die unterschiedliche Reihenfolge der drei Spalten im Quelltext und am Bildschirm:
Auch für floatbasierte Layouts gibt es bei The Styleworks ein deutschsprachiges Tutorial: