Cascading Stylesheets Stil mit <Stil>

CSS2-Referenz | HTML-4.01-Referenz | Farben, Zeichen und Maße | Workshop | Externe Links | Impressum | Hinweise

## Beispiel 3: Ein einfaches CSS-Layout

Der Effekt der Seite beruht auf der Eigenschaft `background-attachment: fixed` und der Option, einen Hintergrund zu positionieren. So bleibt das Bild im Hintergrund stehen, wenn das Dokument im Fenster gescrollt wird. Er nutzt insbesondere aus, dass der Ursprung des Koordinatensystems bei der Platzierung das Browserfenster ist und nicht das Element selber oder das HTML-Dokument.

Der kleine Trick der Seite besteht darin, dass zwei Bilder den Hintergrund bilden und dabei perfekt übereinander liegen. Das Hintergrundbild für das body-Element zeigt seinen vollen Kontrastumfang, das andere Hintergrundbild weist einen geringeren Kontrastumfang auf und gehört zu den beiden div-Containern, in denen die Navigation und die Inhalte untergebracht sind.

Positionierte Hintergrundbilder sind also nicht auf die Abmessungen der Elemente beschränkt, für die sie definiert werden. Durch ihre Fixierung auf eine Position im Verhältnis zum Browserfenster können sie über die Grenzen des definierenden Blocks hinausgehen – sie sind allerdings nur innerhalb der Grenzen des Elements sichtbar.

Die Dateien des Beispiels liegen im Ordner wasserzeichen. Kopieren Sie ihn auf auf Ihre Festplatte – er enthält zwei HTML-Dateien Palazzi und Ponte Vecchio, die Stylesheetdateien und die Bilder.

Die Stylesheetdatei simple.css sorgt für eine erträgliche Darstellung der Seite in Netscape 4.x, die zweite Stylesheetdatei magie.css übernimmt die Positionierung für moderne Browser.

Begleitmaterial zu den Beispielen

aus Kapitel 6 und das iframe-Beispiel aus Kapitel 7.7

Vorab: Stylesheets in Macromedia Dreamweaver anlegen

Beispiel 6.1: Stile für Schriftgestaltung

Beispiel 6.3: Ein einfaches CSS-Layout

Beispiel 6.4: Einfach nur Stylesheets

Zu Kapitel 7.7:
Der kleine Bruder des Framesets: iframes

Drucken mit Stylesheets Regeln für den Druck und Beispieldatei

Cascading Styleheets – Stil mit <Stil> • Das Begleitmaterial zum Buch
© media engineering Ulrike Häßler 2002 • Frechen