Pixelgenaue Positionierung

Überblick

Oftmals ist es beim Entwerfen einer Homepage wichtig, Elemente gezielt auf einer Seite zu plazieren. Dies ist zum Beispiel mit sogenannten blinden Tabellen oder auch mit Frames möglich. Sonderlich genau ist diese Art der Positionierung jedoch nicht. Mit Erscheinen des HTML-Standards 4.0 ist durch die Cascading Style Sheets erstmals eine pixelgenaue Positionierung weitestgehend browserübergreifend möglich.

Beispiel:

Hier wird ein blaues Kästchen von einem gelben Kästchen überlappt.
Der Code:


        <div style="position:absolute; top:100px; left:200px;
        width:200px; height:200px; z-index:1;
        background-color:#0000FF; layer-background-color:#0000FF;">Der untere Layer</div>
        <!-- Die Definition des oberen Layers mit den Angaben zu
        Position, Schicht und Farbe -->
        <div style="position:absolute; top:200px; left:300px;
        width:200px; height:200px; z-index:2;
        background-color:#FFFF00; layer-background-color:#FFFF00;">Der obere Layer</div>
        <!-- Die Definition des oberen Layers mit den Angaben zu
        Position, Schicht und Farbe -->

Beispiel anzeigen

Erklärung

In diesem Beispiel werden zwei Layer definiert. In den beiden Layerdefinitionen wird die Position der linken oberen Ecke, die Breite und die Höhe sowie die Hintergrundfarbe und um die wievielte Schicht von unten es sich handelt angegeben.
Den beiden <div> Tags wird das Attribut style zugewießen. In diesem Attribut werden die Eigenschaften des Layers definiert.
position:absolute; gibt die Art der Positionierung an. Eine Alternative dazu wäre position:relative; (Dabei wird der Abstand nicht von der oberen, linken Ecke sondern vom nächsten Element aus gemessen). Die Angabe fixed wird von den Browsern noch nicht unterstützt und ist damit uninteressant.
Der Wert hinter top: gibt den Abstand zwischen der oberen Ecke und dem oberem Fensterrand an.
Der Wert hinter left: gibt den Abstand zwischen der linken Ecke und dem linken Fensterrand an.
Geben Sie width: gefolgt von einem Wert an um die Breite Ihres Layers zu bestimmen.
height: gefolgt von einem Wert gibt die Höhe des Layers an. Zu einem solchen Wert gehört auch immer eine Maßangabe: In unserem Fall Pixel - px . Sie können jedoch auch andere Einheiten wie z.B. Zentimeter - cm verwenden.
Hinter background-color: können Sie die Farbe des Layers in hexadezimaler Schreibweiße notieren. Netscape 4.x nutzt hierzu den nicht standardisierten Befehl layer-background-color:
Wenn Sie die Angaben zu Länge, Breite und Farbe nicht benötigen, können Sie sie entfernen.

Der Inhalt des Layers wird zwischen die Tags <div> und </div> eingefügt.

Layergenerator

Geben Sie den Abstand zwischen oberem Fensterrand und oberem Layerrand an:
Geben Sie den Abstand zwischen linkem Fensterrand und linkem Layerrand an:
Geben Sie an um welche Layerschicht von unten es sich handelt:
Geben Sie je nach Bedarf die Breite des Layers an:
Geben Sie je nach Bedarf die Höhe des Layers an:
Geben Sie je nach Bedarf die Farbe des Layers in hexadezimaler Schreibweise an:	#

Sie können den Layergenerator auch als Windows 9.x Programm aus unseren Webpublishing-Downloads herunterladen. Es besitzt eine einfachere Bedienung und mehr Funktionen.

Unsere Homepage
Auch unsere Homepage nutzt diese Technik um Elemente direkt am Seitenrand zu platzieren.

Netscape 4.x
Der Netscape Navigator in Version 4.x färbt das Layer nur soweit es Text oder Grafiken enthält. Um das ganze Layer zu färben, muss zusätzlich zu background-color: layer-background-color: eingefügt werden.

Objekthirachie bei Netscape 4.x
Die JavaScript-Objekthirarchie ist beim Navigator 4.x etwas anders als beim Internet Explorer. Bei Netscape 4.x ist jedes Layer ein eigenes Objekt mit eigenem document Objekt. Um solche Probleme zu umgehen können Sie unsere DHTML-Library 1.2 einsetzen.

Layer

Layer sind Schichten beliebiger Größe und Inhalts die frei und auch übereinander auf Web-Seiten verteilt werden können.

Links zum Thema:
Selfhtml (Elemente positionieren)