J'ai posté la page.
Il s'agit en fait de centrer verticalement des onglets les uns par apport aux autres, l'onglet actif étant le bloc le plus haut.
Je ne peux pas mettre des padding, car si j'agrandis le texte, ils seront décalé.
La page HTML
La page CSS
Le code HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Soucis avec des onglets !</title>
<link rel="stylesheet" type="text/css" href="onglets.css" />
</head>
<body>
<ul id="onglets">
<li id="active"><a>Bienvenue</a></li>
<li><a href="#">Éditorial</a></li>
<li><a href="#">Nouveautés</a></li>
</ul>
</body>
</html>
Le code CSS:
*{
margin:0;
padding:0;
border:0;
list-style-type:none;
}
body{
font-family:Helvetica, sans-serif;
font-size:0.8em;
color:#DDDDDD;
background:#000000 url(images/design/droite.jpg) right top repeat-y;
}
li{
float:left;
margin-top:-3px;
}
#onglets {
height:28px;
border-bottom:#3D4546 1px solid;
}
#onglets li {
background:url(images/onglets/gauche.jpg) no-repeat left top;
padding:0 0 0 6px;
}
#onglets a {
display:block;
background:url(images/onglets/droite.jpg) no-repeat right top;
padding:5px 15px 2px 6px;
text-decoration:none;
font-weight:bold;
color:#454545;
}
#onglets > ul a {width:auto;}
#onglets a {float:none;}
#onglets a:hover {color:#D8EBFE;}
#onglets li:hover, #onglets li:hover a {
background-position:0% -100px;
color:#D8EBFE;
}
#onglets li:hover a {
background-position:100% -100px;
}
#onglets li#active {
border-bottom:none;
background:url(images/onglets/gauche2.jpg) no-repeat left top;
margin:0;
padding:0 0 0 6px;
}
#onglets li#active a {
font-size:18px;
float:left;
display:block;
background:url(images/onglets/droite2.jpg) no-repeat right top;
padding:5px 15px 3px 6px;
text-decoration:none;
font-weight:bold;
color:#D8EBFE;
}
