Discussion :

[darcy]

Désolé de vous embêter, mais je n'arrive pas à centrer ce fichu menu
Et puis j'ai les sous menus qui ne se ferment pas tout seul... C'est gênant ou pas?
Je vous met le code du menu :
Merci beaucoup si vous avez une idée

Code CSS :

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
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
 
list-style-type: none;
}
#menu {
position:  absolute;
margin-left:0;
margin-right:0;
top: 83px;
left: 6px;
z-index:100;
width: auto;
 
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background:#5897b6;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;

[Bisûnûrs]

Extrait de la FAQ CSS.

[trotters213]

Et puis j'ai les sous menus qui ne se ferment pas tout seul... C'est gênant ou pas?

Rajoute ceci :

Code :

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

onmouseout="montre();"

sur chacun de tes dt où tu as mis onmouseover="javascript:montre('smenuX');

[darcy]

Merci trotters213 pour l'info c'était vraiment cette ligne à ajouter

[darcy]

Extrait de la FAQ CSS.

Merci pour le lien de la FAQ

mais en mettant

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position:  absolute;
z-index:100;
margin-left: auto;
margin-right: auto;
width: auto;
text-align: left

Il ne veut pas se centrer quand même le coquin
Un bug dans mes lignes de commande?

[Bisûnûrs]

Essaie plutôt

Code CSS :

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

text-align:center;

dans ton menu :

Code CSS :

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

1
2
3
4
5
6
7
8
#menu {
position: absolute;
z-index:100;
margin-left: auto;
margin-right: auto;
width: auto;
text-align: center;
}

et dans le body aussi :

Code CSS :

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

1
2
3
body{
text-align:center;
}

Même si j'ai des doutes concernant la résolution du problème.

[darcy]

Hum soit il est complètement à droite sous IE ou soit il est à gauche sous Firefox :p
Presque quoi
En jouant avec le marging? peut être non?

[Bisûnûrs]

Sinon ce que tu peux faire :

Encadrer ton menu dans un autre div qui prend pour largeur la somme de tes div flottants et mettre un margin:0 auto; sur ce div.

Tu peux en effet jouer avec le margin-left, dans le pire des cas, mais suivant la résolution ça ne sera plus centré. Et c'est de la bidouille.

[darcy]

Sinon ce que tu peux faire :

Encadrer ton menu dans un autre div qui prend pour largeur la somme de tes div flottants et mettre un margin:0 auto; sur ce div.

Tu peux en effet jouer avec le margin-left, dans le pire des cas, mais suivant la résolution ça ne sera plus centré. Et c'est de la bidouille.

Je sais que je vais sans doute éxagérer..
Mais cette div quand tu dis : prend pour largeur la somme de tes divs flottants...
En clair? c'est à dire..
Merci

[Bisûnûrs]

Si ton menu est composé de 4 boîtes par exemple, Menu1, Menu2, Menu3 et Menu4, que chacune de ces boîtes fait 100px de large, alors ce nouveau div fera 400px de large.

[darcy]

Ok j'ai compris
Par contre sur dreamweaver j'ai pu me saisir avec la souris du menu navigation et le positionner en id claque sous la bannière...
Pensez vous que cela peut être néfaste de faire comme cela?
Car là il est centré sur les deux navigateurs... et cela m'a rajouté ces codes dans le css à #menu (j'ai mis en gras ce qui a été rajouté après l'avoir centré avec la souris.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
#menu {
	position: absolute;
	z-index:100;
	margin-left:auto;
	margin-right: auto;
	 width:; 
	text-align: center;
	left: 200px;
	top: 92px;
	width: 857px;
	height: 26px; 

[darcy]

Bonjour
le soucis apparemment avec cette modif manuelle avec la souris en déplaçant le menu navigation comme un tableau, c'est que sur mon écran au taf (17 pouces) le menu n'est pas centré..
Quelle casse tête ce css quand même :p

[Bisûnûrs]

Tu n'as qu'à essayer la méthode que je t'ai proposée.

NB : Il faut rajouter un nouveau div.

[darcy]

Salut

rajouter la div pour un menu ok..
donc :
j'ai une div pour le bandeau :

Code HTML :

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

1
2
3
 <body>
 
		<div id="en-tete">

ensuite j'ai la div pour mon menu déroulant

Code HTML :

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

1
2
</div>
<div id="menu">

et enfin une div pour un conteneur

Code HTML :

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

<div id="conteneur">

Maintenant si je veux mettre une autre div pour que le menu entre dedans,
je place où cette nouvelle div ?
dans la div du menu?
ou alors je place la div menu dans la nouvelle div?

:p Je me demande si je me fais bien comprendre..
Merci à vous en tout cas pour votre aide

[Bisûnûrs]

En gros, vu que je ne connais pas ton code :

Code HTML :

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

1
2
3
4
5
<div id="newDiv">
   <div id="menu">
      <!-- ton menu ... -->
   </div>
</div>

Code CSS :

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

1
2
3
4
#newDiv{
   margin:0 auto;
   width: ... /* à remplir par la somme de blablabla voir au-dessus */
}

[darcy]

En gros, vu que je ne connais pas ton code :

Code HTML :

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

1
2
3
4
5
<div id="newDiv">
   <div id="menu">
      <!-- ton menu ... -->
   </div>
</div>

Code CSS :

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

1
2
3
4
#newDiv{
   margin:0 auto;
   width: ... /* à remplir par la somme de blablabla voir au-dessus */
}

Ok merci beaucoup
Je m'y met ce soir en rentrant du taf :p

[darcy]

Tip Top en deux mots
C'est ok merci beaucoup pour ton aide ! ! !