Décalage menu CSS

Version imprimable

18/02/2009, 09h41
NicoGT3

Décalage menu CSS

Bonjour a tous,

Je fait appelle a vous afin d'essayer de résoudre mon problème que je traine depuis deux jours ... Voilà, je développe un site internet dont j'ai créé le design/maquette si vous-voulez a l'aide de Photoshop que voici un rapide screen.

Après avoir réaliser ceci, j'ai commencer la mise en page dans DW tout va bien jusqu'au moment ou la construction des sous-menu doit se faire. Et la pas moyen quelque soit la technique utilisé d'arriver a faire les sous-menu correctement ... J'ai essayer le Spry menu horizontale avec du CSS mais je le change tellement qu'il bug a la fin :/, j'ai essayer manuellement mais je ne sais pas du tout comment élaborer un "comportement" en cas de survole etc ... J'ai même essayer sous Fireworks mais je ne suis pas arriver du tout a un bon résultat :/

Il y a surement quelque chose que je fait mal ou autre je ne sais pas mais la je désespère :/ alors j'aimerais bien que quelqu'un ait la bonté de me trouver une solution efficace a mon problème de sous-menu.

De plus, j'ai prévue un hover qui permute les image de base en la mm image avec d'autre effet Photoshop et sa sous DW je sais pas faire :/ mais c'est la seul chose que j'ai réussi a faire fonctionner sous FW ^^.

Donc voila ma requête finale :

