SELFHTML/Navigationshilfen Stylesheets CSS-basierte Layouts
	Einführung in CSS-basierte Layouts
	Trennung von Inhalt und Layout  Das Box-Modell als Grundlage CSS-basierter Layouts  Warum erst jetzt? Browserbedingte Hürden

Trennung von Inhalt und Layout

Gratulation! Wenn Sie bis hierhin vorgedrungen sind, haben Sie vermutlich ausreichend Kenntnisse der in diesem Kapitel behandelten  CSS-Eigenschaften erworben und möchten diese nun auch konsequent für die Gestaltung Ihrer Seiten nutzen. Vielleicht haben Sie aber auch nur die Nachteile einer Fensteraufteilung in  Frames erkannt oder möchten  Tabellen lediglich der Auszeichnung tabellarischer Daten vorbehalten? In jedem Fall sollten Sie zumindest über Grundlagenwissen bezüglich Stylesheets verfügen.

Ein CSS-basiertes Layout setzt das CSS zugrunde liegende Konzept der Trennung des Inhalts und der Struktur einer Seite von deren Präsentation um. Layoutänderungen sind dadurch bereits mit nur geringer Modifikation der CSS-Definitionen zu realisieren und sofern diese in separaten Dateien notiert sind, können Sie das Layout für das gesamte Projekt hierüber einheitlich bestimmen.

Im Gegensatz zu Tabellen-Layouts wird die Seitenaufteilung nicht mehr ausschließlich per HTML-Auszeichnung festgelegt. Sie können die Anordnung der Elemente auf einer Seite über CSS flexibel definieren und sind nicht auf eine unflexible Einteilung in Zeilen und Spalten beschränkt. CSS-basierte Layouts eröffnen Ihnen Möglichkeiten der Seitengestaltung, die mit Tabellen nicht umsetzbar sind.

Durch eine  sinnvolle Auswahl der Elemente und schlüssige Anordnung der Inhalte mit nachfolgender Formatierung und Positionierung per CSS wird die Zugänglichkeit verbessert. Die Erstellung von barrierefreien Seiten gewinnt zunehmend an Bedeutung. Diese Entwicklung wird nicht zuletzt von der Gesetzgebung (betreffend Internetpräsenzen, die unter staatlicher Aufsicht stehen) gefördert. Darüber hinaus erleichtern CSS-Layouts die Pflege der Seiten und reduzieren den Umfang des HTML-Quelltextes und damit die Ladezeiten deutlich.

Das Box-Modell als Grundlage CSS-basierter Layouts

Versuchen Sie bitte nicht, die Struktur eines Tabellen-Layouts mit ineinander verschachtelten  div-Elementen nachzubauen. Sie können jedem Block-Element die erforderlichen CSS-Eigenschaften  float,  width und  margin zuweisen und benötigen div-Tags lediglich zur Gruppierung von Elementen.

Die CSS-Eigenschaft  position sollten Sie für CSS-Layouts nur im Ausnahmefall verwenden und die hierdurch mögliche Überlagerung von Elementen bei Schriftvergrößerung sowie die Platzierung außerhalb des sichtbaren Bereichs in kleinen Browserfenstern berücksichtigen.

Ein Block-Element nimmt die gesamte zur Verfügung stehende Breite ein, es sei denn, eine geringere Breite wird über width zugewiesen. Wenn in diesem Fall noch ausreichend Platz zur Verfügung steht, können weitere Elemente über float daneben platziert werden. Um dabei einen Textumfluss des Elements zu vermeiden, kann es über margin auf Abstand gehalten werden. Im Gegensatz zu den Zellen in einer Tabellenspalte stellt jedes Block-Element hier eine von den nebenstehenden Elementen unabhängige  Box dar, wie dieses Beispiel verdeutlicht:

<div style="float:left; width:5em; border:2px solid gray;">links floatende Box</div>
<div style="border:2px solid blue;">nachfolgende Box</div>

Erläuterung:

Für die linke Box ist float und width definiert. Der Textinhalt der nachfolgenden Box steht daneben, die Box selbst nimmt in diesem Beispiel die gesamte Fensterbreite ein. Auch die Höhe einer Box richtet sich - sofern sie nicht explizit zugewiesen ist - nach ihrem Inhalt und wird nicht von der Höhe einer nebenstehend platzieren Box beeinflusst. Eine Spaltenaufteilung mit durchgängigen Hintergrundfarben, die in Tabellen-Layouts leicht zu realisieren ist, lässt sich daher in einem CSS-Layout nur umständlich optisch simulieren. Stellen Sie sich die Frage, ob eine klassische Spaltenaufteilung wirklich erforderlich ist oder geringe Anpassungen des Layouts an die begrenzten Möglichkeiten des Box-Modells sinnvoller wären.

Beachten Sie:

Alle Beispiele in diesem Kapitel verwenden eine  Dokumenttyp-Deklarationen für standardkonformen Modus als Voraussetzung für eine korrekte Darstellung des Box-Modells und einiger nicht vermeidbarer Anpassungen für den Internet Explorer.

Warum erst jetzt? Browserbedingte Hürden

CSS Level 1 wurde bereits 1996 als eine unmittelbare Ergänzungssprache (vorwiegend) für HTML entwickelt. CSS Level 2, der weiterentwickelte aktuelle Standard, wurde bereits 1998 veröffentlicht und ermöglicht anspruchsvolle CSS-Layouts und Seitenaufteilungen, die zuvor nur durch Verwendung von Frames oder Tabellen möglich waren. Leider können selbst manche aktuellen Browser die neu hinzugekommenen Gestaltungsmöglichkeiten von CSS Level 2 noch immer nicht 100%ig umsetzen. Besonders der Internet Explorer weist diesbezüglich große Lücken und Abweichungen vom Standard auf. So verwendet er selbst in der aktuellen Version 6 im abwärtskompatiblen  Quirks-Modus ein anderes Box-Modell, das bei CSS-Layouts oft gesondert zu berücksichtigen ist.

Noch ältere Browser wie Netscape 4 setzen nur einen Bruchteil von CSS Level 2 korrekt um. Da diese aber weitgehend nicht mehr genutzt werden, gehen inzwischen immer mehr Autoren dazu über, fortschrittliche CSS-Layouts in Verbindung mit CSS-Browserweichen zum  Ausschließen veralteter Browser zu verwenden. Dies ist auch in den Beispielen dieses Kapitels der Fall!

	Mehrspaltige CSS-basierte Layouts
	Filter (nur Microsoft)
SELFHTML/Navigationshilfen Stylesheets CSS-basierte Layouts

© 2005  Impressum