Verlauf
Alle Kapitel anzeigen
CSS Layouts versus tabellenbasierte Layouts
War es bis vor kurzem noch gebräuchlich, mehrspaltige Layouts oder auch mittig zentrierte Webseiten mit Hilfe von Tabellen zu realisieren (table-based Layouts), so bietet CSS mehrere Möglichkeiten, die diese eigentlich missbräuchliche Verwendung von Tabellen nicht mehr erforderlich machen. Das hat abgesehen davon, dass in den xhtml-Dateien keine Eigenschaften mehr vorhanden sind die das Aussehen der Seite betreffen, den Vorteil dass mehrere verschiedene CSS-Dateien auch voneinander gänzlich verschiedene Layouts für einunddiesselbe Webseite anbieten können - und der Benutzer bestimmt für sich, welches dieser Layouts er verwenden möchte.
Bei tabellen-basierten Layouts ist es z.B. nicht möglich gewesen, Navigationselemente einmal links vom Content und ein anderes Mal rechts vom Content auszurichten - dazu musste man die xhtml-Dateien ändern. Ein weiterer Nachteil bei tabellenbasierten Layouts war ihre Wartbarkeit - wollte man z.B. bei einer horizontalen Navigation noch einen neuen Punkt hinzufügen, so war meistens ein aufwändiges Abändern der Tabelle(n) notwendig - damit verbunden auch oft ein neues "Slicen" der Hintergrundbilder in Photoshop o.ä. und bei dynamischen Seiten ein Anpassen der Scripte.
CSS-basierte Layouts können in ihren Abmessungen nicht nur - wie bisher von Tabellenlayouts gewohnt - fixe Größen haben (iced layouts) sondern können sich auch entweder der Browserfenstergröße (liquid layout) oder der eingestellten Schriftgröße anpassen (elastic layout) .
Bei allen folgenden Layouttypen können Position und Ausrichtung rein durch entsprechende Regeln in der CSS-Datei festgelegt werden.
Anmerkung zu den verlinkten Beispiel-Dateien: Zusätzlich zu den absolut notwendigen CSS-Regeln wurden manchmal noch Farb-, Schrift- und Abstandsdefinitionen hinzugefügt, damit die Elemente im Webbrowser besser wahrgenommen und voneinander unterschieden werden können.
Bei tabellen-basierten Layouts ist es z.B. nicht möglich gewesen, Navigationselemente einmal links vom Content und ein anderes Mal rechts vom Content auszurichten - dazu musste man die xhtml-Dateien ändern. Ein weiterer Nachteil bei tabellenbasierten Layouts war ihre Wartbarkeit - wollte man z.B. bei einer horizontalen Navigation noch einen neuen Punkt hinzufügen, so war meistens ein aufwändiges Abändern der Tabelle(n) notwendig - damit verbunden auch oft ein neues "Slicen" der Hintergrundbilder in Photoshop o.ä. und bei dynamischen Seiten ein Anpassen der Scripte.
CSS-basierte Layouts können in ihren Abmessungen nicht nur - wie bisher von Tabellenlayouts gewohnt - fixe Größen haben (iced layouts) sondern können sich auch entweder der Browserfenstergröße (liquid layout) oder der eingestellten Schriftgröße anpassen (elastic layout) .
Bei allen folgenden Layouttypen können Position und Ausrichtung rein durch entsprechende Regeln in der CSS-Datei festgelegt werden.
Anmerkung zu den verlinkten Beispiel-Dateien: Zusätzlich zu den absolut notwendigen CSS-Regeln wurden manchmal noch Farb-, Schrift- und Abstandsdefinitionen hinzugefügt, damit die Elemente im Webbrowser besser wahrgenommen und voneinander unterschieden werden können.
