XHTML SVG CSS PHP

Dr. O. Hoffmann

CSS-Layout

Vergessen du mußt,
was früher du gelernt!
(Yoda, Star Wars)

Anfangen

Das von vielen einschließlich mir einst, im letzten Jahrtausend bevorzugte Tabellendesign/layout hat neben den offensichtlichen Vorteilen, mit geringem Aufwand eine gute Raumaufteilung eines Projektes zu erreichen, doch auch einige Nachteile.
Nach der reinen Lehre sollte die Formatierung vom Inhalt getrennt sein, das ist natürlich nicht gegeben, wenn Tabellenelemente für die Anordnung der Elemente der Gesamtseite zuständig sind.
Ein weiteres Argument ist, daß XHTML eine Textauszeichnungssprache ist, was bedeutet, daß ein Element eine Information darüber gibt, wie sein Inhalt zu verstehen und von der Bedeutung her eingeordnet ist. Tabellen sind speziell dazu da, eine Korrelation von zwei Mengen sinnvoll darzustellen, nicht um irgendwelchen Inhalt relativ zueinander anzuordnen. Ein Autor, der Tabellen zu Layoutzwecken einsetzt, zeigt damit ganz offenbar, daß er (X)HTML nicht verstanden hat.
Neben diesen formalen, philosophischen und inhaltlichen Fehlern bietet ein Tabellendesign jedoch auch Probleme für Textdarstellungsprogramme, oder generell, wenn ein barrierefreies, allgemein zugängliches Projekt angestrebt werden soll.
Zudem scheinen Darstellungsprogramme wie Opera und microsoft internet explorer (msie) Probleme damit zu haben, die Kombination von Tabellendesign und Formatierung mit Stilvorlagen (style-sheet, CSS) korrekt darzustellen.
Diese Unterschiede können jedoch auch an den Toleranzen liegen, die dem Darstellungsprogramm von XHTML bei der Darstellung von Tabellen ohnehin eingeräumt werden, um tabellenartigen Inhalt optimal darzustellen und die dann auch ein präzises Layout mit Tabellen unmöglich machen.
Ein weiterer Nachteil von Tabellendesign liegt ferner in der starren Form und dem großen Arbeitsaufwand, wenn das Layout geändert werden soll.

Ziel der ersten Schritte ist es daher, ein schlichtes XHTML-Projekt mittels derartiger Stilvorlagen oder style-sheet zu erstellen, gemäß dem aktuellen CSS-Standard.
Ich werde einzelne XHTML- und CSS-Anweisungen nicht genau erklären, die genaue Syntax sollte entweder bei W3C nachgelesen werden oder bei Stefan Münzens selfhtml-Projekt.
Hier geht es mehr um einfache Beispiele für die Praxis, die zeigen sollen, wie leistungsfähig moderne Darstellungsprogramme derzeit sind, aber auch, welche Anzeigefehler bei älteren Programmen auftreten.
Der geneigte Leser sollte also im Idealfall mehrere Programme parat haben, um die Darstellung der verschiedenen Layouts beurteilen zu können.
Eine gute Auswahl für moderne Darstellungsprogramme der fünften Generation sind ab etwa September 2003 Mozilla (alternativ Iceape, Iceweasel, SeaMonkey, firefox, firebird, netscape 6 oder 7, Galeon, Epiphany und andere mit einer Gecko-Maschine) und Opera 7, 8, 9, 10, 11, 12 soweit verfügbar auch Konqueror 2 (mit Abstrichen bei CSS) und Konqueror 3 oder 4 oder Safari.
Der typische Vertreter eines alten Darstellungsprogrammes der vierten Generation ist Netscape4 - weitere sind Opera 4/5/6 und soweit verfügbar auch msie 5/6.
Als typische Textdarstellungsprogramme seien lynx und elinks genannt, aber auch das Darstellungsprogramm Amaya von W3C hat eine Text-Ansicht. Dessen CSS-Interpretation ist allerdings meist ein Abenteuer - aber es handelt sich ja auch um ein experimentelles Darstellungsprogramm, dessen Stärken anderswo liegen (SVG, MathML etc). Das Darstellungsprogramm Dillo etwa zeigt zwar Bilder, aber kein CSS an, ähnlich wie alte Programme wie Netscape 3.
Als Alternative ist bei meinen Beispielen auch mit jedem Programm das Layout 'Kein CSS' anwählbar, mit dem die Anzeige ähnlich wie bei einem Textdarstellungsprogramm ist beziehungsweise einem ohne CSS-Interpretation - eine entsprechende Option kann ich auch nur für eigene Projekte empfehlen, da dieses keine Mehrarbeit bedeutet, aber eine Anzeige wirklich mit jeglichem Darstellungsprogramm sicherstellt, das wenigstens XHTML beherrscht.

Unter dem Menüpunkt browser gehe ich kurz auf die Problematik verschiedener browser-Generationen und verschiedener gängiger einzelner Darstellungsprogramme ein.
Unter Kochrezept wird eine kurze Anleitung gegeben, wie ein Projekt mit CSS-Layout effektiv erstellt werden kann.
Das Entstehen eines Layouts eines einfachen Einzeldokumentes kann vom Leser Schritt für Schritt mit dem Artikel erstes CSS nachvollzogen werden.
Unter Übung kann dann erprobt werden, wie Elemente mittels Stilvorlagen angeordnet werden können und wie sich bestimmte CSS-Attribute konkret auswirken.
Der Verweis Beispiele führt zu einem in verschiedenen Varianten umgesetzten Projekt einer zugänglichen, barrierefreien Seite.
CSS und PHP zeigt ein Beispiel, wie CSS-Layout mit PHP noch flexibler gemacht werden kann.
Mit einer browser-Weiche wird man sich beschäftigen wollen, wenn ein Layout auch noch für ältere browser angepaßt werden soll. Der Abschnitt CSS-Weiche gibt eine Einführung mit prinzipiellen Ideen zum Vorgehen.
Ein paar weitere Diskussionsbeiträge zu spezielleren Themen sind ebenfalls beigefügt.