J'aimerais qu'on me trouve une solution afin que je puisse installer mon menu et sous-menu correctement (le sous-menu doit s'afficher sous l'onglet qui set survoler et rester afficher tant qu'on ne quitte pas le sous-menu avec sa souris) et un effet de permutation d'image pour chacun des bouton (menu et sous-menu compris).

Merci d'avoir lu.
D'avance merci pour une/les solution(s) apportées future.

Cordialement, NicoGT3.
18/02/2009, 11h31
Jumano

Bonjour,
Le lien que tu donnes ne fonctionne pas.
Peux tu poster le code correspondant à ton menu et sous-menu que l'on puisse mieux comprendre ton problème.

Tu peux déjà également regardé du côté de la Galerie CSS ici, peut être que tu trouveras par toi même ta solution.

Citation:

un effet de permutation d'image pour chacun des bouton

Pour ceci tu peux utiliser le survol d'image : Insertion > Objets Image > Image survolée.
18/02/2009, 11h35
NicoGT3

Bah euh pour moi le lien quand je clic dessus fonctionne très bien perso :/ j'arrive a la page avec mon screen dedans ... Sinon Mon menu/sous-menu est une simple liste que je veux transformé en se fichu menu dynamique ^^.

(Je vais regarder votre lien CSS)

Après avoir regarder ce lien, effectivement le type de menu qu'il me faut c'est le premier de cette page mais en revanche j'en est essayer plusieurs des menu de ce type mais dès que j'y insère mes image ça foire :/

Je vais tout de même réessaye celui la et je vous tiens au courant, je pense que je doit faire une erreur de configuration tout bêtement mais je ne voit pas laquelle ...

Merci d'avoir répondu.
Cordialement, NicoGT3

J'essaye de mettre en forme se menu, j'ai pour cela retirer les texte et remplacer par un espace insécable (temporairement) puis j'ai mis mes 5 première (enfin dernière puisque le menu est inversé a cause de float je croit ou une autre propriété CSS je sais plus) cependant je ne sais pas comment rajouter des onglet de Menu principale :/ (fonctionnelle bien entendu) Pouvez vous m'expliquez s'il vous plait ?

De plus, j'ai bien entendu modifier la taille des blocs des li afin de les ajuster a la taille de mes image mais du coup cela créé une erreur pour les sous-menu qui ne s'affiche pas correctement (une espèce de gros carré blanc apparait a coté d'eux) et également une faute de placement de ceux-ci.

Merci
18/02/2009, 12h36
Jumano

Le mieux serait de poster ton code pour pouvoir le tester et voir le rendu ...

Je test le menu sur une page appart afin de voir si j'y arrive donc voici les élément :
Page html :

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
	<title>Menu horizontal déroulant</title>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" href="style.css" type="text/css" />
	<script type="text/javascript" src="menu.js"></script>
</head>
<body>
<div id="centrer">
 
 
<div id="menu">
	<ul>		
		<li onmouseover="montre('smenu5',true);" onmouseout="montre('smenu5',false);"><img src="../../Dreamweaver Sites/Frets on Fire/image/menu/liens.png" width="74" height="52" alt="liens" />
			<ul id="smenu5">
				<li onmouseover="montre('smenu51',true);" onmouseout="montre('smenu51',false);"><a href="#">&nbsp;</a>
					<ul class="dernier" id="smenu51">
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
 
					</ul>
				</li>
				<li onmouseover="montre('smenu52',true);" onmouseout="montre('smenu52',false);"><a href="#">&nbsp;</a>
					<ul class="dernier" id="smenu52">
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
 
					</ul>
				</li>
				<li onmouseover="montre('smenu53',true);" onmouseout="montre('smenu53',false);"><a href="#">&nbsp;</a>
					<ul class="dernier" id="smenu53">
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
 
					</ul>
				</li>
			</ul>
		</li>
		<li onmouseover="montre('smenu4',true);" onmouseout="montre('smenu4',false);"><img src="../../Dreamweaver Sites/Frets on Fire/image/menu/forum.png" width="74" height="52" alt="forum" />
			<ul id="smenu4">
				<li onmouseover="montre('smenu41',true);" onmouseout="montre('smenu41',false);"><a href="#">&nbsp;</a>
					<ul id="smenu41">
						<li><a href="#">&nbsp;</a></li>
 
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
					</ul>
				</li>
				<li onmouseover="montre('smenu42',true);" onmouseout="montre('smenu42',false);"><a href="#">&nbsp;</a>
					<ul id="smenu42">
						<li><a href="#">&nbsp;</a></li>
 
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
					</ul>
				</li>
				<li><a href="#">&nbsp;</a></li>
				<li><a href="#">&nbsp;</a></li>
			</ul>
 
		</li>	
		<li onmouseover="montre('smenu3',true);" onmouseout="montre('smenu3',false);"><img src="../../Dreamweaver Sites/Frets on Fire/image/menu/tutos.png" width="74" height="52" alt="tutoriaux" />
			<ul id="smenu3">
				<li onmouseover="montre('smenu31',true);" onmouseout="montre('smenu31',false);"><a href="#">&nbsp;</a>
					<ul id="smenu31">
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
 
					</ul>
				</li>
				<li><a href="#">&nbsp;</a></li>
				<li><a href="#">&nbsp;</a></li>
				<li><a href="#">&nbsp;</a></li>
				<li onmouseover="montre('smenu35',true);" onmouseout="montre('smenu35',false);"><a href="#">&nbsp;</a>
					<ul id="smenu35">
 
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
					</ul>
				</li>
				<li onmouseover="montre('smenu36',true);" onmouseout="montre('smenu36',false);"><a href="#">&nbsp;</a>
					<ul id="smenu36">
						<li><a href="#">&nbsp;</a></li>
 
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
					</ul>
				</li>
			</ul>			
		</li>
		<li onmouseover="montre('smenu2',true);" onmouseout="montre('smenu2',false);"><img src="../../Dreamweaver Sites/Frets on Fire/image/menu/tools.png" width="74" height="52" alt="tools" />
			<ul id="smenu2">
				<li><a href="#">&nbsp;</a></li>
 
				<li><a href="#">&nbsp;</a></li>
				<li><a href="#">&nbsp;</a></li>
				<li onmouseover="montre('smenu24',true);" onmouseout="montre('smenu24',false);"><a href="#">&nbsp;</a>
					<ul id="smenu24">
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
 
						<li><a href="#">&nbsp;</a></li>
					</ul>
				</li>
			</ul>			
		</li>	
		<li onmouseover="montre('smenu1',true);" onmouseout="montre('smenu1',false);"><img src="../../Dreamweaver Sites/Frets on Fire/image/menu/fof.png" width="74" height="52" alt="style frets on fire" />
			<ul id="smenu1">
				<li onmouseover="montre('smenu11',true);" onmouseout="montre('smenu11',false);"><a href="#">&nbsp;</a>
					<ul id="smenu11">
 
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
					</ul>
				</li>
				<li><a href="#">&nbsp;</a></li>
				<li onmouseover="montre('smenu13',true);" onmouseout="montre('smenu13',false);"><a href="#">&nbsp;</a>
					<ul id="smenu13">
 
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
					</ul>
				</li>
			</ul>
		</li>
        <li onmouseover="montre('smenu1',true);" onmouseout="montre('smenu1',false);"><img src="../../Dreamweaver Sites/Frets on Fire/image/menu/musiques.png" width="74" height="52" alt="musiques" />
			<ul id="smenu1">
				<li onmouseover="montre('smenu11',true);" onmouseout="montre('smenu11',false);"><a href="#">&nbsp;</a>
					<ul id="smenu11">
 
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
					</ul>
				</li>
				<li><a href="#">&nbsp;</a></li>
				<li onmouseover="montre('smenu13',true);" onmouseout="montre('smenu13',false);"><a href="#">&nbsp;</a>
					<ul id="smenu13">
 
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
					</ul>
				</li>
			</ul>
		</li>
        <li onmouseover="montre('smenu1',true);" onmouseout="montre('smenu1',false);"><img src="../../Dreamweaver Sites/Frets on Fire/image/menu/jeux.png" width="74" height="52" alt="jeux" />
			<ul id="smenu1">
				<li onmouseover="montre('smenu11',true);" onmouseout="montre('smenu11',false);"><a href="#">&nbsp;</a>
					<ul id="smenu11">
 
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
					</ul>
				</li>
				<li><a href="#">&nbsp;</a></li>
				<li onmouseover="montre('smenu13',true);" onmouseout="montre('smenu13',false);"><a href="#">&nbsp;</a>
					<ul id="smenu13">
 
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
					</ul>
				</li>
			</ul>
		</li>
        <li onmouseover="montre('smenu1',true);" onmouseout="montre('smenu1',false);"><img src="../../Dreamweaver Sites/Frets on Fire/image/menu/accueil.png" width="74" height="52" alt="accueil" />
			<ul id="smenu1">
				<li onmouseover="montre('smenu11',true);" onmouseout="montre('smenu11',false);"><a href="#">&nbsp;</a>
					<ul id="smenu11">
 
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
					</ul>
				</li>
				<li><a href="#">&nbsp;</a></li>
				<li onmouseover="montre('smenu13',true);" onmouseout="montre('smenu13',false);"><a href="#">&nbsp;</a>
					<ul id="smenu13">
 
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
						<li><a href="#">&nbsp;</a></li>
					</ul>
				</li>
			</ul>
		</li>
 
	</ul>	
</div>	
</div>	
</body>
</html>

CSS :

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
* {
margin:0px;
padding:0px;
background:#ffffff;
text-align:center;
}
 
body{
font-family:Arial, Helvetica, sans-serif;
}
 
img {
border:none;
}
 
a {  
color:#000000;
text-decoration:none;
text-transform:none;
}
 
/*centre la page et donne la largeur pour une basse résolution*/
#centrer {
margin-left:auto;
margin-right:auto;
width:776px;
}
 
/****************************/
/* 	début menu	déroulant	*/
/****************************/
ul, li {
list-style-type:none;
}
 
/*chaque sous-menu*/
#menu ul li {
	position:relative;
	float:right;
	width:74px;
	cursor:pointer;
	display:block;
	background:none;
	height:52px;
}
 
