Zum Textbeginn springen Zur Navigation springen

CSS 2.1 ::Tutorials

CSS-Layouts basiert auf Positionierungen

Allgemeines

Dieses Tutorial erklärt den Aufbau von rein CSS-basierten Website-Layouts und bietet die Layouts zum Herunterladen an. Es ist in zwei Abschnitte gegliedert: Teil 1 (diese Seite) konzentriert sich auf position-gesteuerte Layouts. Es wird ein einfaches Vier-Punkte-Programm vorgestellt, mit dessen Hilfe sich Layouts mit einer beliebigen Anzahl von Spalten erstellen lassen. Teil 2 behandelt Layouts auf der Basis der Eigenschaften float und clear.

Erklärt werden Layouts mit oder ohne Kopfteil und mit oder ohne Fußteil. Alle Layouts passen sich der Breite des Ausgabefensters an. Wer reine fließende Layouts erstellen möchte, muß die in Pixeln angegebenen Längenwerte durch Werte in Ems oder Prozenten ersetzen. Am Ende des Artikels wird noch auf die Berücksichtigung der Webzugänglichkeit eingegangen.

Zur besseren Erkennbarkeit sind in den Beispielen alle Elemente DIV, die dem Layout dienen, mit einem Rahmen und einem Randabstand versehen. Beides ist in der Praxis nicht immer unbedingt nötig.

Anfang (oder 'ein'-spaltiges Layout)

An den Anfang stellen wir ein einfaches Element DIV, dass den Inhalt enthält und den BODY der Seite ganz ausfüllt: Beispiel 1. So ein einspaltiges Layout ist in einigen Fällen genau das, was der Kunde wünscht. Man sollte jedoch darauf achten, dass sich bei den heute üblichen 1024 Pixeln Bildschirmbreite sehr lange Zeilen ergeben können, die schwerer lesbar sind.

Nun werden einige einwenden, dass ein einspaltiges Layout sinnlos ist, da man alle notwendigen Eigenschaften auch am Element BODY deklarieren kann. Das ist richtig, darüber hinaus gibt es sogar Eigenschaften, die einige Browser nur für das Element BODY korrekt darstellen. Andererseits hat man durch die zusätzliche Ebene mehr Gestaltungsspielraum. Ob man sein Layout nun direkt im BODY notiert oder noch mit einem Element DIV einfasst, ist deshalb letztendlich eine Frage des Einzelfalls und des persönlichen Geschmacks.

Zwei Spalten

Vor das statisch positionierte Element stellen wir ein zweites, etwas schmaleres Element DIV, das z. B. ein Menu enthalten könnte. Wie sich dieses im normalen Elementfluß verhält, zeigt Beispiel 2.

Es ist nun aber unser Ziel, dass der Hauptteil mit dem Inhalt der Seite auch am oberen Rand beginnt und neben dem zweiten Element steht, nicht darunter. Das geht am einfachsten, indem wir das zweite Element absolut positionieren. Damit entfernen wir es aus dem normalen Elementfluß und der Hauptteil rutscht nach oben, siehe Beispiel 3.

Auch das ist noch nicht das Ergebnis, was wir wirklich wollen, denn das absolut positionierte Element bedeckt nun einen Teil der Inhalte. Das ändern wir, indem wir den Hauptteil mit einer entsprechend großen margin auf der linken Seite versehen und damit ausreichend Platz schaffen.

Gleichzeitig wollen wir die Angaben zur absoluten Positionierung des zweiten Elementes noch präzisieren. Der Ausgangswert für absolute Positionierungen ist die Ecke oben links. Deshalb wurde unser zweites Element automatisch oben links positioniert. Dennoch sollten wir auch in so einem Fall immer die Deklarationen für top und left mit angeben. Wir benötigen diese beiden Eigenschaften in den Fällen, in denen wir das Element nicht direkt in der Ecke des Bildfensters platzieren wollen, oder wenn uns die Eigenschaft margin dafür nicht zur Verfügung steht oder wenn wir das Layout einmal umstellen wollen.
Beispiel 4: zweispaltiges Layout mit Menü links ohne Header.

