Image de fond dans une liste en menu horizontal

Bonjour,

J'ai crée un bouton sur the gimp que je voudrais mettre en image de fond sur un menu horizontal. Cependant, le menu est coupé car la taille des boutons est trop petites. Comment donc faire pour que la taille des boutons se réadaptent automatiquement car après une petite recherche, il me semble que ça soit pas possible :( surtout si on utilise pas un display: block dans le CSS alors que j'utilise un display: inline pour pouvoir centrer mon menu.

Lien du modèle à faire
http://img4.imageshack.us/img4/125/acccv3.jpg

Voici le code HTML

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!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" xml:lang="fr" >
   <head>
       <title>Site de la compagnie</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Site" href="design.css" />
   </head>
   <body>
		<div id="en_tete">
		<!-- bannière -->
		</div>
 
		<div id="menu">
			<!-- barre de navigation, j'ai écris les li collé car ça évite qu'il y ait un espace sur firefox entre les boutons du menu horizontal-->
			<ul id="nav">
			   <li id="nav-home"><a href="#">ACCUEIL</a></li><li id="nav-serr"><a href="#">SERRURERIE</a></li><li id="nav-plomb"><a href="#">PLOMBERIE</a></li><li id="nav-vitre"><a href="#">VITRERIE</a></li><li id="nav-elect"><a href="#">ELECTRICITE</a></li><li id="nav-assai"><a href="#">ASSAINISSEMENT</a></li><li id="nav-chauf"><a href="#">CHAUFFAGE</a></li><li id="nav-devis"><a href="#">DEVIS</a></li>
			</ul>
 
		</div>
 
		<div id="corps">
		<!-- corps-->
 
 
		</div>
 
		<div id="pied_de_page">
		</div>
 
 
 
   </body>
</html>

Code du CSS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
body
{
   width: 900px;
   margin: auto; /* Pour centrer notre page */
   margin-top: 20px;
   margin-bottom: 20px;    /* Idem pour le bas du navigateur */
}
 
 
/* L'en-tête */
 
#en_tete
{
/* la taille du logo 900x138 px*/
   width: 900px;
   height: 138px;
   background-image: url("TestEnTete.png");
   background-repeat: no-repeat;
}
/*
#logo
{
	text-align: center;
	background-image: url("logo.png");
	background-repeat: no-repeat;
}*/
/*la barre de navigation*/
#menu
{
	background-color: #a5c78b;
	height: 36px;
	margin: auto;
	padding: 1px;   
 
}
 
 
#nav 
{
   /*height: 33px;*/
    text-align: center;
	margin: 0px;
    padding: 0px;
    font-family: Georgia, Times New Roman, Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 36px;
    white-space: nowrap;
 
 
}
 
#nav li 
{
   background-color:#a5c78b;
   display: inline;
   padding: 8px;
   background-image: url("boutonMenu.png");
 
}
 
#nav li a
{
	color: black;
	text-decoration: none;
 
}

Merci d'avance de votre aide.