/*carré déroulant sous un sous-menu niveau 1*/
#menu ul li ul {
display:none;
position:absolute;
width:125px;
border:1px solid #dddddd;
border-top:none;
top:22px;
left:0;
}
 
#menu ul li ul li {
height:100%;
}
 
#menu ul li ul li a {
color:#3399ff;
font-size:11px;
font-weight:normal;
display:block;
height:100%;
border-top:1px solid #dddddd;
}
 
/*au passage de la souris on inverse les couleurs de la case*/
#menu ul li ul li a:hover {
color:#ffffff;
background:#3399ff;
}
 
/*décalage des sous-menu niveau 2 vers la droite*/
#menu ul li ul li ul {
top:0px;
left:125px;
}
 
/*décalage du sous-menu niveau 2 le plus à droite vers la gauche*/
#menu ul li ul li ul.dernier {
left:-127px;
}

le JS ne change pas de l'original

Merci

18/02/2009, 16h36
Jumano

Le problème est que ce script est fait pour 5 blocs, il te faut modifier les diverses dimensions pour l'adapter.
Si tu veux rajouter des blocs, il te faut les ajouter en haut du code et non à la suite.
De plus fait attention un "id" doit être unique sur une même page.

Bah pour rajouter un bloc j'ai juste copier/coller un bout de la liste du bloc principale c'est pour sa que les id sont inchangé mais si je les colle au début ? faudra changer quoi comme id ? :/

