< Kästen und Umrahmungen CSS-Eigenschaften >

Mit CSS Elemente positionieren

Mit Stylesheets lassen Text und Bilder aufs Pixel genau positionieren, nämlich mit den Tags <SPAN> und <DIV>.
Dies ist in der Version 4 von Netscape und Internet Explorer möglich, allerdings bleibt diese Technik problematisch und kann zu Kompatibilitätsproblemen führen.

Relative und absolute Positionierung

Die absolute Positionierung {position: absolute} wird durch den Bezug auf das äußere linke Eck des Browsers bestimmt. Die Koordinaten eines Punkts werden also von oben nach unten (top) und links nach rechts (left) angegeben.

Die relative Position bezieht sich auf andere Elemente, wie ein Bild, das heißt, Elemente, die sich in einem dieser Tags befinden DIV oder SPAN werden im Anschluss an die HTML-Elemente positioniert, hinter denen sie sich befinden.

Positionieren von Text

Zum Positionieren des Texts "Wie geht das?" 80 Pixel vom oberen Fensterrand und 100 Pixel vom linken :

<HTML>
<BODY>
<SPAN style="position: absolute; top: 80 px; left: 100 px;">

Wie geht das?
</SPAN>
</BODY>
</HTML>

Man kann dafür auch anders vorgehen, zum Beispiel so :

<HTML>
<HEAD>
<STYLE>
<!--
.test{position: absolute; top: 80px; left: 100px; color: black; font-size: x-large}
-->
</STYLE>
</HEAD>
<BODY>
<DIV class=test>
Wie geht das?
</DIV>
</BODY>
</HTML>

Positionieren eines Bildes

Zum Positionieren des Bildes "test.jpg" 80 Pixel vom oberen Fensterrand und 100 Pixel vom linken :

<HTML>
<BODY>
<SPAN style="position: absolute; top: 80 px; left: 100 px;width: 103px; height: 61px">
<IMG SRC="test.jpg" >
</SPAN>
</BODY>
</HTML>

Es ist wichtig, die Größe des Bildes bei den Stylesheets zu spezifizieren, da es sonst zu Kompatibilitätsproblemen bei Browsern kommen kann.

Elemente übereinander legen

Legen wir nun den Text "Wie geht das?" über das Bild "test.jpg":

<HTML>
<BODY>
<SPAN style="position: absolute; top: 30 px; left: 100px;width: 103px; height: 61px">
<IMG SRC="test.jpg" >
</SPAN>
<SPAN style="position: absolute; top: 50 px; left: 100 px;">
Wie geht das?
</SPAN>
</BODY>
</HTML>