Discussion :

[kaiser59]

Slt

Voilà je ss entrain de créer un menu à partir d'un code source que j'ai récuperé:

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
<dl id="menu">
 
		<dt onclick="javascript:montre();"><a href="#">Menu 1</a></dt>
 
		<dt onclick="javascript:montre('smenu2');">Menu 2</dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#">Sous-Menu 2.1</a></li>
					<li><a href="#">Sous-Menu 2.2</a></li>
					<li><a href="#">Sous-Menu 2.3</a></li>
				</ul>
			</dd>	
 
		<dt onclick="javascript:montre('smenu3');">Menu 3</dt>
			<dd id="smenu3">
				<ul>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
				</ul>
			</dd>
 
		<dt onclick="javascript:montre('smenu4');">Menu 4</dt>
			<dd id="smenu4">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>
					<li><a href="#">Sous-Menu 4.1</a></li>
				</ul>
			</dd>
 
</dl>

Cependant je ne comprend pas quand on clique sur le menu 2 - 3 ou 4 dans le menu du lien, le sous menu apparait bien en dessous mais il est :
1 - Légèrement décalé vers la droite
2 - La police du boutton qui est censé avoir un sous-menu et plus grande que celle qui possède un lien directe
3 - Lorsque l'on actualise ou que l'on arrive sur la page (du lien ci-dessus), les sous-menus n'apparaissent seulement qu'après avoir appuyer dessus or les miens apparaissent directement et ne partent pas.

Voici le code css pour 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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
#menu {
position: absolute;
top: 9em;
left: 3em;
}
#menu {
width: 8.5em;
}
#menu dt {
cursor: pointer;
margin: 2px 0;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background-image:	url(Fond/boutton.png);
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: left;
background: blue;
font-size: 0.9em;
}
#menu li a, #menu dt a {
color: yellow;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
font-size:0.8em;
}
 
#menu li a:hover, #menu dt a:hover {
background: #eee;
}

Merci d'avance

[Bisûnûrs]

Tu as dû oublier la partie Javascript.

[kaiser59]

Comme on est dans la partie css j'me suis dit que je vais me faire taper dessus si je met la partie javascript mais si tu as vue le javascript du lien en principe c'est la meme chose comme j'ai fais un copy/paste mais je vais quand meme la donnée au cas où lol :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
<Script language="Javascript" type="text/JavaScript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>

[MasterOfChakhaL]

salut,

as-tu bien retranscrit cette partie dans ton css?

Code :

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

1
2
3
4
5
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}

[kaiser59]

Oui je l'ai mais comme j'ai déjà une liste qui utilise ceci j'ai donc fait une class avec ce qui donne :

Code :

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

1
2
3
4
5
6
7
8
dl.diff, dt.diff, dd.diff, ul.diff, li.diff
{
margin: 			0;
padding: 			0;
width:		             15em;
list-style-type: 	             none;
font-weight: 		bold;
}

[kaiser59]

Slt,

Peux tu me dire comment espacer mes liens (à moins d'utiliser le br mdr)

Merci d'avance