On peut lock le sujet :') J'ai ENFIN réussi a trouver et mon menu marche parfaitement bien :) Merci a vous.

J'ai rien dit, il marche parfaitement bien dans DW en mode Affichage direct cependant sous Firefox et IE il ne fonctionne pas tout a fait sur deux points :

- Le positionnement des sous-menus : n mode Affichage en Direct les sous-menu apparaisse bien positionner (j'ai affecter les balises correspondante par un positionnement absolu alors que c'était un relatif est-ce que c'est sa peut etre ?) alors que sous firefox ils apparaissent trop pas gauche et sous IE trop a droite ....

- Sous les deux navigateurs la bizarrement quand je descend ma souris dans les sous-menus, ces derniers disparaissent :/ tandis quand mode Affichage Direct il reste afficher comme ils se devraient.

Quelqu'un pour réglé ces deux petits détails ?

Voici mon code HTMl actuel :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
	<title>Menu horizontal déroulant</title>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" href="style.css" type="text/css" />
	<script type="text/javascript" src="menu.js"></script>
</head>
<body>
<div id="centrer">
 
 
<div id="menu">
	<ul>
   	  <li onmouseover="montre('smenu7',true);" onmouseout="montre('smenu7',false);"><a href="#"><img src="../../Dreamweaver Sites/Frets on Fire/image/menu/liens.png" width="74" height="52" alt="Liens" /></a></li>
    	<li onmouseover="montre('smenu7',true);" onmouseout="montre('smenu7',false);"><a href="#"><img src="../../Dreamweaver Sites/Frets on Fire/image/menu/forum.png" width="74" height="52" alt="Forum" /></a></li>
      <li onmouseover="montre('smenu6',true);" onmouseout="montre('smenu6',false);"><a href="#"><img src="../../Dreamweaver Sites/Frets on Fire/image/menu/tutos.png" width="74" height="52" alt="Tutoriaux" /></a></li>
		<li onmouseover="montre('smenu5',true);" onmouseout="montre('smenu5',false);"><a href="#"><img src="../../Dreamweaver Sites/Frets on Fire/image/menu/tools.png" width="74" height="52" alt="Tools" /></a></li>
		<li onmouseover="montre('smenu4',true);" onmouseout="montre('smenu4',false);"><img src="../../Dreamweaver Sites/Frets on Fire/image/menu/fof.png" width="74" height="52" alt="Styles FoF" />
			<ul id="smenu4">
				<li onmouseover="montre('smenu41',true);" onmouseout="montre('smenu41',false);"><a href="#"><img src="../../Dreamweaver Sites/Frets on Fire/image/sousmenu/mods.png" width="64" height="36" alt="Mods" /></a></li>
				<li onmouseover="montre('smenu42',true);" onmouseout="montre('smenu42',false);"><a href="#"><img src="../../Dreamweaver Sites/Frets on Fire/image/sousmenu/themes.png" width="64" height="36" alt="Th&egrave;mes" /></a></li>
                <li onmouseover="montre('smenu43',true);" onmouseout="montre('smenu43',false);"><a href="#"><img src="../../Dreamweaver Sites/Frets on Fire/image/sousmenu/bganim.png" width="64" height="36" alt="Backgrounds Anim&eacute;s" /></a></li>
			</ul>
		</li>	
		<li onmouseover="montre('smenu3',true);" onmouseout="montre('smenu3',false);"><img src="../../Dreamweaver Sites/Frets on Fire/image/menu/musiques.png" width="74" height="52" alt="Musiques" />
			<ul id="smenu3">
			  <li onmouseover="montre('smenu31',true);" onmouseout="montre('smenu31',false);"><a href="#"><img src="../../Dreamweaver Sites/Frets on Fire/image/sousmenu/gh.png" width="64" height="36" alt="Packs GH" /></a></li>
			  <li onmouseover="montre('smenu32',true);" onmouseout="montre('smenu32',false);"><a href="#"><img src="../../Dreamweaver Sites/Frets on Fire/image/sousmenu/rb.png" width="64" height="36" alt="Packs RB" /></a></li>
			  <li onmouseover="montre('smenu33',true);" onmouseout="montre('smenu33',false);"><a href="#"><img src="../../Dreamweaver Sites/Frets on Fire/image/sousmenu/ph.png" width="64" height="36" alt="Packs PH" /></a></li>
              <li onmouseover="montre('smenu34',true);" onmouseout="montre('smenu34',false);"><a href="#"><img src="../../Dreamweaver Sites/Frets on Fire/image/sousmenu/autre.png" width="64" height="36" alt="Autres packs" /></a></li>
			</ul>			
		</li>
		<li onmouseover="montre('smenu2',true);" onmouseout="montre('smenu2',false);"><a href="#"><img src="../../Dreamweaver Sites/Frets on Fire/image/menu/jeux.png" width="74" height="52" alt="Jeux Versions" /></a></li>	
		<li onmouseover="montre('smenu1',true);" onmouseout="montre('smenu1',false);"><a href="#"><img src="../../Dreamweaver Sites/Frets on Fire/image/menu/accueil.png" width="74" height="52" alt="Accueil" /></a></li>               
  	</ul>	
</div>	
</div>	
</body>
</html>

Mon code CSS actuel :

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
* {
margin:0px;
padding:0px;
background:#ffffff;
text-align:center;
}
 
body{
font-family:Arial, Helvetica, sans-serif;
}
 
img {
border:none;
}
 
a {  
color:#000000;
text-decoration:none;
text-transform:none;
}
 
/*centre la page et donne la largeur pour une basse résolution*/
#centrer {
	margin-left:auto;
	margin-right:auto;
	width:600px;
}
 
