Sent from Hauptstadt!

ein Blog für den geneigten Leser

HTML5 Experiment: Ausbruch aus dem Grid

Tags: ,

Kategorie Web | Keine Kommentare »

Ein Grid System wie responsive.gs hilft, Inhaltsbereiche einer Seite aneinander ausgerichtet anzuordnen. Man kann jedem Inhaltsbereich eine Anzahl von Grid Spalten zuweisen und das Grid System sorgt für eine entsprechende Platzierung. Ist man aber erst mal im Grid gefangen, gibt es keinen Weg mehr raus, um zum Beispiel eine horizontale Linie über die gesamte Seitenbreite zu zeichnen. Man ist in der Matrix gefangen. Oder doch nicht?

Bevor es die Antwort gibt, zunächst eine kleine Grafik zur Veranschaulichung.

Darstellung eines Gridsystems zentriert im Browser und einer weiteren Ebene, die das Grid zerschneidet und gesamte Browserbreite bedeckt.

Das Grid System sorgt dafür, dass der Seiteninhalt in einem Container auf der Seite zentriert angezeigt wird (schwarzes Rechteck in der Mitte des Browserfensters). Jedes Element, was im Grid angelegt wird, kann sich nur in diesem Container bewegen und diesen nicht durchbrechen. Die grüne Ebene wäre also nicht möglich. Dumm ist, dass ich diese benötige, da im Seitenkopf die Hauptmenüpunkte von zwei Linien gerahmt werden, die über die gesamte Seitenbreite verlaufen.

Ein Blick auf das heutige Ergebnis zeigt aber, dass es doch geht. Der Ausbruch kann gelingen! Der Trick ist, dass man nicht einen Container hat, sondern mehrere. In der Grafik oben wären erstes und zweites Wort „GRID“ jeweils ein eigener Container. Die grüne Ebene hingegen ist kein Container und wird deshalb über die gesamte Seitenbreite angezeigt. Allerdings kann diese Ebene auch einen Container enthalten, zum Beispiel um die Menüpunkte trotzdem in der Mitte anzuordnen. Umgesetzt sieht das dann in etwa so aus:

Ich habe die <div> Ebene um den gesamten Inhalt entfernt. Diese diente bisher dazu, einen zentralen Container zu definieren. Diesen gibt es jetzt nicht mehr. Das <header> Element ist kein Container, da Teile davon über die gesamte Seitenbreite gehen sollen. Die untergeordnete <hgroup>, die den Seitentitel und Berlin Silhouette darstellt, soll in der Seitenmitte sein und ist deshalb als Container gekennzeichnet. Der <nav> Bereich soll über die gesamte Seitenbreite gehen, aber das untergeordnete Hauptmenü erscheint wiederum in der Seitenmitte, da es ebenfalls ein Container ist. Weiterhin gibt es noch einen Container für den Inhalt (content_wrap) und den <footer>.

Das zur Menüzeile zugehörige CSS sieht folgendermaßen aus:

Bei der Umsetzung habe ich mich gegen das schräge Strichmuster hinter den Menüpunkten entschieden, weil es die Lesbarkeit der Menüpunkte beeinträchtigt. Stattdessen habe ich einen knappen Farbverlauf gewählt.

Wie das Beispiel zeigt, benötigt man für Farbverläufe keine Grafik mehr, sondern kann es direkt mit CSS3 umsetzen. Die Angabe zum Hintergrundbild (background-image) kann man lesen als: Linearer Farbverlauf von oben beginnend mit der Farbe türkis, übergehend in weiß, abgeschlossen nach 25% der verfügbaren Fläche. Auch horizontale, schräge oder gedrehte Farbverläufe sind möglich und das Netz hält genügend Beispiele bereit. Da die Standardisierung zu Farbverläufen noch nicht abgeschlossen ist, sind die spezifischen Browserangaben noch notwendig, auch wenn sich diese lediglich durch das Präfix unterscheiden.

Gut, gab es am Ende des heutigen Experiments also doch noch eine spezfische Sache zu CSS3. Man kann HTML5, CSS3 und JavaScript auch nutzen, um ganze Computerspiele zu programmieren, etwa die erste Ausgabe von Command & Conquer ;-)

Schreiben sie ein Kommentar