[CSS] Menu

Version imprimable

[CSS] Menu

Bonjour,
J'ai le CSS suivant qui me permet de faire un 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
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:

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 ...http://jibees.free.fr/BO/menu.jpg
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 ...

06/04/2006, 12h31
blueice

Je viens de tester ton code et ca marche pour moi 8O

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.
06/04/2006, 14h04
Jibees

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 ?

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:

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

06/04/2006, 15h13
Jibees

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 ?
http://jibees.free.fr/BO/menu2.jpg
Merci.
06/04/2006, 15h22
blueice

Fixe ta largeur. :D
Enfin je pense ca semble si simple...
06/04/2006, 15h30
Jibees

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 :
http://jibees.free.fr/BO/menu3.jpg
Je n'arrive pas à trouver la propriété CSS qui me résoudra ce pb ...
06/04/2006, 15h33
blueice

Et en le mettant en absolute ? Il sort du flux et devrait chevaucher...
06/04/2006, 15h43
Jibees

Merci pour l'attribut position: absolute;
Alors la ca commence à devenir subtile ....
Ca marche bien lorsque la souris est sur le menu :
http://jibees.free.fr/BO/menu4.jpg
Mais lorsque la souris vient sur le sousmenu, la taille du bloc redevient la taille du menu !
http://jibees.free.fr/BO/menu5.jpg
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.
06/04/2006, 15h49
blueice

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

Moi non plus !

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

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

06/04/2006, 15h58
blueice

Rajoute un position absolute dans le "li" ou "ul" pour voir.
06/04/2006, 16h03
Jibees

Citation:

Envoyé par blueice

Rajoute un position absolute dans le "li" ou "ul" pour voir.

J'avais tenté .. Affreux et illisible !