/****************************/
/* 	début menu	déroulant	*/
/****************************/
ul, li {
list-style-type:none;
}
 
/*chaque sous-menu*/
#menu ul li {
	position:relative;
	float:right;
	width:74px;
	cursor:pointer;
	display:block;
	background:none;
	height:52px;
}
 
/*carré déroulant sous un sous-menu niveau 1*/
#menu ul li ul {
	display:none;
	position:relative;
	width:64px;
	border:1px solid #dddddd;
	border-top:none;
	right: 3px;
}
 
#menu ul li ul li {
height:100%;
}
 
#menu ul li ul li a {
	font-size:11px;
	font-weight:normal;
	display:block;
	height:100%;
}

Et finalement le code JS qui n'a toujours pas changer :

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
//au chargement de la page, on appelle la fonction montre()
window.onload=montre;
 
//affichage du menu déroulant et placement de ce dernier
function montre(id,affiche)
{
	var d = document.getElementById(id);
	//si on quitte un élément du menu
	if (d && !affiche) 
	{
		d.style.display='none'; //on l'efface
		var c=d.parentNode; //son parent
		if (c.parentNode.parentNode.parentNode.tagName!='DIV')  //si c'est un sous-menu, on rend à son parent les couleurs d'origine
		{
			c.firstChild.style.color='#39f';
			c.firstChild.style.background='#fff';
		}
	}
	//sinon si on se mets sur un élément du menu
	else if (d && affiche)
	{ 
		d.style.display='block'; //on l'affiche
		var c=d.parentNode; //son parent
		if (c.parentNode.parentNode.parentNode.tagName!='DIV') //si c'est un sous-menu, on donne à son parent les couleurs de survol
		{
			c.firstChild.style.color='#fff';
			c.firstChild.style.background='#39f';
		}
	}
}

