Langues

Ceci est une traduction. Elle peut avoir des erreurs ou être dépassée par rapport à la version anglaise. Traducteur(-trice): Laurent Carcone

Feuilles de style pour le Web Trucs & astuces CSS

Voir également l'index de tous les trucs et astuces.

Dans cette page:

Un menu fixe

Le menu que vous voyez à droite de cette page est une simple liste UL. Mais il reste fixe lorsque vous faites défiler la page (vous aurez peut-être à réduire d'abord la taille de la fenêtre pour obtenir la barre de défilement). Tout le travail nécessaire à ce qu'il reste à la même place est fait par des règles de la feuille de style. Voici le codage du menu, repris directement depuis le code source de cette page: 

<ul id=menu>
<li><a href="#L384">Section 1</a>
<li><a href="#details">Section 2</a>
<li><a href="#FAQ">Section 3</a>
</ul>

Dans un navigateur ne supportant pas CSS, ou dont CSS est désactivé, il apparaîtra comme une liste normale avec des liens. Mais avec CSS, grâce aux règles ci-dessous, il semblera "flotter" au dessus de la page, 'épinglé' sur le bord droit de la fenêtre du navigateur: 

#menu {
  position: fixed;
  right: 0;
  top: 50%;
  width: 8em;
  margin-top: -2.5em;
}

La règle la plus intéressante ici est la règle 'position: fixed', qui fait que le DIV reste fixe à l'écran. Les règles 'top: 50%' et 'right: 0' déterminent où le DIV est affichée, en l'occurrence: 50% en bas par rapport au bord haut de la fenêtre, et à une certaine constante du bord droit (0px). Les autres propriétés, margins, borders, colors, etc., peuvent être ajoutées en fonction du goût personnel.

Il existe également les propriétés 'left' et 'bottom', pour 'épingler' les éléments au bord gauche ou au bas de l'écran.

Plus de détails

Plus précisément: lorsqu'un élément a été fixé avec la règle 'position: fixed', les trois propriétés 'left', 'width' et 'right' déterminent ensemble la position horizontale et la taille par rapport à la fenêtre.(CSS utilises le terme plus général de 'fenêtre d'affichage' ou viewport)

Vous n'avez besoin d'utiliser que deux des trois propriétés au plus, i.e., left et width, right et width, ou left et right. Ne définir qu'une seule propriété ou même aucune est également possible. Dans ce cas, CSS prendra les tailles et/ou positions 'naturelles' (intrinsèques) aux éléments pour chaque propriété laissée à sa valeur par défaut ('auto').

Il en est de même pour les trois propriétés 'top', 'height' et 'bottom'. Vous n'avez besoin d'en spécifier que deux au plus: 'top' si vous voulez contrôler la distance par rapport au haut de la fenêtre, 'bottom' pour contrôler la distance par rapport au bas, et 'height' si vous voulez spécifier une hauteur fixe.

Si vous regarder la feuille de style inclue dans cette page, vous remarquerez quelques règles qui semblent se contredire elles-mêmes. Elles ont été ajoutées pour contourner des problèmes sur quelques anciens navigateurs. Voir ci-dessous.

FAQ: IE 5 & 6 sous Windows?

Si vous regardez cette page avec Microsoft Internet Explorer 5 or 6 sous Windows (“WinIE5” and “WinIE6”), vous constaterez qu'elle ne marche pas. Beaucoup de personnes me demandent pourquoi, voici une brève explication: le problème réside dans le navigateur, pas dans la page.

WinIE5 et WinIE6 n'implémentent pas la propriété 'fixed'. C'est fâcheux, mais le problème principal est qu'ils n'analysent pas correctement la propriété 'position' non plus. Un navigateur qui ne connaît pas la propriété 'fixed' devrait passer outre la règle 'position: fixed' et se replier sur la valeur de 'position' définie précédemment dans la feuille de style. On pourrait ainsi ajouter la règle 'position: absolute' juste avant la propriété 'fixed' et le navigateur l'utiliserait. Mais sous WinIE 5 et 6, ce n'est pas ce qui se produit. Apparemment, le mot-clé 'fixed' semble interprété comme 'static'.

Vous ne pouvez pas faire que WinIE5 et 6 supportent 'fixed', mais il y a un moyen de contourner le problème d'analyse. Johannes Koch m'a indiqué cette astuce (depuis sa collection d'astuces). Remplacez d'abord la règle 'position: fixed' par 'position: absolute' puis insérez la règle suivante dans la feuille de style: 

*>#intro {position: fixed}

Ceci a pour effet que les navigateurs qui supportent le sélecteur CSS '>' (child) appliqueront cette règle, mais que les autres navigateurs. et en particulier WinIE5 and WinIE6, l'ignoreront. La règle 'position: absolute' sera utilisée à la place et le menu sera au bon endroit, mais il ne restera pas fixe quand vous ferez défiler la page.

Notez qu'il est important qu'il n'y ait pas d'espace autour du '>'.

Bert Bos, coordinateur de l'activité style
Copyright © 1994–2021 W3C® Privacy policy

Created 17 Jan 2001;
Last updated mer. 06 janv. 2021 05:40:49 UTC

Langues

À propos des traductions