Image de fond dans une liste en menu horizontal

**GreatDeveloperOnizuka** · 07/02/2009, 19h44

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.

**desert** · 07/02/2009, 20h03

- Soit tu laisses la propriété display:inline sur tes éléments li et le padding sera appliqué aux liens (a) plutôt qu'aux li.
- Soit tu mets tes li en position flottante et tu ajoutes la propriété display:block à tes liens.

Image de fond dans une liste en menu horizontal

CSS

Vue hybride

Discussions similaires

Partager

Partager