Tabellenloses Webseitendesign

Übersicht und Status

Es wurde schon oftmals geraten, dass Tabellen nicht für layoutbezogene Aufgaben in HTML herangezogen werden sollten. Diese Seite zeigt einen Weg, ein dreispaltiges Layout nur allein mit Hilfe von CSS zu erstellen.

Bei Fragen, Kommentaren und Anregungen wenden Sie sich bitte an Dominique Hazaël-Massieux

Es existiert eine Übersicht mit allen verfügbaren Übersetzungen dieses Dokuments

Einleitung

HTML ist eine strukturelle Sprache, was bedeutet, dass sie dazu verwendet wird - oder sollte - einem Text eine Struktur zu verleihen mit Hilfe von Tags.

Jedoch, seit der Einführung von Tabellen in HTML, werden diese sehr oft für layouttechnische Zwecke benutzt, meistens um eine Seite in mehrere Spalten zu unterteilen. Neben der Tatsache, dass es die eigentliche Bestimmung von HTML verletzt, hilft es in vielen Fällen überhaupt nicht weiter, die wir unter fehlerhaftem Interpretieren in manchen Zusammenhängen zusammenfassen können. (Darstellungsfläche auf dem Monitor, Behinderungen von Besuchern)

Dieses Dokument beschreibt einen Weg, ein dreispaltiges Layout zu erstellen und bietet weiterführende Informationen zu weiteren Layouttechniken.

Layoutbeschreibung

Die Technik, die im Folgenden beschrieben wird, wird auch auf der Seite für W3C-Anfänger benutzt und bietet ein Dreispalten-Layout mit den folgenden Merkmalen:

• Der Text in der Mitte der Seite erscheint als erstes im Quelltext, was bedeutet, dass es das erste ist, was ein Browser lädt, der kein CSS unterstützt oder ein Textbrowser ist.
• Die linke Spalte und die rechte folgen der Reihe nach.

Dieses Layout eignet sich hervorragend für Webseiten, da es den kompletten Text in der Mitte hat und an den Seiten jeweils Platz für Linklisten bietet.

Eine kleine Einschränkung hierbei ist, dass es auf Browsern mit einer mIsErablen CSS-Implementierung nicht wie gewünscht dargestellt wird, degeneriert im schlimmsten Fall jedoch zu einem netten vertikalen Layout.

Das Layout wurde auch auf diese Seite hier angewendet, damit man sich direkt ein Bild davon machen kann.

Implementierung

Dieses Layout benutzt CSS-absolute Positionierung. Wenn wir drei Container auf der HTML-Seite definieren (<div id="main">, <div id="list1" class="link-list">, <div id="list2" class="link-list"> ), können wir folgende CSS-Style-Attribute zuweisen:

/* Eigenschaften, die beide Listen gemein haben */
div.link-list {
        width:10.2em;
        position:absolute;
        top:0;
        font-size:80%;
        padding-left:1%;
        padding-right:1%;
        margin-left:0;
        margin-right:0;
}
/* Wir lassen ein wenig Platz an den Seiten durch Einsatz der margin-* Eigenschaften */
#main {
        margin-left:10.2em;
        margin-right:10.2em;
        padding-left:1em;
        padding-right:1em;
}
/* und dann setzen wir jede der Listen an den vorgesehenen Platz */
#list1 {
        left:0;
}
#list2 {
        right:0;
}

Die Idee ist, den Hauptcontainer an den Seiten mittels margin-left und margin-right zuzuschneiden und dann die Seitencontainer unter Benutzung von position:absolute einzupassen. Die obere linke, bzw. obere rechte Ecke bekommt die Koordinaten (0,0).

Um die Browser, die mit so einem fortgeschrittenen Stylesheet nicht umgehen können, davon abzuhalten, es zu laden, können Sie es folgendermassen einbinden: <style type="text/css">@import url('your-stylesheet-url');</style>.