[CSS] Menu

**Jibees** · 06/04/2006, 12h10

Bonjour,
J'ai le CSS suivant qui me permet de faire un menu :

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
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: relative;
top: 0;
left: 0;
z-index:100;
width: 80%;
}
#menu dl {
float: left;
/*width: 8em;*/
margin: 0px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
/*background: #ccc;*/
/*border: 1px solid #FFFC00;*/
}
#menu dd {
border: 1px solid #FFFC00;
font-weight: lighter;
font-size: x-small;
font-family: "Times New Roman";
width: 90px;
 
}
#menu li {
text-align: center;
/*background: #fff;*/
background: #B90105;
width: 90px;
}
/*#menu li a,*/ #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 80%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
/*background: #eee;*/
background: #FFFC00;
}
 
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; 
}
 
a {text-decoration: none;
color: black;
color: #222;
}
 
a:hover {
text-decoration:underline;
}

Et voici le menu :

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
 
 
<div id="menu">
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');"><img src='images/Menu/accueil1.gif' border='0' name='menu1'></dt>
			<dd id="smenu1">
				<ul>
					<li><a href="#">Sous-Menu 1.1</a></li>
					<li><a href="#">Sous-Menu 1.2</a></li>
					<li><a href="#">Sous-Menu 1.3</a></li>
 
				</ul>
 
			</dd>
	</dl>
 
 
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');"><img src='images/Menu/club1.gif' border='0' name='menu2'></dt>
...

Malheureusement comme vous pouvez le constater ca ne fonctionne pas beaucoup ...

Tout ne s'affiche pas sur une ligne alors que ca devrait ... Les sous menu sont ouverts alors que la souris ne passe pas dessus ....
Des idées ?
jb

ps : même pb sous FF et IE ...

**blueice** · 06/04/2006, 12h31

Je viens de tester ton code et ca marche pour moi

Tu peux envoyer le lien de ta page, que je puisse tester en réel...
Ca vient peut être de la mise en page générale.

**Jibees** · 06/04/2006, 14h04

j'ai résolu mon pb de menu sur deux lignes. en fait l'attribut width: était à 80% au lieu de 100%. Deux autres pb toutefois ...

¤ Quand on passe sur les menus, le sous menu s'affiche, tres bien, mais fait descendre l'ensemble de la page... Je ne sais pas si je suis tres clair . En gros le sousmenu, à son ouverture décale tout vers le bas.
Je précise que mon sousmenu est dans une case d'un tableau.
¤ Quand la souris n'est plus sur un menu, le sousmenu du dernier menu reste affiché.... Comment faire en sorte que lorsque la souris n'est plus sur aucune fenetre, aucun sous menu ne soit visible ?

**Jibees** · 06/04/2006, 14h21

Bon je me fais les questions réponse !

Pour ne pas voir le menu des que la souris est en dehors j'ai utilisé : onmouseout=""

Code :

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

1
2
<dt onmouseover="javascript:montre('smenu3');"onmouseout="javascript:montre();"><img src='images/Menu/Parcours1.gif' border='0' name='menu3'></dt>
			<dd id="smenu3"onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">

Par contre j'ai toujours mes sousmenus qui décalent tout vers le bas. J'aimerai qu'ils soient au dessus ... Mais je crains que c'est du en pb du tableau ... J'ai un peu peur ...

**Jibees** · 06/04/2006, 15h13

Zou je continue tout seul !!
Pour le pb du décalage vers le bas je l'ai enlevé du tableau et mis en position absolute. Voila c mieux !
Sinon j'ai un autre pb. Quand le texte est plus grand que 80px (la taille du bloc de la liste du sousmenu) tout est décalé vers la droite ... Comment faire pour qu'il n'y est pas ce décalage (qui engendre ici un retour à la ligne) ? Que tout reste bien à sa place ?

Merci.

**blueice** · 06/04/2006, 15h22

Fixe ta largeur.

Enfin je pense ca semble si simple...

**Jibees** · 06/04/2006, 15h30

Si je fixe la largeur du sousmenu à 80px par exemple alors "Situation Géographique" se trouve sur deux lignes ...
Non moi ce qu'il me faudrait c'est qq chose comme ca :

Je n'arrive pas à trouver la propriété CSS qui me résoudra ce pb ...

**blueice** · 06/04/2006, 15h33

Et en le mettant en absolute ? Il sort du flux et devrait chevaucher...

**Jibees** · 06/04/2006, 15h43

Merci pour l'attribut position: absolute;
Alors la ca commence à devenir subtile ....
Ca marche bien lorsque la souris est sur le menu :

Mais lorsque la souris vient sur le sousmenu, la taille du bloc redevient la taille du menu !

Conclusion c moche !

EDIT
Je viens de me rendre compte que sous FF cela fonctionne tres bien. Je pense que c'est l'attribut width: auto; de li{} qui n'est pas compris par IE. Je ne vois pas comment faire.

**blueice** · 06/04/2006, 15h49

Redonne ton code css et ton code html.
Je sais plus ou tu en es...

**Jibees** · 06/04/2006, 15h52

Moi non plus !

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
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
z-index:2;
width: 100%;
top: 14em;
left: 11em;
}
#menu dl {
float: left;
margin: 0px;
}
#menu dt {
cursor: pointer;
}
#menu dd {
border: 2px solid #FFFC00;
width: auto;
display: none;
z-index:1;
position: absolute;
}
#menu li {
text-align: left;
background: #B90105;
width: auto;
z-index:1;
 
}
#menu dt a {
display: block;
height: 100%;
border: 0 none;
position: absolute;
 
}
#menu li a:hover, #menu dt a:hover {
}
 
a {
font-weight: bold;
font-size: 12px;
font-family: "Arial";
text-decoration: none;
color: white;
}
 
a:hover {
text-decoration: none;
color: #FFFC00;
}

et le code Html n'a pas changé je pense.

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
<div id="menu">
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();"><img src='images/Menu/accueil1.gif' border='0' name='menu1'></dt>
 
	</dl>
 
 
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');"onmouseout="javascript:montre();"><img src='images/Menu/club1.gif' border='0' name='menu2'></dt>
			<dd id="smenu2"onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">> Situation Géographique</a></li>
					<li><a href="#">> Les Membres</a></li>
					<li><a href="#">> Nous contacter</a></li>
				</ul>
			</dd>
	</dl>
	.........................