Positionner des éléments grâce aux CSS
baissaoui
Messages postés
509
Date d'inscription
Statut
Webmaster
Dernière intervention
-
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é.
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).
<niv1>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.
de la fenêtre et à 100 pixels à gauche de la fenêtre :
<niv1>
<niv1>
<niv1>Il y a d'autres façons de procéder, en voici une :
<niv1>
de la fenêtre et à 100 pixels à gauche de la fenêtre (l'image
fait 103x61) :
<niv1>
<niv1>
<niv1>Il est important de spécifier la taille de l'image avec les feuilles de style,
pour des raisons de non-compatibilité des navigateurs.
<niv1>
"test.jpg":
<niv1>
<niv1>
<niv1>Il est ainsi possible de superposer des éléments de texte, ainsi
que des images.
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
<niv1>Le positionnement absolu {position: absolute} se détermine par rapport au coinsupé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).
<niv1>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
<niv1>Positionnons le texte "Comment ça marche?" à 80 pixels du hautde la fenêtre et à 100 pixels à gauche de la fenêtre :
<niv1>
<HTML>
<BODY>
<SPAN style="position: absolute; top: 80 px; left: 100 px;">
Comment ça marche?
</SPAN>
</BODY>
</HTML>
<niv1>
<niv1>Il y a d'autres façons de procéder, en voici une :
<niv1>
<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
<niv1>Positionnons l'image "test.jpg" à 80 pixels du hautde la fenêtre et à 100 pixels à gauche de la fenêtre (l'image
fait 103x61) :
<niv1>
<HTML>
<BODY>
<SPAN style="position: absolute; top: 80 px; left: 100 px;width: 103px; height: 61px">
<IMG SRC="test.jpg" >
</SPAN>
</BODY>
</HTML>
<niv1>
<niv1>Il est important de spécifier la taille de l'image avec les feuilles de style,
pour des raisons de non-compatibilité des navigateurs.
<niv1>
Superposer des éléments
<niv1>Superposons le texte "Comment ça marche?" à l'image"test.jpg":
<niv1>
<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>
<niv1>
<niv1>Il est ainsi possible de superposer des éléments de texte, ainsi
que des images.
