Stabiles Gerüst
Teil 2: CSS-Frameworks für flexible Layouts
- CSS-Frameworks für flexible Layouts
- Teil 2: CSS-Frameworks für flexible Layouts
- Teil 3: CSS-Frameworks für flexible Layouts
- Teil 4: CSS-Frameworks für flexible Layouts
Der Internet Explorer braucht einen leicht modifizierten Wert, den Sie erhalten, wenn Sie die Pixelzahl durch 13.3333 teilen. In Ihrem Stylesheet notieren Sie zuerst den Wert für alle Browser, danach hinter einem Sternchen den modifizierten Wert für den Internet Explorer. Bei einem 910 Pixel breiten Layout sieht das folgendermaßen aus:
#meindoc { width:70em;*width:
68.25em; }
Tipp: Da die Layouts intern mit em arbeiten, ist es sinnvoll, eine Maximalbreite beispielsweise über max-width: 100% festzulegen.
Damit verhindern Sie, dass bei vergrößerter Schrift horizontale Scrollleisten auftauchen. Wie sich das auch für IE-Versionen 6 und älter realisieren lässt, können Sie beim Framework YAML abgucken - dazu später mehr.
Der erste Einstieg in die verschachtelten divs mit ihren vorgegebenen IDs und Klassen gelingt besonders leicht über den YUI Grids Builder: Sie bestimmen die Aufteilung der Webseite, dann wird Ihnen der HTML-Code mit den benötigten Klassen automatisch generiert.
Nützlich sind darüber hinaus die vielen Beispiele für mögliche Seitenaufteilungen, die im Download-Paket mitgeliefert werden.
Kurzreferenz: YUI-Grids
IDs für die Layoutbreite: id="doc" 750px zentriert id="doc2" 950px zentriert id="doc3" 100% breit id="doc4" 974px zentriert Die Klassen für die Aufteilung in Spalten: class="yui-t1" 160px breite Spalte, links class="yui-t2" 180px breite Spalte, links class="yui-t3" 300px breite Spalte, links class="yui-t4" 180px breite Spalte, rechts class="yui-t5" 240px breite Spalte, rechts class="yui-t6" 300px breite Spalte, rechts Weitere Aufteilungen über folgende Klassen: class="yui-g" zwei Spalten, Verhältnis 1/2 zu 1/2 class="yui-gb" drei Spalten, Verhältnis 1/3 zu 1/3 zu 1/3 class="yui-gc" zwei Spalten, Verhältnis 2/3 zu 1/3 class="yui-gd" zwei Spalten, Verhältnis 1/3 zu 2/3 class="yui-ge" zwei Spalten, Verhältnis 3/4 zu 1/4 class="yui-gf" zwei Spalten, Verhältnis 1/4 zu 3/4
Am Raster ausrichten mit Blueprint CSS
Das Framework Blueprint CSS hilft bei der Erstellung von Grid- oder Rasterlayouts, innerhalb derer Sie Elemente beliebig platzieren können.
Wenn Sie Blueprint CSS herunterladen, finden Sie die benötigten Dateien im Ordner blueprint. Im Ordner blueprint/src stehen die unkomprimierten Varianten der Dateien inklusive nützlicher Kommentare. Auch hier werden mehrere CSS-Dateien verwendet:
• reset.css setzt die Browserformatierungen zurück. • typography.css nimmt grundlegende Schriftformatierungen vor. • grid.css definiert die Klassen für das Grid-Layout. • forms.css bietet sinnvolle Standardformatierungen für Formulare. • print.css liefert Vorgaben für den Ausdruck. • ie.css beinhaltet die Bugfixes für den Internet Explorer.
Diese Dateien mit ihren nützlichen Kommentaren sollten Sie sich ansehen, um sich einen Überblick über die Funktionsweise und die Möglichkeiten von Blueprint zu verschaffen, sie sind mit nützlichen Kommentaren versehen.
In Ihren HTML-Dokumenten verwenden Sie hingegen die komprimierten Versionen der Dateien, die sich direkt im Ordner blueprint befinden. Diese binden Sie im Kopfbereich Ihres HTML-Dokuments ein - die Datei mit den Bugfixes für den Internet Explorer wird innerhalb von konditionalen Kommentaren eingebettet.
<link rel="stylesheet" href=
"blueprint/blueprint/screen.css" type="text/css" media="screen, projection" /><link rel="stylesheet" href=
"blueprint/blueprint/print.css" type="text/css" media="print"><!--[if IE]><link rel="stylesheet"
href="blueprint/blueprint/ie.css" type="text/css" media="screen, projection /><![endif]-->
Blueprint CSS liefert die Vorgabe, um alle Elemente innerhalb eines Rasters auszurichten. Das Standardraster geht von einer Seitenbreite von 950px aus und zerteilt diese in 24 Spalten mit 30px Breite und 10px Abstand.
Der Wert von 950px ergibt sich durch die Rechnung 24 Spalten * 40px (Spaltenbreite + Abstand), wovon noch 10px abgezogen werden, da an den Rändern kein Abstand benötigt wird.
Diese 24 möglichen Spalten können über vordefinierte Klassen beliebig verbunden werden, ein div-Element mit der Klasse span-4 erstreckt sich beispielsweise über 4 Spalten, span-24 entsprechend über 24 Spalten. Außerdem muss es noch ein umschließendes Element mit der Klasse container geben. Ein Dreispalter mit Kopf- und Fußzeile sieht so aus:
<div class="container showgrid"><div class="span-24">Kopfbereich</div><div class="span-4">Navigation</div><div class="span-16">Inhalt</div><div class="span-4 last">
Seitenbereich</div><div class="span-24">Fußzeile</div></div> 
