Beachten Sie bitte, daß die Methoden zum Positionieren für Netscape und Internet Explorer, die auf dieser und den folgenden Seiten beschrieben werden, nicht die einzigen Wege zum Erstellen von Overlays sind. Der Einsatz der beschriebenen Methoden erlaubt es Ihnen aber, eine einzige Seite zu schreiben, die mit allen drei Browsern funktioniert, vorausgesetzt, Sie benutzen ein JavaScript, um das für den jeweiligen Browser passende Style Sheet zu laden und um die Vordergrundebene zu schreiben (diese Scripts werden nach der Erklärung der Positionierung vorgestellt).

Das Erstellen von Overlays in IE 4.0(x) erfordert den Einsatz von relativer und absoluter Positionierung, margins und Layern.

Wie bei Netscape 4.0 sollte der Hintergrundteil des Overlays in einem Element (oder einer Klasse) stehen, das relativ (zum Inhalt der Seite) positioniert ist:

	.hugeding
	{		
		font: 80pt 'Wingdings', 'fantasy';
		color: #FFFF99;
		position: relative;
		}
	

Der Vordergrundteil des Overlays sollte in einem Element (oder einer Klasse) stehen, das absolut psoitioniert ist (innerhalb des Hintergrundelements), aber da es positioniert wird, wollen Sie vielleicht eine spezielle Klasse für diesen Zweck erstellen:

	.shadow3
	{		
		font: Bold x-large 'sans-serif';
		color: #339999;
		position: absolute;
		left: 50pt;
		top: 35pt;
		z-index: 3;
		}
	

Wie Sie sehen, funktioniert hier das Positionieren durch Einsatz der Eigenschaften left und top; die Werte ermitteln Sie am besten durch Ausprobieren. Beachten Sie auch die Eigenschaft Z-index. Wie bei den Layern in Netscape werden auch hier die Elements mit größeren Werten von Z-index über Elementen mit niedrigern Werten dargestellt (der Standardwert ist 1).

Der Inhalt, der mit einem Overlay versehen werden soll, sollte innerhalb des Hintergrundelements stehen, indem Sie das Tag <span> verwenden:

	<p class=hugeding>
	1<br>
	<span class=shadow3 id=layer3>
	Name
	</span>
	</p>
	

Beachten Sie das Attribut class; es gibt den Style für das Vordergrundelement an. Das Atrribut id=layer3 ist für Netscape und IE wird es ignorieren, wenn kein #layer3 im Style Sheets für IE vorhanden ist.

Bernhard Friedrich

doozer@hsguide.com