Bonjour à tous,
Je cherche à faire un menu horizontal, avec le texte centré verticalement et dont le fond change de couleur lorsque je survole ou clique sur le texte.
A priori assez basic.
Et bien pas si basic que ça pour moi car vertical-align ne fonctionne pas et si je mets un padding-top le fond de couleur du hover se décale.
Je vous joins un lien vers ma page test http://www.fdbi.com/test/test1.htm]
et le code ci dessous:
Quelqu'un aurait-il une idée? Peut-être que la solution avec une feuille de style n'est pas la bonne et que je devrais m'orienter vers le javascript.
Merci à tous de votre aide.
Cordialement,
Frogybella
Modifié par frogy (23 Apr 2010 - 11:16)
Je cherche à faire un menu horizontal, avec le texte centré verticalement et dont le fond change de couleur lorsque je survole ou clique sur le texte.
A priori assez basic.
Et bien pas si basic que ça pour moi car vertical-align ne fonctionne pas et si je mets un padding-top le fond de couleur du hover se décale.
Je vous joins un lien vers ma page test http://www.fdbi.com/test/test1.htm]
et le code ci dessous:
<table class="menuhorizontal" cellspacing="0">
<tr>
<td width="189"><a href="#" class="menu">RECOUVREMENT</a></td>
<td><img src="images/separation.png"></td>
<td width="220"><a href="item.html" class="menu">PREVENTION DU RISQUE CLIENT</a></td>
<td><img src="images/separation.png"></td>
<td width="189"><a href="#" class="menu">DEMANDE D'INFORMATIONS</a></td>
<td><img src="images/separation.png"></td>
<td width="189" class="textemenu"><a href="#" class="menu">MIEUX NOUS CONNAITRE</a></td>
<td><img src="images/separation.png"></td>
<td width="164"><a href="#" class="menu">CONTACT</a></td>
</tr>
</table>
table.menuhorizontal{
background: transparent url(images/fond-menu.gif) no-repeat;
width: 955px;
vertical-align: middle;
}
table.menuhorizontal td {
margin:0;
padding:0;
text-align:center;
}
table.menuhorizontal,.menu {
display:block;
height:2.5em;
text-shadow: 2px 2px 2px #333333;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
font-size: 10pt;
text-decoration: none;
}
a.menu:hover {
background-color: #336699;
}
.textemenu{
padding-top:5px;;
}
Quelqu'un aurait-il une idée? Peut-être que la solution avec une feuille de style n'est pas la bonne et que je devrais m'orienter vers le javascript.
Merci à tous de votre aide.
Cordialement,
Frogybella
Modifié par frogy (23 Apr 2010 - 11:16)