Bisher verschlossene Welten tun sich dem Web-Designer mit Containern (auch als Ebenen bezeichnet) auf. Ein Container ist nichts weiter als eine frei verschiebbare Rahmenkonstruktion. Um diesen Rahmen zu beschreiben, verwendet man CSS.
Der Clou daran, ein Container kann jedes andere aus HTML bekannte Element enthalten. Container können ineinander geschoben (verschachtelt) werden. Mit Javascript ist es sogar möglich, sie zu animieren. Auf diese Weise erhalten Web-Seiten eine dynamische Komponente, man spricht dann von DHTML (dynamisches HTML), welches allerdings noch weitere Techniken erfordert.
Im Zusammenspiel mit einem geeigneten Editor können Container nicht nur sehr einfach erstellt werden, man kann sie frei auf der Arbeitsfläche bewegen und ist nicht mehr an die engen Beschränkungen von Tabellen und BlindGIFs gebunden. Das geht mühelos und wenn man will auf den Pixel genau.
Aller Vorzüge zum Trotz, im praktischen Einsatz gibt es auch Nachteile. Das bedeutet, der konsequente Einsatz von Container schließt Besucher mit alten Browsern aus. Dennoch werden Container immer häufiger eingesetzt.
Was sind Container eigentlich?
Das Prinzip ist schnell zu durchschauen. Werfen Sie einmal einen Blick
auf diesen Code:
<div id="Layer1" style="position:absolute;
width:200px; height:100px; z-index:1"></div>
Ein Container ist nichts weiter als die codierte Beschreibung eines Rahmens. Eine leere Hülle, von der man in einem Browser noch nichts erkennen kann. Der HTML-Tag <div>, es ließe sich auch <p> oder <span> verwenden, wird mit einigen CSS-Anweisungen angereichert. Ein Container bekommt eine ID (Idendifikation), anhand derer er später angesteuert werden kann. Wir kommen noch darauf zurück. Des weiteren eine Angabe für die Breite (width:200px) und die Höhe (height:100px) sowie einen Z-Index, die Stapelreihenfolge der Layer.
Die Bemaßung
Standardwerte für Position und Größe werden in der Regel in Pixel
(px) angegeben. Sie können auch folgende Maßeinheiten festlegen: pc
(Pica), pt (Punkt), in (Inch), mm (Millimeter), cm (Zentimeter) oder % (Prozentsatz
vom Wert des übergeordneten Elements) und em.
Container mit Hintergrundfarbe und
Rahmen
Ohne Hintergrundfarbe oder Rahmen ist nichts im Browser zu sehen.
Aber das lässt sich rasch mit background : color ändern.
Jetzt ist
endlich auch etwas im Browser zu erkennen:
<div id="Layer1"
style="position:absolute; width:200px; height:100px; z-index:1; background-color:
#0099CC; border: 1px solid #000000"></div>
Container
mit Positionsangabe
Jetzt wird unser Code komplettiert. Mit left : 50px
und top : 50px geben wir den Anstand zum linken beziehungsweise oberen Rand des
Browsers an. Damit lassen sich Container auf das Pixel genau auf einer Seite ausrichten.
<div
id="Layer1" style="position:absolute; width:200px; height:100px;
z-index:1; background-color: #0099CC; border: 1px solid #000000; left: 50px; top:
50px"></div>
Überschneidungen
Dank
der absoluten Positionierung ist es sehr einfach Container zu verschachteln, beziehungsweise
sie über- oder untereinander zu setzen. Da Container sowohl mit Texten, als auch
mit Bildern gefüllt werden können, wird es möglich Text direkt
über eine Bild zu legen, respektive zwei Grafiken miteinander zu verbinden.
Achten Sie auf die Maße für "left" und "top".
<div id="Layer1" style="position:absolute; width:200px;
height:100px; z-index:1; background-color: #0099CC; border: 1px solid #000000;
left: 50px; top: 70px"></div>
<div id="Layer1"
style="position:absolute; width:200px; height:100px; z-index:1; background-color:
#009999; border: 1px solid #000000; left: 150px; top: 120px"></div>