Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Dr. Web Team 30. Oktober 2006

CSS Layouts und Hilfe

Kein Beitragsbild

Web-Seiten werden immer dynamischer, mobiler und interaktiver. Was man bisher nur von üblichen Desktop-Anwendungen erwarten konnte, ist nun auch im Web möglich – CSS sei Dank.

Cross-browser Web 2.0 Layouts im Office-Look
Web-Seiten werden immer dynamischer, mobiler und interaktiver. Was man bisher nur von üblichen Desktop-Anwendungen erwarten konnte, wird nun auch im Web möglich – und Web-Entwickler lassen nicht lange auf sich warten: sie fangen fleißig mit der Umsetzung neuer Techniken an.

Cross-browser Web 2.0 Layouts with Yahoo UI

Anzeige

Cross-browser Web 2.0 Layouts von Jack Slocum ist ein gutes Beispiel dazu. Gestaltet im üblichen Microsoft Office Look, enthält die Anwendung (fast) dieselbe Funktionalität, die man auch in kostspieligen Software-Paketen findet. Fenster lassen sich schließen, ihre Größe kann verändert werden und die Navigation geschieht mit gewöhnlichen Lesezeichen. Zwar stellt die Anwendung weder Textverarbeitung noch drag’n’drop-Funktionalität zur Verfügung, doch zu welchem Ziel sich die Web-Entwicklung hinbewegt, wird deutlich. Realisiert wurde die Seite mit Yahoo! UI Library, wobei unter anderem Ajax, Javascript und CSS verwendet wurden. (vf)

Codegenerierer für CSS-Layout
Wer Tabellen bei der Umsetzung eines grafischen Konzepts für einen Internet-Auftritt Lebewohl gesagt hat und nun auf CSS und (X)HTML schwört, der muss sich vor der eigentlichen Codierung Gedanken machen, was für DIV-Boxen (Wrapper, Header, Navigation, Inhalt, Fußzeile usw.) er braucht und wie diese ineinander verschachtelt sind.

Screenshot

Die Boxen bekommen dann möglichst semantisch aussagekräftige Namen, damit man auch später noch sofort im Quellcode durchblickt. Ist diese Vorarbeit getan, kann der Markup Maker helfend zur Seite springen und einem die Zeit für das Schreiben der ersten Codezeilen einsparen.

Screenshot

Document Type auswählen, entscheiden, ob das Stylesheet separat oder inline ausgegeben werden soll, und die Div-ID-Namen in der korrekten Reihenfolge runtertippen. Verschachtelte DIVs noch mit der Spacebar einrücken und „Convert to XHTML“-Button drücken. Fertig ist das Layout-Gerippe. (md)

Horizontale Navigation
Ein anspruchsvolles CSS Experiment kommt von Daniel Rubin. Eine horizontale Navigation der Extraklasse. Wie immer gilt in solchen Fällen: Die Sache ist (noch) nicht für den praktischen Einsatz geeignet.

DropDown-Menüs mit grafischer Unterstützung
Warum nicht? Wenn der Browser mitmacht… Hier ist Chris Hesters Vorschlag.

Stus Menüs
Stuart Nicholls‘ Erfindungsreichtum kennt kaum Grenzen, seine Spezialität sind CSS-Menüs. Fast zwei Dutzend finden sich inzwischen – von simpel bis ultrakompliziert.

Schreibe einen Kommentar

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