Gastautor 28. Juni 2006

CSS Zebratabelle, Layouts und Techniken

Kein Beitragsbild

Nein, die Zebra-Tabelle gehört nicht zum MSV Duisburg. Spielen kann man mit ihr trotzdem. Das Anpassungswunder zeigt neue Möglichkeiten. Außerdem: Menüs, Schieberegler, Formulare, Layoutout-Techniken und ein schicker Bildwechsler.

Zebra Tabellen
Auch wenn Tabellen zum Layouten nicht mehr gebraucht werden, sie erfüllen noch immer einen nützlichen Zweck. Eben deshalb ist die Entwicklung nicht stehen geblieben. Jop de Klein stellt uns seine dynamische Variante der „Zebra Tabelle“ vor.

Screenshot

Anpassungswunder
Ein „Liquid-Design“, welches sich stets der zur Verfügung stehenden Breite des Browsers anpasst ist nicht in allen Fällen hinreichend, es bleiben immer wieder Wünsche offen. Neue Ideen operieren listiger mit dem Problem. Zum Beispiel das CSS Drop Column Layout. Hier brechen quasi die Spalten eines Layouts um. Je ausladender das Browserfenster ist, desto mehr Spalten füllen die Breite. Ist der zur Verfügung stehende Platz dagegen schmal, ordnen sich die Spalten untereinander an.

Typisch CSS
Eine ansehnliche Bibliothek von Dynamic Drive. Enthalten sind 12 typische CSS-Aufgaben, die vor allem das Menü betreffen. Übersichtlich mit Beispielen, Images und schnell kopierten Quellcodes.

Screenshot

Tolle Formulare
Jeff Howden hasst mittelmässige Formulare und hat sich selbst an die Arbeit gemacht. Eine wirklich ansehnliche Vorführung, die als Studie gedacht ist.

Layout-Techniken
Auch Damien du Toit hat etwas für uns zusammengestellt. Nämlich all das, was er zwischen „fixed“ und „fluid“ noch an CSS-Techniken für das Seitenlayout findet konnte. Als da wären: „Resolution dependent“, „Elastic“, „Jello“, „Progressive“ und „Constrained“. Wem das zu unbekannt vorkommt, die passenden Links sind gleich dabei.

CSS Schieberegler
Die Bastler unter den Lesern werden sich freuen. Ein Art Schieberegler hat Peter Burkes konstruiert. Und zwar ohne den Einsatz von Java, Javascript, Flash oder Grafiken. Gleich fünf verschiedene Versionen gibt es davon. Es handelt sich um reine CSS-Container. Wie das wohl möglich ist…?

Screenshot

Bildwechsler
CSS gibt sich noch immer erfindungsfreudig und probiert sich aus. Hier ein einfacher, kleiner und standardkonformer Image Switcher, der ungewöhnlicherweise auf Listen beruht.

Dr. Webs exklusiver Newsletter
Hinweise zur Protokollierung der Anmeldung, dem Einsatz von MailChimp als Versanddienstleister und zu den Widerrufsrechten findest Du in unseren Datenschutzhinweisen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.