Tutorial: Gestaltungsraster im Webdesign II.

“…and second, grids matter a lot in information design. Now you know why I’m so crazy for them.”

Nachdem ich im ersten Teil versucht habe zu erklären, wie Rastergrößen entstehen, soll es in diesem Teil nun um die Anwendung des Gestaltungsrasters gehen. Ich bin mir unsicher, wie weit ich hier nun ins Detail gehen soll. Dieses Tutorial setzt ein solides Grundwissen über CSS vorraus. Ich kann und möchte hier keine Grundlagen zur Positionierung von HTML Elementen klären, ich möchte nur zeigen, wie man ein Raster bei der Positionierung von Elementen, einhalten kann.

Damit kommen wir auch gleich zur Methodik dieses Teils. Für die ganz Ungeduldigen gibt es am Ende des Artikels, zwei Beispiel-Seiten. Für alle anderen werde ich nun Schritt für Schritt vorgehen. Ich werde das Prinzip, an Beispiel eines p-Blocks erläutern. Ich muss nicht jeden kleinen Abschnitt meiner Seite erläutern, um das System zu erklären. Wer dieses Tutorial gelesen hat, wird fast alles was es hier zu sehen gibt, ebenfalls realisieren können.

Grundsätzliches

An dieser Stelle sei eine kleine Korrektur zum ersten Teil angebracht. Um die Sache hier nun leichter erläutern zu können, werde ich das Raster für diesen Teil etwas ändern. Mein Beispiel-Raster besitzt von nun an absolute gleichmäßige Abstände. Damit reduzieren sich die äußeren 30 Pixel, zu 20 Pixeln. Wieso, warum und weshalb, wird sich um Laufe dieses Textes selbst erklären. Damit sieht mein Beispiel-Raster nun folgendermaßen aus:

Alle 3 Spalten sind 224 Pixel breit, und besitzen 20 Pixel breite Abstände zu beiden Seiten. Daraus ergibt sich eine Gesamtbreite von 752 Pixeln. Diese 752 Pixel sind als Breite des DIVs zu definieren, welches später die Inhalte enthalten soll.

Zwei Werte machen die Positionierung auf dem Raster aus: Breite der Elemente, sowie Abstand der Elemente, zu einer der äußeren Kanten. Mit diesen beiden Größen, kann ich somit jedes HTML Element, auf das Raster legen. Der elegantere Ansatz, ist nur mit dem äußeren Abstand (Margin) zu arbeiten. Im Idealfall, definiert sich somit die Breite des Elements von selbst. Leider ist dies nur die Theorie. In vielen praktischen Fällen, wird man nicht drum rum kommen, die Breite zusätzlich fix zu definieren. Besonders der gute alte Internet Explorer, möchte immer noch einen Wert für die Breite (width) viele seiner HTML-Elemente haben.

p-Block über Spalte 1 und 2

Ein kurzer Blick auf die ersten Styles für das p-Tag dieses Stylesheets:

p {
font: normal .8em Arial, Verdana, Helvetica, sans-serif;
line-height: 140%;
width: 468px;
margin: 0 0 0 244px;
padding: 3px 0 12px 0;
}

Wie man sieht, bin ich mit dieser CSS Formatierung, auf Nummer sicher gegangen. Wichtig sind wie eben schon geschrieben nur die Angaben margin und width. Die folgende Grafik soll zeigen, wie ich den p-Block definieren möchte.

Wie definiert sich der hier dargestellte p-Block nun genau? Auch hier gibt es wieder verschiedene Möglichkeiten. Fest steht, dieser Block soll eine Breite von exakt 468 Pixeln besitzen. Diese 468 Pixel entstehen aus der Breite von 2 Spalten inklusive einem Zwischenraum: 224 * 2 + 20 = 468. Diese Breite kann man nun im CSS definieren: width: 468px;. Nichts anderes habe ich getan.

Skizzen zur Version 5

Was nun noch fehlt, ist die genaue Position. Für mich ist es logischer, zur Positionierung von Elementen, immer von Links aus zu zählen, soll heißen der Null-Punkt des Rasters ist immer die linke obere Ecke. Dies ist kein Zwang, denn CSS erlaubt dank Floats und Margins, ebenfalls eine Positionierung relativ zur rechten Seite.

Der p-Block der oberen Grafik besitzt nun einen linken Abstand von 20 Pixeln und einen rechten Abstand von 244 Pixeln. Diese Zahlen sind nun mit Margin-Werten im CSS zu definieren.

p {
width: 468px;
margin:0 264px 0 0;
}

/* oder auch */

p {
width: 468px;
margin:0 0 0 20px;
}

