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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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.