1

(Es gibt keine Bilder in der obigen Abbildung. In der style sheet gallery auf der Website von Microsoft finden Sie noch mehr Beispiele.)

Dummerweise wird es hier kompliziert mit Style Sheets, teilweise, da CSS immer noch eine junge Technologie ist und die Implementierung der CSS-Unterstützung nirgends komplett oder standardisiert ist. IE 3.0 behandelte Overlays Streng mit Hilfe der Eigenschaft 'Margin' von Boxen. Später haben sich Microsoft und Netscape darauf geeinigt, daß Overlays durch Positionieren erreicht werden sollten; sie haben sich aber (noch) nicht darauf geeinigt, wie Positionieren genau definiert sein soll. (Positionieren in den drei Browsern wird detaillierter auf den folgenden Seiten behandelt.) Das bedeutet, daß Sie, wenn Sie Positionieren verwenden wollen, separate Style Sheets für jeden Browser schreiben müssen und ein JavaScript einsetzen, um die Seite zu zwingen, je nach Browser des Benutzers das jeweils passende einzusetzen.

Für Overlays müssen Sie ohnehin Scripting einsetzen, da Browser ohne CSS-Unterstützung einfach beide Textblöcke nacheinander darstellen würden, was besonders bei schattiertem Text problematisch ist, da das Ergebnis eine einfache Wiederholung des Absatzes wäre. Die Lösung ist es, ein JavaScript einzusetzen, um den Text mit Overlay nur dann auszugeben, wenn der Browser CSS unterstützt, und sicherzustellen, daß die Seite auch ohne das Overlay immer noch verständlich, wenn auch nicht vollständig, ist. Wir werden uns bald ein Script ansehen, das genau diese Aufgaben übernimmt.

Einige andere Anmerkungen zu Effekten, die Overlays von einem Textblock über einen anderen verwenden:

• Beachten Sie, daß Overlay-Effekte davon abhängen, negative Randeinstellungen für die zweite (obere) Ebene (Layer) zu verwenden. Im Prinzip könnten Sie mit den Randeinstellungen und den Punktgrößen die Werte mathematisch exakt ausrechnen, aber in der Praxis geht es meist schneller, sich durch Probieren an diese Werte heranzutasten.
• Overlay-Effekte können leicht durch Änderungen der Bildschirmauflösung beim Benutzer ruiniert werden, was zu unterschiedlichen Zeilenumbrüchen führt. Wenn Sie also Overlays verwenden wollen, dann empfehle ich eine der folgenden Maßnahmen, um das zu verhindern:

  stellen Sie sicher, daß Sie mit Textblocks arbeiten, die kurz genug sind, damit sie bei keiner Auflösung bzw. bei keiner vernünftigen Breite des Fensters umgebrochen werden

  Stellen Sie das Overlay-Element in eine Tabelle mit festgelegter Breite, um Zeilenumbrüche zu verhindern; normalerweise rate ich aber vom Einsatz solcher Tabellen ab, wenn Sie die Breite nicht unter etwa 470 Pixeln halten, da sonst einige Benutzer vielleicht scrollen müssen, was unerwünscht wäre. Und wenn Sie eine solche geringe Breite einsetzen, dann sehen Benutzer mit hochauflösendem Bildschirm viel freie Fläche auf der Seite.

• Vererbung kann auch Probleme mit Overlays verursachen. Zum Beispiel würde es logisch erscheinen, ein Grundelement und eine Klasse des gleichen Elements (oder zwei Klassen eines Elements) zur Definition der zwei Ebenen einzusetzen. Das funktioniert aber nicht, wenn das Element einen definierten Hintergrund hat, da das Anlegen einer Klasse den Wert für den Hintergrund im Ursprungselement zwar überschreiben, nicht aber entfernen kann. Deshalb wird der Hintergrund der obersten Ebene die untere Ebene überdecken.

Bernhard Friedrich

doozer@hsguide.com