Mit CSS Elemente positionieren

November 2017
Mit CSS-Stylesheets lassen sich Texte und Bilder in Webeiten pixelgenau positionieren, nämlich mit den Tags <SPAN> und <DIV>. Allerdings hat diese Technik zu Kompatibilitätsproblemen führen.


Relative und absolute Positionierung

Die absolute Positionierung (position: absolute) wird durch den Bezug zur äußeren linken Ecke des Browsers bestimmt. Die Koordinaten eines Punkts werden von oben nach unten (top) und von links nach rechts (left) angegeben.

Die relative Position bezieht sich auf andere Elemente, zum Beispiel ein Bild. Elemente, die sich in einem der Tags DIV oder SPAN befinden, werden im Anschluss an die HTML-Elemente positioniert, hinter denen sie sich befinden.



Positionieren von Text

Zum Positionieren des Texts "Wie geht das?" (unser Logo CCM kommt vom Französischen Comment ça marche, auf Deutsch Wie geht das?) 80 Pixel vom oberen Fensterrand und 100 Pixel vom linken Rand muss man den folgenden Code eingeben:

<HTML>
<BODY>
<SPAN style="position: absolute; top: 80 px; left: 100 px;">
Wie geht das?
</SPAN>
</BODY>
</HTML>


Man kann dafür alternativ auch so vorgehen:

<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 Rand, geben Sie den folgenden Code ein:

<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 in den Stylesheets zu spezifizieren, da es sonst zu Kompatibilitätsproblemen mit den verschiedenen Browsern kommen kann.

Elemente übereinanderlegen

Um den Text "Wie geht das?" (Comment ça marche) über das Bild "test.jpg" zu legen, können Sie diesen Code benutzen:

<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>


So lassen sich Textelemente und Bilder übereinanderlegen.

Foto: © Alexey V Smirnov - Shutterstock.com

Positioning elements in CSS
Positioning elements in CSS
Posicionamiento de los elementos en CSS
Posicionamiento de los elementos en CSS
Positionner des éléments grâce aux CSS
Positionner des éléments grâce aux CSS
Posizionare degli elementi con CSS
Posizionare degli elementi con CSS
Como posicionar elementos graças ao CSS
Como posicionar elementos graças ao CSS
MP3
MP3
Letztes Update am 6. November 2017 04:50 von SilkeCCM.
Das Dokument mit dem Titel "Mit CSS Elemente positionieren" wird auf CCM (de.ccm.net) unter den Bedingungen der Creative Commons-Lizenz zur Verfügung gestellt. Unter Berücksichtigung der Lizenzvereinbarungen dürfen Sie das Dokument verwenden, verändern und kopieren, wenn Sie dabei CCM deutlich als Urheber kennzeichnen.