Menu à onglets avec feuilles de style

Introduction

Il est possible de ne pas faire appel à un langage de script pour introduire un effet dynamique dans une page HTML. Cela est possible également en utilisant des propriétés des feuilles de style. En revanche, cela permet de mettre en évidence, de manière plus crue que lors d'un simple formatage de texte, les lacunes de tel ou tel logiciel dans son implémentation des recommandations du W3C.

Dans l'exercice suivant, nous allons contruire un menu à base d'onglets, en nous servant d'une simple liste de liens.

Exemple de menu avec onglets

Vérifier l'exemple donné, tout d'abord avec Internet Explorer, puis Netscape.

Exercice : menu à onglets

Sauvegarder localement le fichier html. Télécharger la feuille de style vide onglets_vide.css.

1. Le fichier HTML, pour le moment, n'est qu'une liste de liens. Nous allons tout d'abord enlever les puces, et la disposer en ligne et non plus en colonne. On utilisera les propriétés display et list-style-type. On obtient le résultat
2. On doit maintenant ajouter une bordure inférieure à l'ensemble, pour indiquer une ligne de base ; on fixera le padding inférieur de la liste à 1 pixel, et la bordure à 1 pixel, de type solid et de couleur bleue. En parallèle, on fixe la marge des éléments à 0 pixel. On obtient alors le résultat suivant
3. Nous allons continuer le formatage en agissant sur l'élément de liste identifié here. Sa couleur de fond doit être #2586D7, ainsi que sa bordure inférieure, solide et de largeur 1 pixel (cette combinaison est destinée à maintenir un aspect "potable" sur IE6, plus tard). On obtient alors le résultat suivant
4. L'étape suivante consiste à agir sur le formatage des liens. Vous avez noté l'imbrication d'un span à l'intérieur de ceux-ci. Cette imbrication permettra d'ajouter, ultérieurement, les décochements qui apparaissent lors du survol de la souris. Nous y reviendrons. Dans l'immédiat, formater le texte des liens en bleu, avec un padding de 5 pixels en haut, 10 pixels à droite et à gauche, et 1 pixel en bas, le tout sur un fond de couleur #90BADE. On obtient le résultat suivant Afin de garder la cohérence de l'élément here, lui donner les mêmes propriétés de padding, avec en plus une marge droite de 1 pixel (pour atténuer la portée d'un bogue d'IE), pour obtenir le résultat suivant Tout l'aspect statique est maintenant établi.
5. Il faut maintenant établir les effets dynamiques. On pourrait, en suivant scrupuleusement la recommandation CSS, utiliser directment la pseudo-classe :hover sur l'élément li, mais IE s'y refuse. C'est la raison pour laquelle il a été nécessaire d'insérer un élément span artificiel à l'intérieur de la balise de lien.
   Nous allons commener par formatter l'élément de lien survolé ; sa couleur doit être blanche, son image de fond doit être fond.gif, qui ne doit pas être répétée. Cette image va représenter le coin supérieur gauche de l'onglet. On obtient alors le résultat suivant (le deuxième lien était survolé par la souris au moment de la capture d'écran)
6. Il faut maintenant terminer en formattant l'élément span de classe lien. Cet élément a comme image de fond l'image fond2.gif, alignée en haut à droite, et qui ne doit pas être répétée. Afin, de plus, de tenir compte des (in)compatibilités d'Internet Explorer, dues notamment à son interprétation non standard de la propriété padding, il s'avère nécessaire, pour préserver un minimum de cohérence entre la présentation standard et la version IE, d'ajouter les propriétés de style suivantes : en haut, une marge de -5 pixels et un padding de +5 pixels ; à droite, une marge de -10 pixels, et un padding de +10 pixels. On obtient alors le résultat final selon les standardset le suivant selon Internet Explorer

Il est bien sûr possible d'introduire des effets plus raffinés, notamment en jouant avec les images de fond pour faire apparaître des dégradés...