Positionner des éléments grâce aux CSS

baissaoui Messages postés 498 Date d'inscription jeudi 2 septembre 2021 Statut Webmaster Dernière intervention 21 août 2024 - 23 juin 2022 à 16:08

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

<niv1>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).

<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 haut
de 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 haut
de 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.

Discussions similaires

redimensionner une image css

Insertion d'une image dans CSS - création d'un sous-dossier

comment agrandir une image en css

Deplacer une image avec HTML et CSS

Positionnement d'image en css..

Placer image en css