Contrôler
la position des éléments visuels d'une page web impose,
si l'on s'en tient au HTML, la création de tableaux de positionnement
(tableaux classiques dont certaines cellules sont vides ou ne contiennent
que des éléments invisibles). Cette méthode est
à la fois difficile à gérer, à moins de
disposer d'un éditeur wysiwyg, et, surtout,
alourdit considérablement le code source de la page et la structure
du document HTML. Le second
niveau de spécifications du langage CSS vient heureusement
nous offrir un panel d'outils très puissants pour s'affranchir
de ces inconvénients, et se prémunir contre les surprises
qui peuvent survenir suite à une gestion différente
des tableaux suivant les navigateurs. Mais attention toutefois, car
CSS2 n'est implémenté que dans les versions 4.0 de IE,
Navigator et Opéra.
Les bases du positionnement
Le positionnement est défini pour des "boîtes",
qui peuvent être aussi bien des blocs de texte que des images
ou des tableaux. Elles possèdent par ailleurs leur propre jeu
de propriétés (taille, bordure, etc.). Il existe deux
façons de définir la position d'une boîite: de
manière relative ou de manière absolue.
Il est par exemple possible de définir les propriétés
suivantes du sélecteur H1 (relatif, donc, à la balise
du même nom):
H1
{position: absolute; top: 100px; width: 300px; height: 200px;}
Tous les textes
contenus dans les balises <H1> et </H1> seront affichés
dans une boîte de 300 pixels de large sur 200 pixels de haut,
située (coordonnées absolues) à 100 pixels
du bord haut de la page. Bien sûr, cette situation n'est pas
optimale: il est préférable de définir ce type
de positionnement dans l'attribut STYLE d'une balise <H1>
spécifique (ou de toute autre balise d'ailleurs); ou bien
encore d'utiliser des identificateurs
en tant que sélecteurs. Une troisième manière
de procéder (la plus couramment utilisée) est d'appliquer
l'attribut STYLE à l'une des balises <DIV> ou <SPAN>.
Par exemple:
<DIV
style="position: absolute; top: 100px; width: 300px; height:
200px">Texte</DIV>
Le positionnement relatif est quant à lui calculé
par rapport à la position de l'élément précédent
(dont la balise de fin n'a pas été atteinte) dans
le code HTML. Ainsi:
<DIV
style="position: absolute; top: 100px; width: 300px; height:
200px">
Texte de référence
<DIV style="position: relative; top: 20px; left: 20px; color:
red">
Texte décalé de 20 pixels à droite et 20 pixels
en bas par rapport au texte de référence
</DIV>
</DIV>
A noter que le
décalage s'effectue à droite depuis le bord
gauche (d'où l'emploi de left) et en bas depuis
le bord haut (top) de la "boîte" précédente.
Définir
des calques
Manipuler des "boîtes" sous forme d'éléments
DIV ou SPAN, et les positionner très précisément
les unes par rapport aux autres incite bien entendu à explorer
la possibilité de les superposer. Or CSS2 introduit
la propriété z-index qui définit un
ordre de surperposition des boîtes, désormais
appelées calques.
Notre feuille de style pourra ainsi contenir des règles du
type:
.dessus
{position: absolute; top: 100px; left: 20px; z-index: 2; background-color:
blue}
.dessous {position: absolute; top: 120px; left: 40px; z-index: 1;
background-color: red}
Un élément
de la classe .dessus sera positionné au dessus d'un
élément de la classe .dessous.
On peut même aller plus loin en utilisant les propriétés
visible et clip. Définissons une classe .invisible
comme suit:
.invisible
{position: absolute; top: 100px; left: 20px; width: 200px; height:
200px; visibility: hidden}
Puis une classe
.clip:
.clip
{position: absolute; top: 100px; left: 220px; width: 200px; height:
200px; clip: rect(20px 160px 160px 20px)}
Appliquons alors
ces règles au fragment de code HTML suivant:
<DIV
class="invisible">Texte invisible</DIV>
<DIV class="clip">Texte théoriquement visible mais
dont seulement une partie apparaît</DIV>
On obtient alors
le résultat
|
[