CSS: 40 Layouts - identisches HTML

40 unterschiedliche CSS Layouts mit identischem HTML Code

Irgendwann einmal hatte ich einfach keine Lust mehr, Layouts ständig neu entwerfen zu müssen und so kam die Idee auf, dass man Inhalte schließlich mittels CSS beliebig positionieren kann. Die meisten Inhalte lassen sich in 3 Spalten unterschiedlicher Art mit Kopf und Fußzeile darstellen und je nach Verwendungszweck müssen sie feste oder prozentualen Breiten haben. All dies ist möglich, wenn man sich vorher ein klein wenig Gedanken über den (X)HTML Code gemacht hat - man kann nachträglich sogar das Layout ändern, ohne den (X)HTML Code zu ändern!

Details

Alle Layouts benutzen valides (X)HTML Markup und CSS und wurden erfolgreich auf folgenden Browsern getestet:
Internet Explorer/win 5.0, 5.5, 6 und 7; Opera ≥ 7.5, Firefox 1.5 and Safari 2. Jede der Spalten darf die längste werden. Zum Testen der Spalten habe ich ein wenig unsinnigen Text eingetragen.

Jedes Layout kann eine Seite mit 5 Hauptabschnitten darstellen: header, content, navigation, extra und footer. Das grundlegende Markup einer jeden Seite ist folgendes:

<div id="container">
  <div id="header">Kopfzeile</div>
  <div id="wrapper">
    <div id="content">Inhalt</div>
  </div>
  <div id="navigation">Navigation</div>
  <div id="extra">Extra</div>
  <div id="footer">Fußzeile</div>
</div> 

Das Markup ist nahezu minimal, bis auf den extra "wrapper" um den Inhalt. (X)HTML Puristen mögen sagen, dass dieser Wrapper semantisch falsch ist, aber alles was ich dazu sagen kann ist: Besser einen kleinen unsemantischen Wrapper im Markup als einen ganzen Haufen Browser-spezifische CSS Hacks um die benötigten Anforderungen an die Flexibilität des Layouts sicher zu stellen.

Apropos CSS

Jedes der Layouts benutzt float und in den meisten Fällen wird auch eine eine negative margin verwandt. Wenn man einmal verstanden hat wie das fuktioniert, kann man damit wirklich mächtige Positionierungen vornehmen. Zwei Sachen muss man dazu wissen:

1. Eine negative margin in float Richtung sorgt dafür, dass das Element noch weiter in die Richtung des float verschoben wird
2. Eine negative margin an der anderen Seite des Elements ändert an der float Position nichts, hat aber den Effekt, dass für das Element, welches sich entgegen der float Richtung neben diesem Element befindet, etwas mehr Platz geschaffen wird.

Das CSS für die jeweiligen Layouts befindet sich auf der jeweiligen Seite im Quelltext und ist in 2 Abschnitte gegliedert: Der obere Bereich behandelt Typographie und Farben, der untere die Positionierung. In diesen Beispielen wurden keinerlei (Blind-) Grafiken beutzt, um die Spalten einzufärben oder Weiten für die Positionierung festzulegen.

Das war's eigentlich im Großen und Ganzen. Viel Spaß bei der Verwendung der Layouts!