(X)HTML / CSS

Layouts mit <Div>'s und CSS

Layout linksbuendig 1 Layout linksbuendig 2 Layout linksbuendig 3 Layout zentriert 1 Layout zentriert 2 Layout zentriert 3 Layout flexibel Adventure Layout Wellness Layout

Eine Demonstration, wie sich mit CSS designen lässt. Inhalt und Struktur sind komplett getrennt. Das Layout und Design ist in den CSS-Dateien festgelegt.

Die HTML-Datei mit CSS-Umschalter: css-layout.htm (Klicken Sie dort auf die verschiedenen Layouts)

Die CSS-Dateien:

Für diese Layouts sind Farben und Formate der Inhalte in jeweils eigenen CSS-Dateien gespeichert und werden über den Befehl @import: url(xyz.css) in die Haupt-Stylesheetdatei importiert. Ausserdem wurden horizontale Menüs ausgelagert.

Mit Hintergrundgrafiken sind folgende Layouts ausgestattet. Alle Informationen befinden sich in einer einzigen Stylesheet-Datei, was etwas unübersichtlich ist. Versuchen Sie selbst, Farben/Hintergründe und Inhaltsformate in neue Stylesheet-Dateien auszulagern.

Diese Dateien mit Grafiken als Zip-Datei: css_layouts.zip

Navigation: Menüs mit Listen

Menü als Liste CSS-formatiert

Artikel zum Thema

 

Links zum Thema