<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>
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).