Wie baue ich ein tabellenfreies Webseiten-Layout

Die Layouttabelle war vor der Entwicklung der Layoutsprache CSS die einzige brauchbare Möglichkeit, komplexe Layouts zu entwickeln. Seitdem hat sich viel getan: Die Unterstützung für CSS ist so weit etabliert, dass Tabellenlayouts langsam aussterben (sollten). Stattdessen setzt ausgerechnet der Computerverlag Heise konsequent auf Tabellen.

Zunächst einmal muss man verstehen, wie in CSS positioniert und formatiert wird. Alle Elemente – bis auf den body – werden in Div-Containern eingefasst <div>Element</div>. Alle Elemente, die in Div-Containern stehen, lassen sich über externe Stylesheets exakt positionieren.

Die Positionierung erfolgt über die Attribute von position: left, right, top und bottom.Die Höhe und Breite können unabhängig von position mit width und height definiert werden. Das heißt natürlich, dass man nur zwei Attribute von position definieren kann, also entweder left und top oder left und bottom und so weiter. Die Dimension wird über width und height bestimmt.

Alle großen Elemente wie Spalten sollten absolut positioniert werden, sprich:

{position: absolute; left:0; top:0; width: 1000px; height: 200px}

Es gibt die Eigenschaft float, die aber der Internet Explorer nicht unterstützt.

Das könnte unsere Kopfzeile werden, in dieser Kopfzeile können sich Elemente wie Bilder befinden. Im westlichen Kulturkreis liest man von links nach rechts und guckt zuerst nach oben links. Alle großen Container sollten daher von oben links absolut definiert werden. Möchte man etwa ein Objekt unten rechts positionieren, riskiert man, dass das Objekt bei kleinen Bildschirmen außerhalb des Sichtbereiches liegt.

Ein wichtiger Hinweis: Der Screenreader von Blinden greift auf den Quelltext zu und weiß nicht, wie Elemente auf der Seite selbst definiert wurden. Das heißt: Die Elemente der Website müssen im Quellcode genau in der Reihenfolge aufgeführt werden, in der sie auch auf der Seite präsentiert werden. Das heißt in der Regel: von oben links nach unten rechts, wobei die Fußzeile das letzte Element im Quelltext ist. Anders macht es etwa Golem, so dass ein Screenreader hier zuerst die Stellenanzeigen liest, die aber auf dem Bildschirm NACH der Artikelliste angezeigt wird.

Hier meine Seite als Beispiel und hier deren CSS-Code.

2 Gedanken zu „Wie baue ich ein tabellenfreies Webseiten-Layout

Kommentare sind geschlossen.