HTML5: 40 Layouts - identischer Code

HTML5: 40 CSS3 Layouts mit identischem Code

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 HTML Code gemacht hat - man kann nachträglich sogar das Layout ändern, ohne den HTML Code zu ändern!

Basierend auf dem "alten" Experiment habe ich die einzelnen Layouts in HTML5 umgesetzt, gleichzeitig wurden für bessere Wiederverwertbarkeit im Sinne von OOCSS alle ID durch CLASS ersetzt. Bitte wählen sie die entsprechenden neuen HTML5 Elemente passend zu ihrem Projekt aus und übernehmen sie nicht "blind".

Details

Alle Layouts benutzen valides HTML5 Markup und CSS und wurden erfolgreich auf allen HTML5 fähigen Rendering Engines getestet. Ältere Browser können hiermit Schwierigkeiten haben, da sie die neuen Elemente wie header, article, nav, aside und footer nicht kennen, es git jedoch workarounds dafür. Diese wurden hier bewusst nicht eingesetzt. Wenn Support bis herunter zu IE6 gewünscht ist, sollte man eher auf HTML5 verzichten und valides (X)HTML verwenden. Die identischen Layouts in XHTML finden Sie hier: CSS: 40 unterschiedliche Layouts mit identischem (X)HTML. 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, article, navigation, aside und footer. Das grundlegende Markup einer jeden Seite ist folgendes:

<div class="container">
  <header>Kopfzeile</header>
  <div class="wrapper">
    <article>Inhalt</article>
  </div>
  <nav>Navigation</nav>
  <aside>Extras</aside>
  <footer>Fußzeile</footer>
</div>

Das Markup ist nahezu minimal, bis auf den extra "wrapper" um den Inhalt. HTML5 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!