Merci.
Cordialement, NicoGT3.

Essaie ceci :

Code:

1
2
3
4
5
6
7
8
#menu ul li ul {
    display: none;
    position: absolute;
    left: 0;
    width: 74px;
    border: 1px solid #dddddd;
    border-top: none;
}

20/02/2009, 10h01
NicoGT3

Merci, en effet, cela positionne correctement (ou presque) le bloc cependant j'ai deux petit souci encore :/ :

- Sous Firefox : J'ai l'impression qu'il y a un pixel de background entre le menu principale et le sous-menu (c'est la solution qui me semble venir a l'esprit du faite que quand j'essaye de passer sur mon sous-menu il disparaisse.

Comment régler ce souci (si c'est bien le cas) ?

- Sous IE : Le positionnement gauche-droite est bon mais le problème c'est que le sous-menu s'affiche au même niveau que le menu (par dessus) donc le premier élément du sous-menu s'affiche par dessus l'onglet parent, et le reste en dessous.

Comment régler cette position "haut-bas" ?

Merci Desert, de ta précédente réponse.
20/02/2009, 11h23
desert

Désolé, j'ai oublié d'indiquer une chose dans le code au-dessus. :oops:

Code:

top: 52px;

Pour le sous-menu qui disparaît quand on passe dessus, tu peux peut-être jouer avec les z-index.
Il y avait le même problème ici je crois : http://www.developpez.net/forums/d69...assage-souris/
20/02/2009, 13h33
NicoGT3

Merci :p ajouter cette petite ligne a régler les deux souci d'un coup :') le menu marche parfaitement pour le moment sous DW, Firefox et IE me reste plus qu'a appliquer le truc des image permuter et voir si sa marche toujours :)

Merci

L'insertion de toute les image survolé marche nickel, mon Menu est terminé et parfaitement opérationnel, maintenant plus qu'a l'insérer sur ma page original et le tour est joué.

Merci a vous tous, Bonne continuation.
Cordialement, NicoGT3.

Juste une question : a quoi correspond l'étoile : * dans le CSS ? car je ne trouve nul part cette élément dans l'html alors qu'est-ce qu'il veut dire ?

Le tour est pas si facile a jouer que sa ^^ sinon j'ai compris le souci que j'ai cette fois ci mais comment le réglé ? voila au faite mon menu aime pas qu'il y est des div par dessus lui xD Donc comment faire pour dire que le div menu soit en premier plan absolument ? Car dans ma page il y a disons plusieurs couche de div sur le même endroit au niveau du menu : par ordre il y a header puis menu puis page mais je voudrais conserver cette ordre dans l'html mais juste dire que le menu soit tout au dessus (a la façon des calque photoshop par exemple)

Comment faire ?

Merci
21/02/2009, 16h43
NicoGT3

Personne ne sait comment faire pour qu'une balise div soit considéré au premier plan ? :/
21/02/2009, 16h53
desert

L'étoile *, c'est pour désigner toutes les balises qu'il y a sur ta page (p, div, body, a, span, etc...).
Pour le menu au premier plan, regarde la page du lien que j'ai posté plus haut au sujet des z-index. Cela devrait t'aider.
21/02/2009, 17h07
NicoGT3

Merci bien, cette fois ci mon menu est bien intégré a ma page et fonctionne parfaitement comme je l'imaginais. Merci a tous et bonne continuation.