CSS Spielwiese

Seiten gestalten ohne Tabellen
Einfache Beispiele für tabellenfreies Webdesign mit zwei- oder dreispaltigem Layout, Kopf- und Fußbereichen, festgezurrt in der Breite oder fließend je nach Fenstergröße.

Die optimale Zeilenbreite
Wie lang darf eine Zeile sein, damit ein Text flüssig gelesen werden kann? Ich habe eine Testseite erstellt, auf der man dieses interaktiv mit verschiedenen Schriftgrößen und Schriftarten ausprobieren kann.

Stylesheet austauschen
Mein Style Switcher, mit dem alle Seiten dieser Website in alternativen Designs dargestellt werden können. Realisiert mit unterschiedlichen Stylesheets, JavaScript und Cookies.

Formulare ohne Tabellen
Formularfelder und Beschriftungen passgenau neben- und untereinander zu positionieren geht auch ohne Tabellen. Und grafisch aufpeppen lassen sich Formulare mit CSS auch.

Formatierung von Listen
HTML-Listen sehen immer gleich aus? Das stimmt nicht. Ich habe mal ein bisschen rumgespielt.

display: inline | block | none
Listen sind immer senkrecht angeordnet und Links stehen neben einander, wenn sie nicht durch einen Zeilenumbruch getrennt werden? Das muss nicht sein. Experimente mit den display-Attributen.

Navigations-Menüs flexibel gestalten
Das Navigationsmenü einer Website ist eigentlich eine Liste von internen Links. Doch es wird selten als Liste verwirklicht. Dabei stehen einem damit alle Möglichkeiten von CSS zur Verfügung.

Anmerkungen und Marginalien
Anmerkungen und Kommentare passgenau neben einen Fließtext zu positionieren geht mit Tabellen nur unzureichend und auch mit CSS ist das nicht leicht zu verwirklichen. Hier ein Versuch.

HTML-Hilfe
Das acronym-Element sinnvoll eingesetzt.

Versuch und Irrtum

Auf diesen Seiten habe ich ein wenig mit dem Webdesign per CSS herumgespielt. Das ist wie ich finde die beste Methode, sich mit den Prinzipien der neuen Form der Erstellung von Webseiten vertraut zu machen (und natürlich nicht nur dafür). Kein Buch, kein Online-Tutorial und auch nicht das Abgucken von fremden Seiten kann die eigene Erfahrung ersetzen.

Trial and Error - und Fehler und Frustrationen gab es viele. Hauptsächlich war es das unterschiedliche Verhalten der Browser. IE, Netscape, Mozilla und Opera in den verschiedensten Versionen waren meine Testkandidaten, allerdings nur mit Windows als Betriebssystem. Sollte ein Besucher mit Linux oder Mac diese Seiten besuchen, wäre ich für Hinweise dankbar!