Allgemeines

Dieses Tutorial erklärt den Aufbau von Website-Layouts mit Hilfe von CSS und bietet die Layouts zum Herunterladen an. Es ist in zwei Abschnitte gegliedert: im Teil 1 geht es nur um Layouts, die mit Hilfe von Angaben zur Positionierung erstellt werden. Teil 2 (diese Seite) behandelt Layouts auf der Basis der Eigenschaften float und clear.

Erklärt werden zwei- oder mehrspaltige Layouts mit oder ohne Kopfteil und mit oder ohne Fußteil. Alle Layouts passen sich der Breite des Ausgabefensters an. Wer reine fließende Layouts erstellen möchte, muß die in Pixeln angegebenen Längenwerte durch Werte in Ems oder Prozenten ersetzen.

[mehr bei Styleworks]

Zur besseren Erkennbarkeit sind in den Beispielen alle Elemente DIV, die dem Layout dienen, mit einem Rahmen und einem Randabstand versehen. Beides ist in der Praxis nicht immer unbedingt nötig.

Ein ganzes Layout auf den Eigenschaften float und clear zu basieren, erscheint zunächst etwas ungewohnt (oder gewagt), denn float ist die einzige Eigenschaft, mit der gleichrangige Block- Level- Elemente nebeneinander platziert werden können. Gleichzeitig hat die Unterstützung von float selbst in den modernen Browsern noch Mängel, die beachtet werden müssen. Dazu kommt, dass der eigentliche Zweck für float und clear nicht in der Erstellung ganzer Layouts liegt, sondern in der speziellen Positionierung einiger weniger Elemente. Dennoch gibt es Anforderungen, die mit solchen Layouts am Besten erfüllt werden können.