DHTML ou le Html dynamique
Positionner avec Explorer
par la technique des feuilles de style (CSS)
Home

L'approche par les feuilles de style

Quelques mois après la version 4.0 de Netscape, Microsoft sortait la version 4.0 de Explorer. Ce qui lui a permis d'aller plus avant dans le positionnement et la définition des objets.

Microsoft a développé "son" concept de feuilles de style (Cascading Style Sheets ou CSS] qui permettait déjà de décomposer une pages Web en blocs avec les balises SPAN et DIV. Restait à pouvoir positionner ces blocs... C'est tout le développement du CSS-P ou du positionnement avec les feuilles de style.

A l'opposé de l'approche de Netscape avec une balise (la balise <LAYER>), les feuilles de style apportent un concept plus vaste, plus complet et plus puissant mais d'un apprentissage (un peu)
plus complexe.

Pour les lecteurs qui prennent le site en marche, je rappelle que les feuilles de style sont largement abordées plus avant dans le site.


 
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.


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

Home