Damit haben wir uns die grundsätzlichen vier Punkte für CSS-basierte Layouts erarbeitet. Man könnte sie als ein Vier-Punkte-Programm bezeichnen, denn sie müssen in jedem position-basierten Layout beachtet werden. In der folgenden Liste sind die wesentlichen Punkte des bisher erstellten Layouts noch einmal zusammengefasst:

Ein statisch positioniertes Block- Level- Element (DIV), dessen margin auf einer Seite stark vergrößert ist und das dadurch Platz für ein absolut positioniertes Element schafft;
Ein absolut positioniertes Block- Level- Element (DIV) mit Attribut ID, das in der verbreiterten margin des Block- Level- Elements aus (1.) Platz findet;
Ein damit korrespondierender Identifizierer im Stylesheet (im Beispiel #left), durch den das absolut positionierte Element DIV eindeutig bezeichnet wird; und
Die Positionierung dieses Elements mit den Eigenschaften top und left bzw. right.

Ein mit diesem Programm erstelltes Layout funktioniert in allen modernen Browsern: IE/Win 5+, IE/Mac 5+ Mozilla 1+, Opera 6+, Safari, iCab, Konqeror. Natürlich muß man sich nicht immer stur an dieses Programm halten. Wer bereits etwas Erfahrung gesammelt hat, wird durch ein paar einfache Variationen schnell ein komplexeres Layout erstellen können.

Wenn wir jetzt das 'Menü'-DIV von links nach rechts umsetzen wollen, müssen wir nur diese vier Punkte von 'links' auf 'rechts' umstellen.
Beispiel 5: zweispaltiges Layout mit Menü rechts ohne Header.

Drei Spalten

Die beiden vorangegangenen Beispiele zeigen jeweils ein klassisches zweispaltiges Layout aus Hauptteil und Menuteil, wobei das Menu links oder rechts stehen kann. Selbstverständlich können wir beide auch kombinieren, indem wir die oben genannten vier Punkte auf beide Seiten anwenden — dadurch erhalten wir ein dreispaltiges Layout.
Beispiel 6: dreispaltiges Layout ohne Header.

Wir sehen, dass die absolut positionierten Elemente immer eine feste Breite haben und die Inhalte des statisch positionierten Elements in der Breite den übrig bleibenden Rest der Gesamtbreite ausfüllen.

Alternativ ist es auch möglich, beide absolut positionierten Elemente DIV auf derselben Seite zu haben, z. B. für Inhaltsangaben, News, Linklisten usw., die direkt neben einander erscheinen sollen. Die Inhalte stehen dann auf der gegenüberliegenden Seite. Auch hier müssen wieder die bereits bekannten vier Punkte entsprechend angepasst werden.
Beispiel 7: dreispaltiges Layout ohne Header, Alternative.

An dieser Stelle ist noch ein Hinweis angebracht für die Benennungen der Identifizierer. Sie wurden hier mit #left und #right bezeichnet, da die zugehörigen Elemente nur die rechts und links stehenden absolut positionierten DIVs sind. Generell sollten diese Benennungen sich aber nach dem Zweck der DIVs richten, nicht danach, wo sie im Layout in diesem Moment gerade stehen. Anders als tabellenbasierte Layouts, lässt sich ein CSS-basiertes Layout leicht innerhalb von zwei Minuten umstellen und so kann es passieren, dass nach einer künftigen Änderung des Layouts z. B. das mit #left benannte DIV auf der rechten Seite zu stehen kommt.

Mehr Spalten

Mit der oben beschriebenen Technik können wir noch weitere Spalten in unser Layout einfügen — hier wird noch ein vierspaltiges Layout gezeigt:
Beispiel 8: Layout mit vier Spalten.

Theoretisch können wir hier beliebig viele Spalten einrichten. Wir müssen nur darauf achten, dass mit jedem neuen absolut positionierten Element die Randabstände des statisch positionierten Elementes entsprechend eingestellt werden. Praktisch hat dies jedoch seine Grenzen — nicht nur durch die optische Erscheinung, sondern auch durch die Tatsache, dass nicht alle Browser die Eigenschaft overflow korrekt interpretieren, so dass unter Umständen einige Spalten zu breit dargestellt werden und dadurch teilweise ihre Nachbarspalten verdecken.

Der große Vorteil hier wie in allen anderen CSS-basierten Layouts ist aber, dass nur soviele Spalten erstellt werden wie letztlich wirklich gebraucht werden. Es sind keine Extraspalten für Spacer-Gifs oder andere Abstandhalter mehr nötig, wie man sie früher verwendete.

Flexible Spalten

Der Nachteil der bis hierhin entwickelten Layouts liegt in der relativ stark ausgeprägten Starrheit der Seitenteile mit fester Breite. Wer sich die Beispiele ansieht und dabei die Breite des Browserfensters verändert, sieht, was gemeint ist: Änderungen der Breite des Bildschirm werden allein auf die Hauptspalte abgewälzt.

Das lässt sich vermeiden, indem wir die absoluten Längenangaben der Spaltenbreiten und margins durch Prozentangaben ersetzen. Dadurch passt sich jede Spalte unseres Grids automatisch an die aktuelle Bildbreite an:
Beispiel 9 zeigt ein Layout mit flexiblen Spalten.

Ebenso problemlos können wir einen Mix aus festen und flexiblen Spalten verwirklichen. Hier kommt einer der großen Vorteile dieses Layouts zum Tragen, nämlich dass die Breite des Hauptteils nicht explizit vorgegeben ist, sondern sich nach der Bildbreite und den Breiten der Nebenspalten richtet.
Im Beispiel 10 kann man das gut beobachten, wenn man die Fensterbreite ein wenig variiert. Nur die Spalte ganz rechts bleibt gleich, alle anderen sind veränderbar.

Jetzt wollen wir dem bisher entwickelten Layout einen Kopfteil hinzufügen und gehen dazu vom Beispiel 6 aus. So ein Header braucht im Grunde genommen keine besonderen Positionierungsangaben. Wenn er im Dokument vor dem Hauptteil mit dem Inhalt steht, kann er im normalen Elementfluß bleiben und wird dann automatisch über dem Hauptteil abgebildet.
Beispiel 11.

Das vorangegangene Beispiel 11 macht deutlich, dass die beiden absolut positionierten Elemente bezüglich des Layout nicht vom Kopfteil abhängig sind und ihn deshalb teilweise verdecken. Die einfachste Möglichkeit, dies zu vermeiden, ist, die beiden Seitenteile unterhalb des Headers zu positionieren. Die Höhe des Headers müssen wir dazu explizit festlegen.

An dieser Stelle tritt ein kleines Problem auf, das aber nur für den IE/Win bis Version 6 relevant ist. IE/Win 6 ignoriert in einigen Versionen den oberen Außenabstand (margin) des ersten statisch positionierten Elements, wenn dieses Element eine feste Höhe hat und wenn gleichzeitig absolut positionierte Elemente vorhanden sind. Das bedeutet, dass in unserem Beispiel der Abstand zwischen Header und oberem Bildrand nicht mehr vorhanden ist. Als Umgehung definieren wir den Abstand zunächst innerhalb der normalen Regel für das Element BODY mit Hilfe der Eigenschaft padding-top. In einer zweiten Regel für BODY machen wir uns dann zunutze, dass IE/Win 6 den Kindselektor ebenfalls nicht erkennt. Dort deklarieren wir das padding für standardstreue Browser wieder mit '0'. Durch dieses Umgehungsverfahren lassen sich übrigens auch eine Reihe von anderen Problemen lösen, die der IE/Win 6 ebenfalls aufwirft.
Beispiel 12: dreispaltiges Layout mit Kopfteil, Lösung a.

An diesem Beispiel kann man deutlich sehen, dass die feste Höhe des Kopfteils bei dieser Lösung immer noch eine Einschränkung bedeutet. Um hier flexibler zu sein, gehen wir anders an die Sache heran. Wir wissen, dass die Position des Hauptteils von der Höhe des Headers abhängt. Deshalb definieren wir die beiden Seitenteile als Kindelemente des Hauptteils. Den Hauptteil selbst positionieren wir relativ, dadurch bezieht sich die absolute Positionierung der Seitenteile nicht mehr auf das Stammelement, sondern auf den Hauptteil. Zusätzlich müssen wir negative Werte für einige margins deklarieren, damit die Seitenteile nicht den Inhalt verdecken.

Seltsamerweise interpretiert IE/Win 6 die negativen margins für den rechten Seitenteil falsch. Als Abhilfe nutzen wir auch hier das bereits oben beschriebene Umgehungsverfahren mit dem Kindselektor.
Beispiel 13: dreispaltiges Layout mit Kopfteil, Lösung b.

Als Variation dieses Layouts können wir den Header auch in der gleichen Breite wie den Hauptteil mit dem Inhalt anlegen und die Seitenteile wieder ganz oben am Rand platzieren.
Beispiel 14: dreispaltiges Layout mit Kopfteil, Variation.

Dies ist auch möglich mit nur zwei Spalten. Dazu lassen wir einfach einen Seitenteil weg (im Beispiel den linken) und passen die entsprechenden Randabstände von Kopfteil und Inhaltsteil daran an.

Beispiel 15.

Jetzt wollen wir unser Layout noch mit einem Fußteil versehen. Auch dazu gibt es mehrere Möglichkeiten. In diesem Fall notieren wir den Fußteil als normales Block- Level- Element, das im Elementfluss auf den Hauptteil folgt. Am einfachsten ist es, wenn der Footer genauso breit wird wie der Hauptteil: die Breite der margins auf beiden Seiten ist hier auf die gleichen Werte wie für den Hauptteil gesetzt. Ein Vorteil dieser Form ist, dass der Seitenfuß so nicht von den Seitenteilen verdeckt werden kann, sollten diese einmal länger werden. Das Beispiel 11 lässt sich, wenn es sein muß, auch unsymmetrisch anlegen:

Beispiel 16: dreispaltiges Layout mit Kopf- und Fußteil, symmetrisch
Beispiel 17: dreispaltiges Layout mit Kopf- und Fußteil, unsymmetrisch.

Gelegentlich wird explizit verlangt, ein Layout so anzulegen, dass der Seitenfuß über die gesamte Bildbreite geht. Dazu müssen dann lediglich die margins an beiden Seiten geändert werden.
Beispiel 18: dreispaltiges Layout mit Kopf- und breitem Fußteil

Das hier gezeigte Beispiel hat den Nachteil, dass die absolut positionierten Elemente an beiden Seiten den Fußteil verdecken können, wenn sie lang genug sind bzw. wenn der Hauptteil relativ kurz ist. Das ist selbst dann der Fall, wenn die beiden Seitenteile als Kindelemente des Hauptteils definiert sind (siehe Beispiel 19). Es gibt aber bis heute keine von allen Browsern unterstützte Möglichkeit, den Fußteil mit Hilfe von Positionierungsregeln so zu platzieren, dass er immer unterhalb aller drei Elemente liegt. Wenn wir das erreichen wollen, sollten wir uns für unser Layout der Floatierungsregeln bedienen. Das wird im zweiten Teil dieses Tutorials beschrieben.

Verbesserung der Webzugänglichkeit

Der Ausdruck 'Webzugänglichkeit' bedeutet im Klartext, dass wir die Inhalte unserer Seite für Menschen zugänglich machen, die nicht wie üblich einen PC-Bildschirm benutzen können. Sie verwenden z. B. Screen-Reader oder Brailleleser. Die Optimierung unserer Webseiten für PDAs, Handhelds oder Smartphones wird im Artikel Layouts für Kleinbildschirme erläutert.

Brailleleser und Screen-Reader arbeiten beide nach demselben Prinzip: alle Inhalte der Seite werden in der Reihenfolge ausgegeben, d. h. vorgelesen, in der sie im Quelltext notiert sind. Das visuelle Design, das Positionierungen, Floats und/oder Angaben zu Breite und Höhe enthält, spielt dabei keine Rolle. Das bedeutet, dass Seitenkopf und Navigation, die im Quelltext vor dem Hauptteil notiert sind, auch Punkt für Punkt vor dem Hauptteil vorgelesen werden.

Normalsichtige Menschen lesen eine Webseite nicht sequentiell, sie können bei jeder Website direkt mit dem Lesen des Textes beginnen und die Navigation zunächst ignorieren. Sehbehinderte können das nicht, sie sind auf die Reihenfolge der Abarbeitung durch ihr Vorleseprogramm angewiesen. Deshalb war es zu Zeiten des tabellenbasierten Webdesigns ein besonderes Problem, die Zugänglichkeit des Inhalts einer Webseite zu verbessern. Vielfach wurde dazu ein Link vor der Navigation eingesetzt, über den der Surfer direkt zum Textanfang springen konnte.

In CSS-gesteuerten Layouts lässt sich das Problem leichter lösen. Da die beiden Seitenteile absolut positioniert sind, spielt es keine Rolle, wo sie im Quelltext stehen. Dazu sehen wir uns noch einmal das Beispiel 13 von oben an. Dort sind beide innerhalb des Hauptteils vor dem Inhalt notiert. Wenn wir sie einfach hinter den Inhalt des Hauptteils verschieben, ändert das an der visuellen Ausgabe gar nichts, ein Screen-Reader liest dann aber den Hauptteil zuerst vor: Beispiel 20. Auch das Stylesheet braucht dafür nicht geändert zu werden.

Ganz 100%-ig ist diese Lösung aber nicht, denn genau genommen wird der Seitenkopf noch vor dem Hauptteil vorgelesen. Das ist im Beispiel 16 unumgänglich, denn er ist statisch positioniert (damit ist er Teil des normalen Elementflusses) und geht dem Hauptteil im Quelltext voran. Meistens enthält so ein Header ohnehin nur ein wenig Text, ein Firmenlogo und vielleicht noch ein Werbebanner. Deshalb lohnt es oft den Aufwand nicht oder wird vom Kunden auch gar nicht gewünscht, den Seitenkopf für eine Gruppe von Besuchern an das Ende der Seite zu verschieben. Dennoch: unmöglich ist das nicht. Im nächsten Absatz sehen wir uns das einmal an.

Wir wollen erreichen, dass ein Screen-Reader den Hauptteil vor dem Kopf der Seite vorliest, aber gleichzeitig auf dem Bildschirm der Seitenkopf oberhalb des Hauptteils erscheint. Dazu müssen wir ein wenig mehr Aufwand treiben. Zunächst positionieren wir den Header der Seite absolut und geben ihm eine feste Höhe. Den Hauptteil versehen wir oben mit einem antsprechend großen Außenabstand, in den der Seitenkopf hineinpasst, wie im Beispiel 21.

Im Beispiel 17 sehen wir aber auch, dass die Breite des Headers sich nicht der Breite des Bildschirms, sondern der Breite der Inhalte anpasst. Die einzige Möglichkeit, den Header auf die gesamte Bildbreite auszudehnen, ist durch die Deklaration width:100%. Das bedeutet aber, dass padding, border oder margin am Seitenkopf die Box über die Bildschirmbreite hinaus ausdehnen würden.

Deshalb umgeben wir das Element div#header mit einem weiteren Element div und teilen die notwendigen Deklarationen auf die beiden verschachtelten Boxes auf. Die äußere Box erhält die Deklarationen zur Positionierung und Höhe, an der inneren Box definieren wir Farben, Hintergründe, Abstände, Breite usw. Das Ergebnis sehen wir in Beispiel 22.

Damit haben wir ein Website-Layout kreiert, nur mit Hilfe von CSS, das sich automatisch der Fensterbreite anpasst, dessen einzelne Bestandteile sich beliebig ändern lassen und dessen Hauptinhalt für Sehbehinderte ganz am Anfang der Ausgabe steht.
TOP

Notizen: