Mit CSS Elemente positionieren
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
- Css bild verschieben
- Css text verschieben - Beste Antworten
- Css bild positionieren - Beste Antworten
- Css deklaration - Tipps - CSS
- Css farben transparent - Forum Webmastering
- Css spiegeln - Tipps -Word
- Css dreieck - Forum Webmastering
- Taskleiste verschieben - Tipps -Windows 7