Workshops zu CSSScalable Vector GraphicsBilderwandWeb ServicesWeblog

Ebenen mit CSS

Was man mittlerweise häufiger antrifft, sind Ebenen (Boxes, Container) oder Layer - nicht zu verwechseln mit dem Netscape Tag "layer". 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, so wie das hier - mit modernen Browsern - zu sehen ist.

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;
border:1px solid #CCCCFF;
}

Die Angabe position:absolute; sagt dem Browser, das die folgenden Elemente vom Browserfenster aus ausgerichtet werden.
Die Beispielsebene ist 40 Pixel vom oberen Browserrand entfernt (top:40px;), klebt am linken Browserrand (left:0px;), ist 200 Pixel breit (width:200px;), soll die Navigation aufnehmen und hat die Hintergrundfarbe hellblau (background:#cccff;).
Der Inhalt soll 10 Pixel vom Rand entfernt sein (padding:10px;) und 30 Pixel vom oberen Rand (padding-top:30px;). Ausserdem soll sie die unterste Ebene bilden (z-index:1;). Der definierte Rand in der Hintergrundfarbe ist ein Workaround für Netscape Communicator 4.x, der sonst nur den Hintergrund auf die Länge des des Textelements beschränkt.

So nun die zweite Ebene.
.ebene2
{
position:absolute;
top:80px;
left:160px;
background:#0000E0;
border:1px solid;
border-color:#00000;
padding:10px;
z-index:2;
}

Die zweite Ebene soll über der ersten liegen (z-index:2;). Sie ist 80 Pixel vom oberen Browserrand entfernt, 160 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 1 Pixel breit. (border:1px solid #00000;).

So das war es fast.

Jetzt speichert man die css Deklarationen im Head der Datei oder besser in einem separaten Stylesheet (z.B. layout.css) ab, wie hier beschrieben ist.
In der HTML-Datei bildet man dann div-Container. Das sind HTML-Tags, deren einziger Zweck ist, css-Definitionen aufzunehmen. <div class="ebene1">hier steht dann die gesamte Navigation.
genauso wird die zweite Ebene eingebunden.
<div class="ebene2">hier steht dann Euer Text, Eure Bilder, Eure i-frames, die Ihr dann garnicht mehr braucht, Tabellen, Listen usw.
Natürlich kann man soviele Ebenen definieren, wie man will, in allen Farben. Experimentiert mal damit, Ihr könnt damit tolle Effekte erzielen. Das ganze funktioniert zum Teil auch mit einem alten Browser wie dem Netscape Communicator 4.x, wenn auf margin, padding und andere kritische Styles verzichtet wird.

Hier ist das beschriebene Beispiel.