Les feuilles de style - Positionner avec feuilles de style

Feuilles de style

Positionner avec CSS

	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), 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 (non encore officielle au 1 septembre 98).
	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.