 |
HTML 4.0 - Positionner des éléments
 |
 |
 |  |
Il est possible grâce aux feuilles de style de positionner au pixel près du texte ou des images grâce aux balises <SPAN> et <DIV>.
Cela est possible avec les versions 4 de Netscape et d'Internet Explorer, cependant cette technique reste hasardeuse et montre encore quelques problèmes de compatibilité.
Positionnement relatif et absolu
Le positionnement absolu {position: absolute} se détermine par rapport au coin supérieur gauche de la fenêtre du navigateur. Les coordonnées d'un point s'expriment alors de haut en bas (top) et de gauche à droite (left).
La position relative se fait par rapport à d'autres éléments, comme une image, c'est-à-dire que les éléments contenus dans la balises DIV ou SPAN seront positionnés à la suite des éléments HTML après lesquels ils se trouvent.
 |
Positionner du texte
Positionnons le texte "Comment ça marche?" à 80 pixels du haut de la fenêtre et à 100 pixels à gauche de la fenêtre :
<HTML> <BODY> <SPAN style="position: absolute; top: 80 px; left: 100 px;">
Comment ça marche? </SPAN> </BODY> </HTML>
Il y a d'autres façons de procéder, en voici une :
<HTML>
<HEAD>
<STYLE>
<!--
.test{position: absolute; top: 80px; left: 100px; color: black; font-size: x-large}
-->
</STYLE>
</HEAD>
<BODY>
<DIV class=test>
Comment ça marche?
</DIV>
</BODY>
</HTML>
Positionner une image
Positionnons l'image "test.jpg" à 80 pixels du haut de la fenêtre et à 100 pixels à gauche de la fenêtre (l'image fait 103x61) :
<HTML> <BODY> <SPAN style="position: absolute; top: 80 px; left: 100 px;width: 103px; height: 61px"> <IMG SRC="test.jpg" > </SPAN> </BODY> </HTML>
Il est important de spécifier la taille de l'image avec les feuilles de style, pour des raisons de non-compatibilité des navigateurs.
Superposer des éléments
Superposons le texte "Comment ça marche?" à l'image "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;"> Comment ça marche? </SPAN> </BODY> </HTML>
Il est ainsi possible de superposer des éléments de texte, ainsi que des images.
Trucs & astuces pertinents trouvés dans la base de connaissances
| 13/12 16h46 |  Définir une hauteur verticale et relative à un élément (Webmaster) |
|
| 25/07 12h59 | Outil! (CSS) |
|
 Plus d'astuces sur « CSS positionnement » | ||
Discussions pertinentes trouvées dans le forum
| 28/07 18h57 | HTML + CSS : positionnement |
Webmastering | 13/11 16h04->Eventreur | 16 |
| 10/09 23h26 | Problème css : Div de positionnement |
Webmastering | 12/09 20h21->Gihef | 5 |
| 16/05 12h29 | [CSS] problème de positionnement absolu |
Webmastering | 17/05 10h36->batmat | 4 |
| 28/09 15h29 | [CSS] positionnement d'une image |
Webmastering | 28/09 23h42->Gihef | 3 |
| 26/05 17h38 | [CSS] Problème de positionnement |
Webmastering | 29/05 16h02->antic80 | 3 |
| 29/09 16h26 | Css / Positionner Du Texte |
Internet | 02/10 20h17->coventry | 2 |
| 17/12 00h07 | positionnement d'une image css / xhtml |
Internet | 17/12 20h50->king | 2 |
| 05/06 18h47 | probleme de positionnement en css |
Webmastering | 06/06 17h43->Yvan | 1 |
| 06/02 20h44 | Positionnement d'image en css.. |
Webmastering | 06/02 21h43->Gihef | 1 |
 Discussion fermée
 Problème résolu |
Plus de discussions sur « CSS positionnement » | |||