Centrer le menu

Version imprimable

1 pièce(s) jointe(s)

Centrer le menu

Bonjour.

J'avance mais c'est dur !!!
J'ai encore (pour le moment) 2 problèmes sur lesquels je butte :(
1) je n'arrive à centrer le menu horizontal,
2) En fonction des tailles d'écran l'image de fonds de mon div conteneur se répète où est tronquée :(

Je joins une impression écran.
mon code 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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
* {
margin:0px;
padding:0px;
/*background:#ffffff;*/
background:#ffffff;
text-align:center;
}
 
body{
	font-family:Tahoma;
	font-size: 80%;
}
.haut {
	width:95%;
 	background:green;
	height:100px;
	font-size:12px;
}
 
/*centre la page et donne la largeur pour une basse résolution*/
.centrer {
	margin-left:auto;
	margin-right:auto;
	width:100%;
}
 
 
img {
	border:none;
}
 
a {  
	color:#000000;
	text-decoration:none;
	text-transform:none;
}
 
 
/****************************/
/* 	début menu	déroulant	*/
/****************************/
 
#menu {
	width:95%;
	background: #3B4E77;
}
 
ul, li {
	list-style-type:none;
}
/*chaque sous-menu*/
	#menu ul li{
	position:relative;
	float:left;
	width:135px;
	cursor:pointer;
	display:block;
	background-color:#3399ff;
	height:22px;
	border:1px solid #dddddd;
}
 
 
/*carré déroulant sous un sous-menu niveau 1*/
#menu ul li ul {
	display:none;
	position:absolute;
	width:135px;
	border:1px solid #dddddd;
	border-top:none;
	top:22px;
	left:0;
}
 
#menu ul li ul li {
	height:100%;
}
 
#menu ul li ul li a {
	color:#3399ff;
	font-size:12px;
	font-weight:normal;
	display:block;
	height:100%;
	border-top:1px solid #dddddd;
}
/*au passage de la souris on inverse les couleurs de la case*/
#menu li li a:hover {
	color:#ffffff;
	background:#3399ff;
}
 
/*décalage des sous-menu niveau 2 vers la droite*/
#menu ul li ul li ul {
	top:0px;
	left:135px;
}
 
/*décalage du sous-menu niveau 2 le plus à droite vers la gauche*/
#menu ul li ul li ul.dernier {
	left:135px;
}
 
 
.conteneur {
/*	width: 1186px;*/
width:95%;
	height: 720px;
	margin-left:auto;
	margin-right:auto;
	background-color:#3399ff;
	background-image:url(images/pelliculew2.jpg);
}
.frame {
	width: 75%;
	height: 630px;
	background-color: red;
	margin-left:auto;
	margin-right:auto;
	margin-top:0px;
	font-size:14px;
 
}

Voilà, pour le moment c'est tout.
Merci à ceux qui peuvent m'aider

Code:

1
2
3
4
5
#menu {
	width:95%;
	background: #3B4E77;
	margin:0 auto;
}

:question:

04/09/2007, 09h33
philippef

Merci.

J'ai donc ajouté "margin:0 auto;" à #menu mais ça n'a rien changé, le menu reste à gauche.
04/09/2007, 09h48
Bisûnûrs

Ah, je vois, ton #menu c'est le bleu foncé, alors c'est normal ..
Il faut que tu encadres tes "sous-menus" bleu clair par un div qui prend pour largeur la somme des largeurs de tes sous-menus+les bordures et qui prend le margin:0 auto.

Merci encore mais là j'ai l'impression que ça se complique non!

Citation:

Envoyé par Bisûnûrs

Ah, je vois, ton #menu c'est le bleu foncé, alors c'est normal ..
Il faut que tu encadres tes "sous-menus" bleu clair par un div qui prend pour largeur la somme des largeurs de tes sous-menus+les bordures et qui prend le margin:0 auto.

encadrer les sous menus par un div je dois pouvoir faire mais comment je fais la somme des largeurs des sous-menus + les bordures :oops:

code du menu

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
<div id="menu">
	<ul>		
		<li onmouseover="montre('smenu5',true);" onmouseout="montre('smenu5',false);">Accueil
			<ul id="smenu5">
				<li onmouseover="montre('smenu51',true);" onmouseout="montre('smenu51',false);"><a href="#">smenu51</a>
					<ul class="dernier" id="smenu51">
						<li><a href="#">smenu511</a></li>
						<li><a href="#">smenu512</a></li>
						<li><a href="#">smenu513</a></li>
 
					</ul>
				</li>
				<li onmouseover="montre('smenu52',true);" onmouseout="montre('smenu52',false);"><a href="#">smenu52</a>
					<ul class="dernier" id="smenu52">
						<li><a href="#">smenu521</a></li>
						<li><a href="#">smenu522</a></li>
						<li><a href="#">smenu523</a></li>
 
					</ul>
				</li>
				<li onmouseover="montre('smenu53',true);" onmouseout="montre('smenu53',false);"><a href="#">smenu53</a>
					<ul class="dernier" id="smenu53">
						<li><a href="#">smenu531</a></li>
						<li><a href="#">smenu532</a></li>
						<li><a href="#">smenu533</a></li>
 
					</ul>
				</li>
			</ul>
		</li>
		<li onmouseover="montre('smenu4',true);" onmouseout="montre('smenu4',false);">Vidéothèque
			<ul id="smenu4">
				<li onmouseover="montre('smenu41',true);" onmouseout="montre('smenu41',false);"><a href="#">smenu41</a>
					<ul id="smenu41">
						<li><a href="#">smenu411</a></li>
 
						<li><a href="#">smenu412</a></li>
						<li><a href="#">smenu413</a></li>
					</ul>
				</li>
				<li onmouseover="montre('smenu42',true);" onmouseout="montre('smenu42',false);"><a href="#">smenu42</a>
					<ul id="smenu42">
						<li><a href="#">smenu421</a></li>
 
						<li><a href="#">smenu422</a></li>
						<li><a href="#">smenu423</a></li>
					</ul>
				</li>
				<li><a href="#">smenu43</a></li>
				<li><a href="#">smenu44</a></li>
			</ul>

je ne mets que 2 menus pour pas charger

04/09/2007, 11h46
Bisûnûrs
Ben, tu as 5 onglets dans ton menu, c'est ça qu'il faut calculer.

Un onglet fait 135px de large et a une bordure de 2px (1 à gauche et 1 à droite) donc tu fais 5 * (135 + 2) = 685px.

Tu peux mettre 685px de largeur à ton #menu ul et margin:0 auto aussi :
Code:

1 2 3 4 #menu ul{ width:685px; margin:0 auto; }
04/09/2007, 12h05
philippef

Ok merci.

Mais si je donne une largeur en px est ce que je ne risque pas d'avoir un problème d'affichage (menu sur 2 lignes).
mon écran fait 1280X800 et l'affichage est bon mais si l'écran est plus petit ?
04/09/2007, 12h16
Bisûnûrs

Au contraire, si tu ne lui donnes pas de largeur, ton menu va passer sur deux lignes et si tu lui en donnes une, tu auras une scrollbar horizontale.
04/09/2007, 12h22
philippef

Citation:

Envoyé par Bisûnûrs

Au contraire, si tu ne lui donnes pas de largeur, ton menu va passer sur deux lignes et si tu lui en donnes une, tu auras une scrollbar horizontale.

Ok je ne savais pas.
En tout cas merci