Ebenen mit CSS

Dieser Workshop soll zeigen, welche Effekte man mit Ebenen erzielen kann. Ebenen muss man sich vorstellen wie Folien, die übereinandergelegt werden und sich überlagern können. Die einzelnen Ebenen legt man mit Hilfe von CSS an.

#ebene1 {position:absolute;left:0px;top:40px;width:200px;background:#CCCCFF ;padding:10px;padding-top:30px;z-index:1;}

Der Befehl position:absolute sagt dem Browser, das die folgenden Befehle vom Browserrand aus gelten. Die erste Ebene ist 40 Pixel vom oberen Browserrand entfernt (top:40px;), klebt am linken Browserrand, ist 200 Pixel breit(width:200px;), und soll die Navigation aufnehmen und hat die Hintergrundfarbe hellblau (background:#cccff;). Der Inhalt soll 10 Pixel vom linken Rand entfernt sein (padding:10px;) und 30 Pixel vom oberen Rand (padding-top:30px;). Ausserdem soll sie die unterste Ebene bilden (z-index:1).

So nun die zweite Ebene.

#ebene2 {position:absolute;top:80px;left:100px;background:#0000E0;border:1px solid; border-color:#00000;padding:10px;z-index:2;}

Die zweite Ebene soll über der ersten liegen. Sie ist 80 Pixel vom oberen Browserrand entfernt, 100 Pixel vom linken Rand entfernt, verdeckt also die erste Ebene zum Teil. Der Hintergrund soll blau sein und das ganze bekommt noch einen schwarzen Rand (border-color:#000000;), der Rand soll durchgehend sein und 10 Pixel breit, sieht zwar schlecht aus, aber so sieht man es besser (border:1px solid;border-color:#00000;).

Jetzt speichert man die CSS-Befehle im Head der Datei oder natürlich in einer separaten CSS-Datei ab.
In der eigentlichen Datei bildet man dann div-Container. Das sind HTML-Befehle, deren einziger Zweck ist, css-Definitionen aufzunehmen.
<div id="ebene1">hier steht dann die gesamte Navigation.</div>

Genauso wird die zweite Ebene eingebunden.

<div id="ebene2">hier steht dann Ihr Text, Ihre Bilder, Ihre i-frames, die Sie dann garnicht mehr brauchen, Tabellen, Listen usw.</div>

Natürlich kann man soviele Ebenen definieren, wie man will, in allen Farben.
Experimentieren Sie einfach mal damit, Sie können damit tolle Effekte erzielen.