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".
Drei prozentuale Spalten (n.01)
Drei prozentuale Spalten (n.02)
Drei prozentuale Spalten (n.03)
Drei prozentuale Spalten (n.04)
Drei prozentuale Spalten (n.05)
Drei prozentuale Spalten (n.06)
Drei feste Spalten (n.7)
Drei feste Spalten (n.8)
Drei feste Spalten (n.9)
Drei feste Spalten (n.10)
Drei feste Spalten (n.11)
Drei feste Spalten (n.12)
Flüssig, untergeordnete Spalten feste Breite (n.13)
Flüssig, untergeordnete Spalten feste Breite (n.14)
Flüssig, untergeordnete Spalten feste Breite (n.15)
Flüssig, untergeordnete Spalten feste Breite (n.16)
Flüssig, untergeordnete Spalten feste Breite (n.17)
Flüssig, untergeordnete Spalten feste Breite (n.18)
Flüssig, Drei Spalten, hybride Breiten (n.19)
Flüssig, Drei Spalten, hybride Breiten (n.20)
Flüssig, Drei Spalten, hybride Breiten (n.21)
Flüssig, Drei Spalten, hybride Breiten (n.22)
Zwei Spalten flüssig, Seite fest (n.23)
Zwei Spalten flüssig, Seite fest (n.24)
Zwei prozentuale Spalten (n.25)
Zwei prozentuale Spalten (n.26)
Eine Spalte flüssig und Zwei Hälften (n.27)
Eine Spalte flüssig und Zwei Hälften (n.28)
Zwei prozentuale Spalten und eine große (n.29)
Zwei prozentuale Spalten und eine große (n.30)
Zwei Spalten flüssig, feste Seite und eine große (n.31)
Zwei Spalten flüssig, feste Seite und eine große (n.32)
Zwei Spalten fest (n.33)
Zwei Spalten fest (n.34)
Zwei Spalten fest (n.35)
Zwei Spalten fest (n.36)
Zwei Spalten fest (n.37)
Zwei Spalten fest (n.38)
Eine Spalte fest und Zwei Hälften (n.39)
Eine Spalte fest und Zwei Hälften (n.40)
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:
- Eine negative
margin
in float Richtung sorgt dafür, dass das Element noch weiter in die Richtung desfloat
verschoben wird - Eine negative
margin
an der anderen Seite des Elements ändert an derfloat
Position nichts, hat aber den Effekt, dass für das Element, welches sich entgegen derfloat
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!