28172 sujets

CSS et mise en forme, CSS3

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:


<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)
Hello,

Si ton texte est toujours sur une seule ligne tu peux mettre un line-height de la taille de ton conteneur...

exemple, ton a fait 20px de hauteur, tu met un line-height de 20px et le texte sera centré mais uniquement si ton texte ne va pas à la ligne