Probleme menu avec image

Bonjour,
Voici mon probleme.
je veux faire une suite de boutons horizontaux, avec une image en arriere plan.
Le problème c'est que le lien n'apparait que sur le texte et non pas sur la totalité de l'image.
Voici mon code ca sera plus compréhensible.

  <ul id="navigation">     
  <li><a href="#" title="aller à la section 1">Home</a></li>
  <li><a href="#" title="aller à la section 2">item</a></li>
  <li><a href="#" title="aller à la section 3">item</a></li>
  <li><a href="#" title="aller à la section 4">blabla</a></li>
  <li><a href="#" title="aller à la section 5">item5</a></li>
  </ul>

#navigation {     margin: 0 ;     padding: 0 ;     list-style: none ;     text-align: center ;     }
#navigation li 
{     
	float:left;
	color: #fff ;     
	background: #c00 ;    
	width:150px;
	height:35px;
	background-image:  url("./img/bouton.png");     
 }
#navigation li a
 {     
 display:block;

 
 font: 1em "Trebuchet MS",Arial,sans-serif ;    
  
 text-align: center ;    
 text-decoration: none ;  
  font-size:20px;
  font-style:bold;
  color:#403e3e; 
 }
#navigation li a:hover, #navigation li a:focus, #navigation li a:active 
{
     background-image:  url("./img/bouton2.png");     
 
 }

En fait j'aimerai simplement que le texte soit centré verticalement, et que lorsqu'on passe la souris le lien soit sur la totalité de l'image et non pas que sur la partie supérieur ( correspondante à la hauteur du texte )

Est ce faisable ?
Merci pour votre aide
Modifié par rockt13 (19 Nov 2009 - 01:49)

Bonjour,

Le plus simple (sans avoir à changer la structure de ton menu) serait de mettre les images de fond sur les a au lieu des li.

voici un petit lien qui pourra vous aider.

Bonjour vous 2 ,

J'ai déja essayé ceci:

#navigation li a  
{       
display:block;     
font: 1em "Trebuchet MS",Arial,sans-serif ;         
text-align: center ;      
text-decoration: none ;     
font-size:20px;   
font-style:bold;   
color:#403e3e;   
background-image:  url("./img/bouton.png");  
} 

Le problème, c'est que le bouton n'a pas sa taille d'origine qui est 150*35. Et meme si je rajoute les propriétés width et height, ca ne change pas...
En fait si je mets l'image dans le "a", la hauteur de mon bouton est réduite à celle du texte du lien.. du coup le bas du bouton est tronqué.. c'est pas trés génant mais bon c'est moins jolie


Frink, merci mais cest justement à partir de ce tuto que j'ai fais mon menu.
Modifié par rockt13 (19 Nov 2009 - 10:45)

Bon finalement j'ai mis le backgroud-image dans le "a" et j'ai jouais sur le padding-top et padding-bottom pour élargir le bouton.
Le résultat me satisfait.

J'ai juste une petite question, en fait lorqsue je rédui ma résolution les boutons viennent se placer en dessous les uns des autres.
Ils sont en float:left, comment faire pour qu'ils reste en ligne?

Merci
A+

Résolué,
En définissant une largeur fixe à mon bloc contenant les <ul><li>boutons</li></ul>.