[Cascading Style Sheets]
[Vorherige Seite] [Naechste Seite] [Inhalt dieses Abschnitts] [Home Page]
Positionieren in Netscape 4.0x

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 Netscape 4.0(x) erfordert den Einsatz von relativer und absoluter Positionierung (positioning), Randeinstellungen (margins) und Ebenen (layers).

Der Hintergrundteil des Overlays sollte in einem Element (oder einer Klasse) stehen, das relativ positioniert ist (relativ zum Verlauf des Seiteninhalts):

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

Der Vordergrundteil des Overlays sollte in einem Element (oder einer Klasse) stehen, das absolutel positioniert ist (innerhalb des Hintergrundelements), obwohl die Positionierung auch im Layer-Element erfolgen kann (siehe unten):

	.shadow3
	{		
		font: Bold x-large 'sans-serif';
		color: #339999;
		position: absolute;
		}
	

Sie werden auch einige spezielle layer-Angaben im Style Sheet brauchen. Die Layer sind sehr wichtig, und Overlays in Netscape funktionieren nicht ohne sie. Hier sind die Layer-Angaben für das Overlay-Beispiel auf der vorherigen Seite:

	#layer1
	{		
		position: relative;
		}

	#layer3
	{		
		position: absolute;
		left: 40pt;
		top: 30pt;
		}

	

Beachten Sie, daß die Layer mit größerer Nummer über solchen mit niedriger Nummer dargestellt werden. Elemente erscheinen als Standard im Layer mit der niedrigsten Nummer. Der zweite Layer hätte auch layer2 sein können, aber ich hatte bereits einen layer2 für einen anderen Zweck im Style Sheet. Beachten Sie auch die Postitionierung der Layer für Hinter- und Vordergrund und daß die Position des Vordergrundelements mit den Eigenschaften top und left eingestellt wird; die Werte sind am besten durch Testen herauszufinden. Sie können auch Positionieren für das Element selbst angeben, indem Sie die Eigenschaften margin-top und margin-left einsetzen, aber die Ergebnisse waren weniger gleichmässig. Wenn Sie diese Randpositionen im Element einsetzen, dann werden sie zusätzlich zu den Werten für 'top' und 'left' im Layer angewandt.

Der Inhalt, der mit einem Overlay versehen werden soll, sollte innerhalb des Hintegrundelements stehen, durch Verwenden des <span>-Tags:

	<p class=hugeding>
	1<br>
	<span class=shadow3 id=layer3>
	Name
	</span>
	</p>
	
Achten Sie auf das Attribut class und auch das Atrribut id; diese geben den Style des Vordergrundelements und den Layer an.
Zusätzliche Bemerkungen: die Technik für Overlays mit Hilfe von layer ist eine Erfindung von Netscape und ist nicht Teil der CSS1 Spezifikationen; ich glaube, daß das World Wide Web Consortium offiziell die Ablehnung der Layer-Methode verkündet hat und den Einsatz der Eigenschaft Z-index empfiehlt (wir werden diese Methode auf der folgenden Seite über IE 4.0 ansehen). Ich habe keinen Hinweis darauf, daß Netscape plant, ihren Ansatz zur Positionierung zu ändern, aber ich werde Sie auf dem laufenden halten....
[Vorherige Seite] [Naechste Seite] [Inhalt dieses Abschnitts] [Home Page]

Bernhard Friedrich

doozer@hsguide.com