Schlagwort-Archive: tabellenfrei

Barrierefrei glücklich – kein Pfusch beim Design

Handwerklich schlecht gemacht ist Design, wenn improvisiert wird. Nachdem wir die Grundlagen tabellenfreier Layouts betrachtet haben, fragen wir uns nun, wie man „Abstand hält“.

Schlechte Designer verwenden dazu das geschütze Leerzeichen oder nonbreaking space, also HTML-Entität &nbsp;. Oder man verwendet das break <br> als Abstandhalter für Absätze. Das ist nicht sinnvoll, früher oder später möchte man eventuell so etwas ändern und muss es dann aufwändig suchen und entfernen. Sinnvoller ist es hier, von Anfang an auf CSS zu setzen. By the way, man sollte auf Inline-CSS nach Möglichkeit vollständig verzichten.

Zum Abstandhalten werden die Eigenschaften margin und padding verwendet. Margin ist der Außenabstand, padding der Innenabstand oder Einbettung. Diese Eigenschaften können etwa für Links, Absätze, Bilder und andere Elemente verwendet werden, auch für div oder span. Werden sie nicht vergeben, wird normalerweise das browserseitige CSS eingesetzt.

Die beiden Eigenschaften lassen sich verfeinern, indem man unterschiedliche Abstände eingibt:

margin-left: 5px; margin-right:4px; margin-top:3px; margin-bottom:2px;

Typographische Abstände lassen sich wie gewohnt definieren über word-spacing oder letter-spacing. Damit kann – was sonst – die Abstände zwischen Worten und Buchstaben regulieren.

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.