Discussion :

[wallash]

salut à tous, s'il vous plait un problème:
Je cherche à centrer horizontalement un menu déroulant dans un conteneur mais j'ai des difficultés à le faire, j'ai même fouiller dans le forum et essayer les solutions proposées dans d'autres post mais ça ne marche pas: voici le code xhtml

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
 
<div id="menu_horizontal">
				<div id="menu">
				     <ul>
					    <li><a href="index.php">Home</a></li>
				        <li><a href="index.php">Company Profile</a>
				            <ul>
					            <li><a href="menu/PageNav_profile.php">Profile</a></li>
						        <li><a href="menu/PageNav_vm.php">Vision & Mission</a></li>
						        <li><a href="menu/PageNav_value.php">Value</a></li>
				            </ul>
						</li>	
						<li><a href="#">Solutions</a>
				            <ul>
					            <li><a href="#">Profile</a></li>
						        <li><a href="#">Vision & Mission</a></li>
						        <li><a href="#">Value</a></li>
				            </ul>
						</li>	
						<li><a href="#">Partners</a></li>
						<li><a href="#">Careers</a></li>
					    <li></li>
				    </ul>
				</div>
				</div>

voici le code 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
 
#menu_horizontal{
height: 30px;
background: url(../images/menu_horizontal_bg.jpg) repeat-x;
border-bottom: 1px solid #ccc; 
}
#menu{
height: 30px;
}
#menu ul{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#menu li{
margin: auto;
padding: 0;
float: left;
border-right: 1px solid #ccc;
}
#menu li a{
display:block;
padding: 8px;
width: 100px;
color: #fff;
text-decoration: none;
}
#menu li a:hover{
color: #CCFF99;
background-color: #F2462E; 
 
}
#menu ul li ul{
display: none;
}
#menu ul li:hover ul{
display: block;
 
}
#menu li:hover ul li{
float: none;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
/* background: transparent url("") repeat; */
background-color:#CCCCCC;
}
#menu li ul{
position:absolute;
}

[aL1ba]

essai:

#menu_horizontal
{
width: 600px;
height: 30px;
background: url(../images/menu_horizontal_bg.jpg) repeat-x;
border-bottom: 1px solid #ccc;
margin-left: auto;
margin-right: auto;
}

[wallash]

merci aL1ba, ton idée m'a bien orienter et tu as juste confondu là ou il fallait ajouter ce que tu as mentionner en rouge parce qu'il fallait mettre ça dans

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#menu{
 
}

pour que l'image qui est en background reste dans le conteneur et par conséquent sur toute l'horizontale, si non ça se recentre avec le menu proprement dit.

comme ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#menu{
height: 30px;
width: 586px;
margin-left: auto;
margin-right: auto; 
}

merci bien aL1ba