ici

Posionnement


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 <span> ou <div> seront positionnés à la suite des éléments html après lesquels ils se trouvent.

 

Positionner du texte

Positionnons le texte "J'aime Internet " à 120 pixels du haut de la fenêtre et à 200 pixels à gauche de la fenêtre :

<!doctype html public "-//W3C//Dtd html 4.0//EN">
<html>
  <body>
    <span style="position: absolute; top: 120px; left: 200px;">
	     J'aime Internet
    </span>
  </body>
</html>

Il y a d'autres façons de procéder, en voici une :

<!doctype html public "-//W3C//Dtd html 4.0//EN">
<html>
  <head>
    <style>
      <!--
	  .test {position: absolute; top:120px; left:200px; color: black; font-size: x-large}
	  -->
	</style>
  </head>
  <body>
    <div class="test">J'aime Internet</div>
  </body>
</html>

 

Positionner une image

Positionnons l'image "orange.gif" à 120 pixels du haut de la fenêtre et à 200 pixels à gauche de la fenêtre

(l'image fait 51pixels de coté) :

<!doctype html public "-//W3C//Dtd html 4.0//EN">
<html>
  <head>
    ...
  </head>
  <body>
    <span style="position: absolute; top: 120px; left: 200px; width: 51px; height: 51px">
      <img src="orange.gif" />
    </span>
  </body>
</html>

<!> Il est important d'adapter la taille du calque à celle de son contenu (ici l'image orange.gif) avec les feuilles de style, pour des raisons de non-compatibilité avec certain des navigateurs. <!>

 

Centrer un tableau

il faut spécifié une marge automatique à gauche et à droite du tableau.

table { margin-left:auto; margin-right:auto; }

 

Superposer des éléments

Superposons le texte "ici" à l'image "orange.gif" (l'image ce trouve en haut de la page) :

<!doctype html public "-//W3C//Dtd html 4.0//EN">
<html>
  <head>
    ...
  </head>
  <body>
    <span style="position: absolute; top: 120px; left: 200px; width: 51px; height: 51px">
      <img src="orange.gif" />
    </span>
    <span style="position: absolute; top: 130px; left: 210px;>
      ici
    </span>
  </body>
</html>

Il est ainsi possible de superposer des éléments de texte, ainsi que des images.

 

Positionner plusieur div

Positionnons plusieur div afin de déterminer des zones de menu, contenu et pied de page.

<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
    <title>&lt;Div&gt; et posionnements</title>
    <style type="text/css">
      <!--
        #contenu { position:absolute; width:700px; left:50; top:50; height:500px; text-align: left;}
        #bas { position:absolute; width:500px; left:150; height:30px; bottom:0px;}
        #milieu {position:absolute; left: 50%; top: 50%; width: 500px; height: 100px;
        margin-left: -250px; /* moitié de la largeur */
        margin-top: -50px; /* moitié de la hauteur */
        }
      -->
    </style>
  </head>
  <body>
    <div id=global>
      <div id=haut>haut</div>
      <div id=contenu>
        <div id=milieu>milieu</div>
        <div id=bas>bas</div>
        <p>contenu</p>
        <p>contenu</p>
        <p>contenu</p>
        <p>contenu</p>
      </div>
    </div>
  </body>
</html>

 

 

Ce document intitulé «  html 4.0 - Positionner des éléments  » issu de l' encyclopédie informatique Comment Ça Marche (www.commentcamarche.net ) est mis à disposition sous les termes de la licence Creative Commons . Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.