Bonjour à tous !
Je désire créer un menu en onglets, et pour cela j'ai repéré ce tuto : http://www.ultra-fluide.com/ressources/css/menu-onglets-rollover.htm
J'ai suivi les deux parties du tuto à la lettre, mais entre la version finale du tuto ( http://www.ultra-fluide.com/ressources/css/menu-onglets-rollover/exemple10a.htm ) et la mienne, il y a une différence que je n'ai pas réussi à effacer : le hover des onglets ne se produit pas, seul celui du lien est actif.
Ci joint la source de mon style.css :
body {
background:#fff;
margin:0;
padding:20px;
color:#000;
font:small Georgia,Serif;
_font:x-small;
}
#onglet {
float:left;
width:100%;
background:#DAE0D2 url(/images/menu-onglets/bg.gif) repeat-x bottom;
font-size:93%;
line-height:normal;
}
#onglet ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
#onglet li {
float:left;
background:url(/images/menu-onglets/left_both.gif)
no-repeat left top;
margin:0;
padding:0 0 0 9px;
border-bottom:1px solid #765;
}
#onglet a {
float:left;
display:block;
width:.1em;
background:url(/images/menu-onglets/right_both.gif
) no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
white-space:nowrap;
}
#onglet > ul a {width:auto;}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#onglet a {float:none;}
/* End IE5-Mac hack */
#onglet a:hover {
color:#333;
}
#home #nav-home, #studio #nav-studio,
#onair #nav-onair, #tab4 #nav-tab4,
#tab5 #nav-tab5 {
background-position:0 -150px;
border-width:0;
}
#home #nav-home a, #studio #nav-studio a,
#onair #nav-onair a, #tab4 #nav-tab4 a,
#tab5 #nav-tab5 a {
background-position:100% -150px;
padding-bottom:5px;
color:#333;
}
#onglet li:hover, #onglet li:hover a {
background-position:0% -150px;
color:#333;
}
#onglet li:hover a {
background-position:100% -150px;
}
Et de mon code html avec les onglets :
<html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css">
<title>On Air</title>
</head>
<body id="home">
<div id="onglet">
<ul>
<li id="nav-home"><a href="index.php">Acceuil</a></li>
<li id="nav-studio"><a href="studio.php">Studio</a></li>
<li id="nav-onair"><a href="#">On Air</a></li>
<li id="nav-tab4"><a href="#">Tab 4</a></li>
<li id="nav-tab5"><a href="#">Tab 5</a></li>
</ul>
</div>
</body>
</html>
Merci d'avance pour votre aide !