Beide oberen CSS Angaben führen theoretisch zum exakt gleichen Ergebnis. In beiden Fällen ist die Breite und die Position fest definiert. Spannend wird es, wenn man beide Optionen kombiniert und sich somit die Angabe der Breite sparen kann.

p {
margin:0 264px 0 20px;
}

Durch beide Marginwerte definiert sich die Breite des Elements automatisch. Dieses kleine Detail ist essenziell, möchte man später sein Raster um eine Spalte verändern. Somit reicht eine Änderung dieser Margin-Werte aus, um statt 3 dann 4 Spalten zu verwenden. Für den Fall, dass eine weitere Spalte dazukommt, muss man nur 244 Pixel (eine zusätzliche Spalte samt Zwischenraum) zum rechten Margin-Wert addieren. Fertig.

p-Block über Spalte 2 und 3

Mein p-Block soll wieder 468 Pixel breit sein, also wieder über 2 Spalten laufen. Diesmal allerdings möchte ich den Block über Spalte 2 und 3 laufen lassen, Spalte 1 soll übersprungen werden. Wie definiert sich nun Spalte 2 und 3? Das Element muss einen linken Abstand von 264 (20+224+20) Pixeln besitzen und 468 (224*2+20) Pixel breit sein:

p {
width: 468px;
margin: 0 0 0 264px;
}

Spart man sich die Angabe der Breite, so kommt ein zusätzlicher Margin-Wert hinzu, in diesem Fall wieder 20 Pixel (also ein Spaltenabstand), auf der äußeren rechten Seite.

p {
margin: 0 20px 0 264px;
}

1 Spalte floaten

Jetzt sollten die einfachen Möglichkeiten, Elemente anzuordnen erklärt sein. Die Frage die noch offen ist, wie man die Elemente, 1-Spalte breit, nebeneinander stellt. Mein Anwendungsbeispiel dafür ist zum Beispiel die Suche, oder das Archiv auf dieser Seite.

Zwei kleine Probleme ergeben sich nun. Zum einen habe ich bis jetzt nur Elemente untereinander positioniert, nun soll es aber nebeneinander statt finden und dadurch kommt man um Floats nicht mehr herum. Dies erzwingt weiterhin die Angabe von festen Breite, allein mit Margins kommt man hier nicht weiter. Welche Werte brauche ich also? Mein Block wird 224 Pixel breit und muss einen Margin Wert von 20 Pixeln besitzen. Da dies normale p-Elemente werden, die dennoch anders positioniert werden sollen, verwende ich eine CSS-Klasse, statt des normalen p-Tags, wie oben.

p.floats {
width: 224px;
float: left;
margin: 0 0 0 20px;
}

Das Ganze lässt sich logischerweise auch problemlos zur rechten Seite floaten, dann wandert der Margin-Wert natürlich zur anderen (rechten) Seite.

p.floats {
width: 224px;
float: right;
margin: 0 20px 0 0;
}

Nun verweise nochmal auf die kleine Korrektur am Anfang dieses Tutorials.

Um die Sache hier nun leichter erläutern zu können, werde ich das Raster für diesen Teil etwas ändern. Mein Beispiel-Raster besitzt von nun an absolute gleichmäßige Abstände. Damit reduzieren sich die äußeren 30 Pixel, zu 20 Pixeln. Wieso, warum und weshalb, wird sich um Laufe dieses Textes selbst erklären.

Wieso hab ich das Raster verändert? Um eben die gefloateten p-Blöcke zu ermöglichen. Mit dem alten Raster wär dies nicht nur mit einer CSS Klasse möglich, denn da hätte der Margin Wert des ersten Float-Elements 30 Pixel sein müssen, der der folgenden Elemente aber 20. Um exakt diese Situation zu vermeiden, braucht es absolut gleiche Spaltenabstände, auch bei den äußersten Spalten.

Beispiel Seiten

Zum Abschluss dieses Teils, gibt es zwei einfache Test-Seiten, eine für 800, eine für 1024 Pixel. Das Grundraster ist bei beiden gleich, beim 1024er, kommt nur eine weitere Spalte hinzu. Ich möchte damit zeigen, wie einfach es ist, solche Änderungen umzusetzen, wenn man auf ein striktes Raster baut. Hier ein Margin Wert, da eine Breitenangabe verändert und schon ist das Layout für die höhere Auflösung angepasst.

• 800er – 3 Spalten
• 1024er – 4 Spalten

Im geplanten letzten Teil dieser Serie, werde ich versuchen, das Raster flexibel funktionieren zu lassen. Eine perfekte Lösung fehlt mir aber noch. Im Prinzip sieht man schon jetzt, dass ein Raster, primär auf ganz wenigen CSS Werten beruht, wieso soll dies also nicht auch mit relativen Werten funktionieren? Teil II. ist hiermit fertig.