Discussion :

[philippef]

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 :

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
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

[Bisûnûrs]

Code :

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

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

[philippef]

Merci.

J'ai donc ajouté "margin:0 auto;" à #menu mais ça n'a rien changé, le menu reste à gauche.

[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.

[philippef]

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

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

code du menu

Code html :

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
<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

[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 :

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

1
2
3
4
#menu ul{
   width:685px;
   margin:0 auto;
}