Flexible Rahmen mit CSS2

Schluss mit grafiklastigen Webseiten: CSS2 (Cascading Style Sheets 2) mit seinem border-Attribut ermöglicht genau die optischen Effekte, für die früher Grafiken nötig waren.

In den Anfangszeiten des Internetbooms habe ich ziemlich hässlichen HTML-Code geschrieben, um Webseiten mit dem Aussehen und Verhalten zu versehen, das ich mir vorgestellt hatte. Ich habe Stunden damit zugebracht, die zahllosen Grafiken zu erstellen, die ich für Mouseover-Effekte und Menüleisten benötigte, nur um hinterher feststellen zu müssen, dass es viel zu lange dauerte, sie mit einem 28,8er-Modem herunterzuladen. Und ich sehnte die Zeiten herbei, wenn eine ausreichende Bandbreite dafür sorgen könnte, dass meine Webseiten rasch geladen würden.

Ironischerweise haben wir inzwischen zwar solche Bandbreiten, doch sind grafiklastige Webseiten ziemlich aus der Mode gekommen. Denn zum Glück ermöglicht nun CSS2 (Cascading Style Sheets 2) mit seinem border-Attribut genau die optischen Effekte, die früher nur mit Grafiken möglich waren.

Seitenlayout

Ich habe früher eine Menge Zeit damit verbracht, mit table-Tags, Blind-GIFs und Hintergrundfarben herumzubasteln, um meinen Seiten das gewünschte Aussehen zu verleihen. Leider war der HTML-Code im Ergebnis oft unnötig aufgebläht. Außerdem war es schwierig und zeitaufwendig, das Layout nachträglich zu ändern.

Mit CSS2 und vor allem seinem border-Attribut kann man das Layout für eine komplette Seite ohne einen einzigen table-Tag oder ein Blind-GIF erstellen. Das Layout in Abbildung A dient hierfür als Beispiel.

Abbildung A
Abbildung A: Beispiel-Layout für eine Webseite

Themenseiten: Anwendungsentwicklung, Software, Webentwicklung

Fanden Sie diesen Artikel nützlich?
Content Loading ...
Whitepaper

ZDNet für mobile Geräte
ZDNet-App für Android herunterladen Lesen Sie ZDNet-Artikel in Google Currents ZDNet-App für iOS

Artikel empfehlen:

Neueste Kommentare 

Noch keine Kommentare zu Flexible Rahmen mit CSS2

Kommentar hinzufügen

Schreibe einen Kommentar

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