Cascading Stylesheets Stil mit <Stil>
Cascading Stylesheets Stil mit <Stil>
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