Positionner des éléments grâce aux CSS

baissaoui Messages postés 497 Date d'inscription jeudi 2 septembre 2021 Statut Webmaster Dernière intervention 22 mars 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

Positionnement relatif et absolu

Positionner du texte

Positionner une image

Superposer des éléments

Discussions similaires

Newsletters