css styleswitcher - testseite
Auf die Idee bin ich beim Redesign der www.babs-und-rene.de gekommen. CSS sind in diesem Zusammenhang eine wirklich feine Sache. Allerdings auch recht knifflig - es hat schon eine Weile gedauert, bis die Seite vorzeigbar war, zumal die CSS-Spezifikationen immer noch nicht einheitlich in allen Browsern umgesetzt sind (Danke, Microsoft!)
voraussetzungen
für ein funktionierendes Umschalten sind:
- modularer Aufbau der Seite mit <div>s
- damit strikte Trennung des Inhalts vom Design
- das heisst: Auslagerung aller Containerklassen und Formatierungen ins CSS
Ausserdem sollte die Navigation nicht mit Bildern, sondern als Text - formatiert mit Styles - realisiert werden. Deshalb habe ich auch diese Testseite etwas umstricken müssen.
Die nackige HTML-Datei und das aktuelle CSS zum Angucken.
technik
Umgesetzt wurde die Seite mit einem Hauptcontainer (gelb). Dieser kann wie auch immer man will auf der Seite angeordnet und ausgerichtet werden. Darin enthalten sind Container für die Titelbilder (blau), den Textcontainer (rot) mit 5 separaten Containern (grau), der Navigation (2 Container - grau) und dem Footer (unten - grün). Titel, Text, Navi und Footer können jetzt beliebig angeordnet werden - entweder hintereinander oder mit Positionsangabe... Mit Hilfe der SSI kann ich die Seite mit einem Parameter aufrufen, der dann die Nummer des zu ladenden CSS übergibt. Damit wird die Seite neu geladen - allerdings mit neuem Stylesheet - also anders...
test
Zum testen habe ich - zur Zeit - vier Styles zur Auswahl. Wenn mir mal wieder nach Basteln ist, gibts mehr davon. Let's test - bitte switchen Sie hier:
