3ième EXEMPLE D'UN MENU PAR ONGLETS, EN CSS + IMAGE

CODE SOURCE CSS ET HTML

<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 */
  
margin:0 ; padding:0} /* suppression des marges intérieures et extérieures de la page */

.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 */
  
background-color:black} /* le fond du menu est noir */

.onglet { /* style des onglets inactifs */
  margin : 0px ; /* marge extérieure */
  padding:5px 7px 0px 7px ; /* marge intérieure */
  background:url(coin-haut-droite.gif) no-repeat right top} /* insère un rectangle noir en haut à droite de l'onglet */

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-bottom:solid 2px white ; /* le trait inférieur est effacé */
   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 -->
  <a class="onglet" href="onglets-1.htm">Onglets 1</a> <!-- onglet inactif -->
  <a class="onglet" href="onglets-2.htm">Onglets 2</a> <!-- onglet inactif -->
  <span class="onglet onglet-actif">Onglets 3</span> <!-- onglet ACTIF -->
</div>

</body>
</html>

 

Pour tester ce script

 

COMMENTAIRES

Il s'agit d'un script simple, presque identique au 1er. On a essentiellement rajouté un petit coin noir dans le haut droit de chaque onglet. Pour cela, il a fallut retirer la bordure des onglets, qui aurait gaché l'effet, et mettre le fond en noir, pour augmenter le contraste des boutons.

Pour récupérer le petit coin noir, et l'utiliser.

Ne marche pas dans NS4 et partiellement dans IE 5.0 (mais marche dans IE 5.5 et supérieur).