SELFHTML

Einführung in CSS-basierte Layouts

Informationsseite

nach unten Trennung von Inhalt und Layout
nach unten Das Box-Modell als Grundlage CSS-basierter Layouts
nach unten Warum erst jetzt? Browserbedingte Hürden

 nach unten 

Trennung von Inhalt und Layout

Gratulation! Wenn Sie bis hierhin vorgedrungen sind, haben Sie vermutlich ausreichend Kenntnisse der in diesem Kapitel behandelten Kapitel 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 Seite Frames erkannt oder möchten Seite 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 Seite 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.

nach obennach unten

Das Box-Modell als Grundlage CSS-basierter Layouts

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

Die CSS-Eigenschaft Seite 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 Seite 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>
links floatende Box
nachfolgende Box

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 Seite 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.

nach obennach unten

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 Seite 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 Seite Ausschließen veralteter Browser zu verwenden. Dies ist auch in den Beispielen dieses Kapitels der Fall!

 nach oben
weiter Seite Mehrspaltige CSS-basierte Layouts
zurück Seite Filter (nur Microsoft)
 

© 2005 Seite Impressum