Stabiles Gerüst

Teil 2: 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.

CSS-Frameworks

© Archiv

Eine Beispielseite von Blueprint demonstriert, wie Elemente am Raster ausgerichtet werden können.

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>

Mehr zum Thema

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…