 |
Quel concepteur de pages Web n'a pas laissé échapper quelques
jurons bien sentis en essayant, à grand renfort de tableaux, de
placer précisément du texte ou une image là où il le désirait ?
Le miracle est arrivé ! Outre le balise
<LAYER> (mais qui n'est comprise que par Netscape 4.0 et plus),
il est désormais possible de positionner, au pixel près, du texte ou
une image avec les feuilles de style.
Notons que ce positionnement n'est possible que sous les versions 4
de Netscape et d'Explorer. Et que cette technique est encore un peu
hasardeuse à ce jour, surtout sur le plan de la compatibilité avec
les deux browsers susnommés.
Le positionnement des éléments par les feuilles de style est
repris sous la spécification CSS-P.
|
|
|
Position absolue ou relative
La position absolue {position: absolute}
se détermine par rapport au coin supérieur gauche de la
fenêtre du browser. Les coordonnées de ce point sont top = 0 et left
= 0. Les coordonnées d'un point s'expriment en pixels, de haut en bas
pour top et de gauche à droite pour left.
La position relative {position: relative}
se détermine par rapport à d'autres éléments de la page,
par exemple un élément du code Html.
Précisons que l'on utilisera presque toujours le positionnement
absolu car plus facile et plus sûr.
|
|
|
Positionner du texte
Plaçons en position absolue le texte "Publication Html" à 50
pixels du haut de la fenêtre (top) et à 150 pixels à gauche (left).
<HTML>
<HEAD>
<STYLE type="text/css">
.pub{position: absolute; top: 100px; left:
25px;
color: yellow; font-size: x-large; font-weight: bold;}
</STYLE>
</HEAD>
<BODY>
<DIV class=pub> Publication Html </DIV>
</BODY>
</HTML>
Ajoutons que plusieurs encodages sont possibles.
|
|
|
Positionner une image
Plaçons l'image htmlplus.gif en position absolue à 50 pixels de
haut de la fenêtre (top) et à 100 pixels à gauche (left). Les
dimensions de l'image sont width=242 et height=84.
<HTML>
<BODY>
<span style="position: absolute; top:
50px; left: 100px; width: 242px;
heigth: 84px;">
<IMG src="htmlplus.gif">
</span>
</BODY>
</HTML>
Spécifiez toujours les propriétés width
et heigth avec les feuilles de style car par défaut,
Netscape 4.0 et Explorer 4.0 ne réagissent pas de la même façon.
Ajoutons que plusieurs encodages sont possibles.
|
|
|
Superposer du texte sur une image
Reprenons l'image htmlplus.gif et on y superposera le nom de
l'auteur de ce tutorial, au pixel près dans la barre qui souligne le
terme Html.
<HTML>
<BODY>
<span style="position: absolute; top: 50px;
left: 100px; width: 242px; heigth: 84px;">
<IMG src="htmlplus.gif">
</span>
<span style="position: absolute; top: 96px;
left: 145px;
color: yellow; font-size: x-small; font-weight: bold;">
Van Lancker Luc
</span>
</BODY>
</HTML>
Ajoutons que plusieurs encodages sont possibles. |
