HTML5 Experiment: Layout erstellen
Kategorie Web | 4 Kommentare »
Nachdem ich gestern die Grundstruktur meiner Seite definiert habe, werde ich heute das grundsätzliche Layout umsetzen. Am Ende sollen zum Beispiel die beiden Seitenleisten rechts neben der Artikelliste stehen und die Seite in der Mitte des Browserfensters dargestellt werden (für Neugierige hier schon mal das Ergebnis von heute).
Zur Umsetzung habe ich mich entschlossen, nun doch ein vorhandenes Grid System zu nutzen, um das Rad nicht neu zu erfinden. Ein Grid System ist ein Hilfsmittel, um die Seite in Spalten aufzuteilen und Bereichen wie der Artikelliste eine fixe Anzahl von Spalten zuzuweisen. Ich nutze das sehr einfache und schlanke Grid System responsive.gs. Ich habe die Variante mit 12 Spalten gewählt.
Da eine Unterstützung von Internet Explorer 9 und neuer für mich ausreichend ist, muss ich von responsive.gs lediglich folgende Stylesheets einbinden:
Das reset Stylesheet sorgt für gleiche Ausgangsbedingungen in allen Browsern. Es setzt alle eventuell später verwendeten HTML Elemente auf einen definierten Ausgangszustand zurück. Resultat ist Einheitsbrei: alle Elemente werden gleich dargestellt und man kann eine Hauptüberschrift <h1> nicht mehr von einer Unterüberschrift <h2> unterscheiden.
Wirklich interessant ist lediglich folgende Zeile:
[gist id=4541887]
Damit werden die neuen HTML5 Elemente explizit auf Blockdarstellung gesetzt. Das ist zwar auch der Standardwert laut Spezifikation, aber anscheinend gab es wohl immer mal wieder Browserversionen, die das falsch gemacht haben.
An meiner ursprünglichen inhaltlichen Seitenstruktur musste ich keine größeren Umbauten vornehmen. Ich habe lediglich den gesamten Seiteninhalt mit einer <div> Ebene umfasst, die als zentraler Container dient und mittig im Browserfenster angezeigt werden soll. Den Bereich nach Header bis Footer habe ich auch nochmal in eine <section> mit der ID „content_wrap“ zusammengefasst. Auch die Artikelliste, die links als Hauptspalte erscheinen soll, habe ich mit einer <section> „article_listing“ zusammengefasst. Damit ergibt sich ungefähr folgendes Bild:
[gist id=4542068]
Header und Footer sollen über die gesamte Seitenbreite gehen und damit jeweils 12 Spalten nutzen. Der Abschnitt „content_wrap“ hingegen besteht aus 3 nebeneinander stehenden Bereichen:
- Artikelliste
- Seitenleiste 1
- Seitenleiste 2
Die Artikelliste soll den meisten Platz einnehmen, etwa zwei Drittel der Seitenbreite bzw. 8 von 12 Spalten. Die beiden Seitenleisten müssen sich den restlichen Platz neben der Artikelliste teilen und sollen jeweils 2 Spalten breit sein.
Mittels des Grid Systems responsive.gs lassen sich diese Anforderungen umsetzen. Soll ein Element eine komplette Zeile umfassen, muss man lediglich die Klasse „row“ an diesem Element setzen, also etwa <header class=“row“> oder <article class=“row“>. Spalten einer Zeile muss man über die Klasse „col“ markieren. Zusätzlich muss man noch die Anzahl der Spalten angeben, die der Bereich im Grid belegen soll. Für die Artikelliste muss deshalb der Abschnitt als <section class=“col span_8″> definiert werden und die Seitenleisten jeweils als <aside class=“col span_2″>.
Das obige Beispiel um die nötigen Angaben ergänzt, ergibt:
[gist id=4542150]
Was hier passiert ist kein Voodoo. Sowohl Zeilen als auch Spalten sind zunächst Blöcke. Eine in einer Spalte geschachtelte Zeile wird deshalb nicht breiter als die übergeordnete Spalte. Spalten sind so definiert, dass sie alle jeweils nach links zur nächsten Spalte schwimmen (float:left). Dadurch ordnen sich die Spalten einer Zeile hübsch nebeneinander an. Schlussendlich wird die Breite jeder Spalte über die „span_X“ Angaben in Prozent bezogen auf die Breite der übergeordneten Zeile definiert. Die einzige große Kunst eines Grid Systems besteht darin, rechtzeitig das Schwimmen der Spalten zu beenden (Neudeutsch: float clearing), damit nur Spalten einer Zeile nebeneinander stehen.
Jetzt fehlt nur noch die Angabe der gewünschten Seitenbreite. Auch sollen die Navigationslinks im Header und Footer in einer Zeile und nicht untereinander dargestellt werden. Meine CSS Datei, mit den für das Theme spezifischen Angaben, sieht jetzt folgendermaßen aus:
[gist id=4542192]
Die erste Angabe setzt den Seitencontainer auf eine maximale Breite von 980 Pixel. Das ist ein sinnvoller Wert, da leider noch immer sehr viele Nutzer lediglich eine Bildschirmgröße von 1024 Pixeln haben.
Der zweite Teil der CSS Datei sorgt wie schon zuvor für das Verstecken der Überschriften von Header und Footer. Der letzte Teil sorgt für eine horizontale Darstellung der Navigationslisten in Header und Footer.
Das Endergebnis nach den heutigen Änderungen kann man hier live bewundern. Langsam sieht es nach einer Seite aus. Verkleinert man die Breite des Browserfensters, schieben sich die beiden Seitenleisten unter die Artikelliste. Im nächsten Abschnitt könnte ich mal versuchen, dass Seitenleiste 1 bei zu geringer Seitenbreite gar nicht mehr angezeigt wird. Mal schauen…
Hallo.
Bezieht sich der Artikel auf die aktuelle Seite?
Auf meinem Tablet hier ist das noch etwas buggy.
Während im hiesigen Chrome der Content über die gesamte Breite geht und sich auf der rechten Seite mit der dortigen Spalte über lagert, sehe ich mit dem mobile Firefox den Content in 2/3 und die rechte Spalte ist leer.
So richtig fertig ist es noch nicht.
Matthias
Nachtrag,
Mit dem Firefox sieht es jetzt doch passend aus.
Dafür bekomme ich beim Kommentar abschicken mit dem Chrome keine Feedback außer „der Kommentar wurde schon mal geschrieben“
So was.
Matthias
In den Artikeln findest du immer einen Link zum aktuellen Stand. Die Liveseite läuft noch mit altem Theme. Für diesen Artikel findest du den Stand unter:
https://sebstein.hpfsc.de/diverse/html5/02/
OK. Ja, ich war schon irritiert, dass die neue Seite so wie die alte aussieht.
Mit der Überlappung im Chrome liegt es an den Codeboxen. In Artikeln ohne sie sieht alles gut aus.