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
Les meilleures astuces CSS sur le JDN :
- Comment
appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment
centrer horizontalement une DIV dans une autre en CSS ?
- Comment
créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment
définir les cellpadding et cellspacing en CSS ?
- Comment
modifier l'image d'un bouton input en CSS ?
- Comment
rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de
cet élément opaque en CSS ?
- Internet
Explorer supporte-t-il l'attribut CSS border-radius
|
[