<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<style type="text/css">
body { /* défini le body (la page) */
background-color:white ; /* le fond de la page est blanc
*/
color:black} /* les textes sont noirs */
.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:7px} /* marge intérieure basse */
.onglet { /* style des onglets inactifs */
border:solid 1px black ; /* encadrement */
margin:5px 5px 0px 5px ; /* marge extérieure */
padding:7px 3px 7px 3px} /* marge intérieure */
a.onglet { /* style des liens se trouvant dans un onglet inactif */
background-color:#E7E4E4 ; /* le fond de l'onglet est gris
*/
text-decoration:none} /* les liens ne sont pas soulignés
*/
.onglet-actif { /* style de l'onglet de la page active */
border:solid 2px black ; /* l'encadrement est porté
à 2 pixels */
border-bottom:solid 3px white ; /* le trait inférieur
est effacé */
margin:5px 5px 0px 5px ; /* marges intérieures */
padding:7px 3px 7px 3px ; /* marges extérieures
*/
background-color:white} /* le fond de l'onglet
actif est blanc*/
</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 -->
<span class="onglet-actif">Onglets 1</span>
<!-- onglet ACTIF -->
<a class="onglet" href="onglets-2.htm">Onglets
2</a> <!-- onglet inactif -->
<a class="onglet" href="onglets-3.htm">Onglets
3</a> <!-- onglet inactif -->
</div>
</body>
</html>
COMMENTAIRES
Il s'agit de créer une barre de menu sous forme d'onglet.
Le 1er exemple (ci-dessus) est volontairement assez minimaliste, avec peu d'habillage. Il est assez simple à faire :
- On crée une ligne avec les liens.
- On la souligne avec un trait qui sépare de la page.
- On encadre les onglets qui ne correspondent pas à la page en cours d'une certaine façon, et on encadre l'onglet qui correspond à la page en cours d'une autre façon, avec une bordure basse blanche, donc invisible : on a le sentiment d'une continuité entre l'onglet actif et la page active.
Il faut recopier le codage HTML des onglets en haut de chacune des pages du site. Seule différence entre les pages : on affecte le style ".onglet-actif" à la ligne de la page en cours, et on supprime le lien de cette ligne (qui est inutile sur cette page).
Concernant le codage CSS, on peut le recopier en haut de chaque page (ce que je ne conseil pas), ou le placer dans un fichier onglet.css (par exemple), et faire appeler celui-ci dans le <head> de chaque page par une fonction <link rel="stylesheet" href="onglet.css" type="text/css">.
On peut évidement marier avec la gestion des zones fixes à l'écran, les boutons animés, etc....
Cliquez sur "onglet 2" pour voir un autre style d'onglets.
Ne marche pas dans NS4 et IE 5.0 (mais marche dans IE 5.5 et supérieur).