Seite 08: Layer

Layer

Layer ist, was war anderes zu erwarten englisch und steht für Ebene. Stellen Sie sich also eine Webseite als Ebene vor. Oder besser noch als ein ganz gewöhnliches Stück Papier auf das Sie schreiben und Bilder malen. Ein Layer wäre dann eine anderes, meist (muss aber nicht) kleineres Stück Papier, das Sie auf der Grundebene (Webseite) verschieben können wie Sie wollen. Und auf dieses zweite Stück Papier können Sie auch schreiben und zeichnen was Sie wollen. Oder in HTML ausgedrückt: Sie jedes andere Tag (sogar andere Layer) hineindesignen.

Ein Beispiel eines Layers:

<div style="position: absolute; left: 200px; top: 200px; width: 200px; height: 200px;
background-color: #d0d0d0;">
<p>Hier können Sie Text, Bilder etc. einfügen</p>
</div>

Sie können statt dem <div>-Tag auch das <em>-Tag und eigendlich sogar jedes andere Tag benutzen, aber <div> hat sich eingebürgert. Wichtig für eine Layer sind drei Dinge:

position: absolute denn es sorgt dafür, dass die Positionsangaben von der Webseite ausgehen und nicht vom übergestellten Element.
left/top denn sie sorgen dafür, dass der Layer überhaupt absolut positioniert wird. Fehlen dieser Deklaration wird der Layer dort eingesetzt, wo er als normales Element stehen würde.
width/height denn sie bestimmen die Größe des Layers.

z-index

Wenn sich nun Layer überlappen (was durchaus vorkommt und nützlich sein kann) können sie über den z-index bestimmen, welcher Layer weiter vorne ist. Hat ein Layer einen höheren z-index als ein anderer überlagert er diesen.

Das folgende Beispiel setzt also den unteren Layer über den erstgenannten.

<div style="position: absolute; width: 200px; height: 200px;
background-color: #d0d0d0; left: 200px; top: 100px; z-index: 1"><p>
z-index: 1</p></div>
<div style="position: absolute; width: 200px; height: 200px;
background-color: #00a0ff; left: 220px; top: 130px; z-index: 2"><p>
z-index: 2</p></div>

Auslagern von Layern

Wollen Sie auf mehrere Seiten die selbe Layer-Konstruktion verwenden können Sie diese natürlich auslagern. Das funktionier über sogenannte id´s. Wenn Sie sich das folgende Beispiel ansehen, werden Sie erkennen, dass die divs mit verschiedenen ids belegt sind. Der Navigationslayer wurde mit der id "nav" und der Layer mit dem Inhalt mit der id "content" versehen. Das sind natürlich nur Beispiele. Sie können die Layer bezeichnen wie Sie wollen.

<!-- Dateiname test.html -->

<html>
<head>
<title>Beispiel eines Siteaufbaus mit Layern</title>
<link rel="stylesheet" href="stil.css" type="text/css">
</head>
<body>

<h1>Beispiel eines Siteaufbaus mit Layern</h1>

<div id="nav">
<p><a href="#">Link 1</a><br>
<a href="#">Link 2</a><br>
<a href="#">Link 3</a></p>
</div>

<div id="content">

<p>Hier steht der normale Content Ihrer Website.</p>

</div>

</body>
</html>

In der CSS-Datei stehen hier nur die beiden Anweisung für die Layer. ids werden definiert durch eine Raute (#) mit anschließender id-Bezeichnung. Selbstverständlich können Sie die Layer-Definitionen in das selbe Stylesheet schreiben, in das Sie auch Ihre üblichen CSS-Tags schreiben.

/* Dateiname stil.css */

#nav { position: absolute; top: 70px; left: 20px; height: 100px; width: 100px;
       background-color: #d0d0d0; }
#content { position: absolute; top: 70px; left: 150px; background-color: #d0d0d0; }