Bonjour à tous,
Je suis en train de modifier les boutons d'un site, pour qu'ils soient mieux intégrés dans la page et conformes aux recommandations.
J'éprouve de grandes difficultés à centrer verticalement le texte des boutons. Alors que logiquement c'est tout simple, là rien de ce que je tente ne fonctionne, et ça m'agace!
Je joints mon fichier html et la partie qui nous intéresse de mon fichier css.
HTML :
et le CSS:
Je sais qu'un simple margin-top fonctionnerait, mais je ne peux pas m'en servir a cause de la petite image qui s'incruste en cas de survole du bouton.
Si vous avez une solution pour ce tout petit problème, je suis tout ouïe.
Modifié par LordBatoon (14 May 2010 - 19:29)
Je suis en train de modifier les boutons d'un site, pour qu'ils soient mieux intégrés dans la page et conformes aux recommandations.
J'éprouve de grandes difficultés à centrer verticalement le texte des boutons. Alors que logiquement c'est tout simple, là rien de ce que je tente ne fonctionne, et ça m'agace!
Je joints mon fichier html et la partie qui nous intéresse de mon fichier css.
HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="content-language" content="fr" />
<title>TEST du Header</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="bodyHeader">
</div><!-- fin du bodyHeader (banniere + barre de connexion) -->
<div id="bodyNeck"><!-- debut espace de navigation (menus et sous-menus) -->
<div id="surMenu"><!-- debut du surMenu avec les boutons de navigation -->
<!-- en raison du float:right (voir fichier css) les boutons apparaissent de droite a gauche ce qui explique que le bouton 5 soit en premier dans le code -->
<a href="page5.php"><span class="btnMenu">Bouton 5</span></a>
<a href="page4.php"><span class="btnMenu">Bouton 4</span></a>
<a href="page3.php"><span class="btnMenu">Bouton 3</span></a>
<a href="page2.php"><span class="btnMenu">Bouton 2</span></a>
<a href="page1.php"><span class="btnMenu">Bouton 1</span></a>
</div><!-- fin du surMenu avec les boutons de navigation -->
</div><!-- fin de BodyNeck : espace de navigation (menus et sous-menus) -->
</body>
</html>et le CSS:
#bodyHeader {
width:987px;
height:198px;
background-image:url(../img/banniere.jpg);
background-repeat:no-repeat;
text-align:left;
vertical-align:top;
}
#bodyNeck {
width:987px;
height:51px;
background-image:url(../img/menu.jpg);
background-repeat:no-repeat;
text-align:right;
}
#surMenu {
width:987px;
height:51px;
}
#surMenu a:hover img,
#surMenu a:active img,
#surMenu a:focus img,
#surMenu a:link img,
#surMenu a:visited img {
border:0;
text-decoration:none;
}
#surMenu a:hover,
#surMenu a:active,
#surMenu a:focus,
#surMenu a:link,
#surMenu a:visited {
border:0;
text-decoration:none;
color:#fcf9eb;
}
.btnMenu {
display:block;
float:right;
height:51px;
color:#fcf9eb;
font-family: Franklin Gothic Heavy;
font-size:24px;
font-weight:bolder;
padding-left:30px;
padding-right:30px;
text-align:center;
vertical-align:middle;
}
.btnMenu:hover {
display:block;
float:right;
height:51px;
color:#8b0000;
font-family: Franklin Gothic Heavy;
font-size:24px;
font-weight:bolder;
padding-left:30px;
padding-right:30px;
text-align:center;
vertical-align:middle;
background-image:url(../img/petit-logo-on.jpg);
background-position:center;
background-repeat:no-repeat;
}Je sais qu'un simple margin-top fonctionnerait, mais je ne peux pas m'en servir a cause de la petite image qui s'incruste en cas de survole du bouton.
Si vous avez une solution pour ce tout petit problème, je suis tout ouïe.
Modifié par LordBatoon (14 May 2010 - 19:29)
