centrer le menu navigation

Version imprimable

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:

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;

13/11/2006, 13h56
Bisûnûrs

Extrait de la FAQ CSS.
13/11/2006, 14h12
trotters213

:salut:

Citation:

Envoyé par darcy

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

Rajoute ceci :

Code:

onmouseout="montre();"

sur chacun de tes dt où tu as mis onmouseover="javascript:montre('smenuX'); ;)
13/11/2006, 18h01
darcy

Merci trotters213 pour l'info c'était vraiment cette ligne à ajouter :)
13/11/2006, 18h10
darcy
Citation:

Envoyé par Bisûnûrs

Extrait de la FAQ CSS.

Merci pour le lien de la FAQ :)

mais en mettant
Code:

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?
13/11/2006, 18h38
Bisûnûrs
Essaie plutôt

Code:

text-align:center;

dans ton menu :
Code:

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:

1 2 3 body{ text-align:center; }
Même si j'ai des doutes concernant la résolution du problème.
13/11/2006, 19h26
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?
13/11/2006, 20h14
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.
13/11/2006, 22h39
darcy

Citation:

Envoyé par 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.

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
13/11/2006, 22h48
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.
13/11/2006, 22h58
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:

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;
14/11/2006, 10h02
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
14/11/2006, 10h36
Bisûnûrs

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

NB : Il faut rajouter un nouveau div.
14/11/2006, 11h03
darcy
Salut

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

1 2 3 <body> <div id="en-tete">
ensuite j'ai la div pour mon menu déroulant
Code:

1 2 </div> <div id="menu">
et enfin une div pour un conteneur

Code:

<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

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

Code:

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

Code:

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

Citation:
Envoyé par Bisûnûrs
En gros, vu que je ne connais pas ton code :
Code:

1 2 3 4 5 <div id="newDiv"> <div id="menu">  </div> </div>
Code:

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

14/11/2006, 17h43
darcy

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