Beispiel: Spaltensatz

HTML und XHTML besitzen die einzigartige Möglichkeit, Webseiten unter voller Nutzung des Browserfensters darzustellen. Da die Mehrheit der Bildschirme querformatig ist, wird bei reiner Textdarstellung und höherer Bildschirmauflösung der Text langer Zeilen wegen -wie dieser hier- nahezu unlesbar. Kluge(?) Webseitengestalter sind darauf verfallen, mit Hilfe von Tabellen den genutzten Bereich einzuengen. Damit kann man dann Seiten wie auf Papier gestalten, der Vorteil von HTML/XHTML bleibt ungenutzt.
Natürlich wäre es zunächst kein Problem, mittels Tabellen auch zwei oder drei Spalten zu realisieren, innerhalb derer der Text frei fließen kann, allerdings wird es dann bei kleineren Bildschirmabmessungen eng. Außerdem wollen speziell die Zeitungsmacher genau den Fließtext nicht, weil feste Breiten es ermöglichen, siehe oben, so zu gestalten, wie man es mal gelernt hat. Wozu umlernen, wenn die Internet-Nutzer sich auch die Primitiv-Lösung gefallen lassen?

Darum verschwenden sie Platz auf meinem Bildschirm und ich frage mich: Warum bleiben sie nicht gleich beim Papier?

Die bessere Lösung bleibt die Gestaltung der Seite unter Nutzung dessen, was technisch möglich ist und das ist für langen Lesetext eindeutig der Spaltensatz. Natürlich kann eine Spalte nicht beliebig hoch werden, deshalb empfiehlt sich so etwas wie eine Aufteilung nach "Seiten".

Unter HTML ist die übliche und einfach zu handhabende Lösung die Tabelle. Die ist unter XHTML aber für diesen Zweck verboten. Dort sollen Tabellen Tabellen sein, die ggf. zellenweise zusammen mit zugehörigen Überschriften verlesen werden können.
Achtung: Bei Verstößen gegen das erwähnte Verbot ist nicht mit Abmahnungen zu rechnen!

(Ersatz-)Spaltensatz mit CSS

Die Style-Vorschriften für Spaltensatz:
.kasten {
clear : both;
padding : 5px;
border : 1px solid gray;
background-color : white;
}
.links {
float : left;
width : 49%;
margin : 0;
padding : 10px 0;
}
.rechts {
float : right;
width : 49%;
margin : 0;
padding : 10px 0;
}

Sind nun alle Probleme gelöst? Nein, schon dreispaltiger Satz gelingt nicht mehr auf so einfache Weise.

Seitenende, Kopf einer neuen Seite

Neuer Bereich, wahlweise nutzbar für Spalten oder reinen Fließtext, wie gewohnt. ####### ######### ########### #####

CSS Kurs, © Rolf Hirte, 2001/2007

Valid XHTML 1.0!CSS-Validierung