.menu1 { /* boite qui contient le menu (les onglets) */
border-bottom:solid 2px black ; /* crée le trait
noir en-dessous des onglets */
padding-top:12px ; /* marge intérieure haute */
padding-bottom:0px} /* marge intérieure basse */
.onglet { /* style des onglets inactifs */
margin:5px 5px 0px 20px ; /* marge extérieure */
padding:11px 0px 0px 0px ; /* marge intérieure */
font-size : 16px ; /* taille de la police des onglets */
float:left ; /* boite en mode float, pour pouvoir en définir
la largeur */
width:100px ; /* largeur de la boite float */
background : url(onglet.gif) bottom no-repeat ; /* image de fond
de la boite float, calée en bas */
text-decoration:none ; /* les lien dans les onglets ne sont pas
soulignés */
text-align:center} /* Le texte des onglets est centré
*/
a.onglet:hover {color:green} /* lors du survol d'un lien, la police devient verte */
.onglet-actif { /* style de l'onglet de la page active */
position:relative ; /* l'onglet inactif est mis en position
relative */
top:2px ; /* pour pouvoir baisser l'onglet de 2 pixels */
border-bottom : solid 0px white} /*on efface le trait inférieur
du menu */
.spacer {clear:both} /* force le retour à la ligne après des boites float */
</style>
</head>
<body>
<div class="menu1"> <!-- début de la boite
contenant les onglets -->
<a class="onglet" href="css-index.htm">Sommaire</a>
<!-- onglet inactif -->
<a class="onglet" href="onglets-1.htm">Onglets
1</a> <!-- onglet inactif -->
<span class="onglet onglet-actif">Onglets 2</span>
<!-- onglet ACTIF -->
<a class="onglet" href="onglets-3.htm">Onglets
3</a> <!-- onglet inactif -->
<div class="spacer"></div> <!--
permet le retour à la ligne à la fin des boites float -->
</div>
</body>
</html>
COMMENTAIRES
Ce menu d'onglet est assez proche du précédent (le code HTML est d'ailleurs presque le même), mais on utilise une image pour définir l'onglet, et non un système d'encadrement. Cette simple modification entraîne plusieurs problèmes, qui amênent à modifier certains aspects du code CSS.
En effet, l'image de fond est chargée par une fonction background. Ces images ne peuvent s'adapter à la taille de la boite (voir article). Conséquence, il faut être sûr que la boite soit assez grande pour afficher toute l'image, sinon, celle-ci sera coupée. Dans le codage précédent, la taille de l'onglet n'était pas fixée : elle s'adaptait au texte de l'onglet. Ici, ce n'est plus possible : il faut figer la taille de la boite à une taille supérieure à celle de l'image.
Mais les boites en-ligne ne peuvent avoir de dimensions figées (du moins cela ne marche pas dans tous les navigateurs). Pour pouvoir fixer une taille, il faut mettre la boite en format float (pour en savoir plus sur float).
La boite en float permet de régler le problème de la taille de la boite (donc de l'affichage de l'image de fond), mais elle en crée un nouveau :
Sans boite float, l'encadrement de la boite en ligne recouvrait le soulignement de .menu1. ce qui permettait de passer ce soulignement en blanc pour le faire disparaitre. Dans une boite float, ce n'est plus vrai : l'encadrement de l'onglet se fait à l'intérieur de .menu1 : on ne peut recouvrir ce soulignement par un trait blanc. On mêt alors .onglet-actif en position:relative, ce qui permet de bouger la boite par rapport à sa position normal. Ici, on demande un top:2px, ce qui permet de baisser la boite float .onglet-inactif de 2pixels, et donc de venir recouvrir le soulignement de .menu1.
Pour en savoir plus sur position:relative.
Pour récupérer l'image de fond des onglets, et l'utiliser chez vous.
Ne marche pas dans NS4 et partiellement dans IE 5.0 (mais marche dans IE 5.5 et supérieur).