probleme de code en css pour menu deroulant

**gaya102** · 02/03/2009, 14h33

voila je me suis renseigné sur le net pour un menu déroulant en css. J'ai trouvé et essayé de l'appliquer à mon site. J'ai du faire une erreur quelque part car ca ne marche pas.

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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Jour J</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design_emeline4.css" /> 
<script type="text/javascript" src="menu.js"></script>
<script language="JavaScript" src="mm_menu.js"></script>
 
 
	   </head>
 
   <body>
       <!-- fond -->
 
       <div id="rubrique">        
           <div>
 
           <img src="image/emeline_rub.jpg" style="float: left">
		<ul id="menuderoulant">
		<li>		   
		   <a href="emelinepresentation.html"><img src="image/presentation_rub_off.jpg" style="float: left" alt="image/presentation_rub_on.jpg" class="rollOver" /></a>
			<ul class="sousmenu">
			<li><a href="lesmariees.html">Les mariées</a></li>
			<li><a href="lesparents.html">Les parents des mariées</a></li>
			<li><a href="lesfrangins.html">les frangins et frangines</a></li>
			<li><a href="lestemoins.html">Les témoins</a></li>
			</ul>
 
			<img src="image/oiseau1_rub.jpg" style="float: left">
		   <li>
		   <a href="emelinejourj.html"><img src="image/jourj_rub_off.jpg" alt="image/jourj_rub_on.jpg" style="float: left" class="rollOver" /></a>
		   <ul class="sousmenu">
			<li><a href="lesmariees.html">Les mariées</a></li>
			<li><a href="lesparents.html">Les parents des mariées</a></li>
			<li><a href="lesfrangins.html">les frangins et frangines</a></li>
			<li><a href="lestemoins.html">Les témoins</a></li>
			</ul>
			</li>
		   <img src="image/oiseau2_rub.jpg" style="float: left">
		   <li>
		   <a href="infospratiques.html"><img src="image/infospratiques_rub_off.jpg" alt="image/infospratiques_rub_on.jpg" style="float: left" class="rollOver" /></a>
		   <ul class="sousmenu">
			<li><a href="lesmariees.html">Les mariées</a></li>
			<li><a href="lesparents.html">Les parents des mariées</a></li>
			<li><a href="lesfrangins.html">les frangins et frangines</a></li>
			<li><a href="lestemoins.html">Les témoins</a></li>
			</ul>
			</li>
		   <img src="image/oiseau3_rub.jpg" style="float: left">
		   <a href="contact.html"><img src="image/contact_rub_off.jpg" alt="image/contact_rub_on.jpg" class="rollOver" style="float: left" /></a>
			<img src="image/oiseau4_rub.jpg" style="float: left">	
			</ul>
				</li>
           </div>
 
		   <div>
 
		   </div>
 
 
 
		   	<script type="text/javascript">
                        var imgs = document.getElementsByTagName('img');
                        
                        for (var i = 0; i < imgs.length; i++)
                        {
                                if (imgs[i].className == 'rollOver')
                                {
                                        imgs[i].onmouseover = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
                                        imgs[i].onmouseout = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
                                        imgs[i].className = '';
                                }
                        }
                        
                        </script>
   </body>
</html>

Code CSS :

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
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
body
{
background-color: #FBE3DE;
}
img {
border:0;
}
 
#unite
{
width: 980px;
height: 542px;
margin: auto;
background-image : url("image/fond_emeline.jpg");
background-repeat: no-repeat;
border :2px solid black;
}
 
#rubrique
{
width: 980px;
height: 542px;
margin: auto;
background-image : url("image/fond_rubrique.jpg");
background-repeat: no-repeat;
border :2px solid black;
}
 
.menu
{
width: 980px;
height: 126px;
}
.en_tete
{
width: 980px;
height: 173px;
}
.bas_page
{
width: 980px;
height: 243px;
}
 
/* pour le menu deroulant */
 
 
#menuderoulant
{
width: 644px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
 
#menuderoulant li
{
float: left;
margin: 0;
padding: 0;
border: 0;
}
 
#menuderoulant .sousmenu
{
list-style-type: none;
margin: 0;
padding: 0;
border: 0;background: yellow;
}
 
#menuderoulant .sousmenu li
{
margin: 0;
padding: 0;
border: 0;
}
 
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
 display: block;
 height: 1%;
 color: #FFF;
 background: #3B4E77;
 margin: 0;
 padding: 4px 8px;
 border-right: 1px solid #fff;
 text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li a:active { background-color: #5F879D; }
 
#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
 display: block;
 color: #FFF;
 margin: 0;
 border: 0;
 text-decoration: none;
}
#menuDeroulant .sousMenu li a:hover
{
 background-image: none;
 background-color: #F2462E;
}

et voici la page
http://www.sandrineetgwen.fr/emelinejourj.html
Merci de votre aide car je bloque depuis hier soir sur se menu déroulant

**GihefBey** · 02/03/2009, 15h18

Bonjour (ça se fait),

Le
<script language="JavaScript" src="mm_menu.js"><script> devrait être
<script type="text/javascript" src="mm_menu.js" />

Tu as oublié de refermer une </div>
Ou plutôt, tu as une <div> (vide) en trop.

Les <img> doivent être refermées selon xHTML <img />

Tu places des <li> en dehors de <ul>
Tu places autre chose que des <li> dans les <ul> (les images d'oiseaux).

-

**gaya102** · 02/03/2009, 15h23

oui excuse moi je manque a tout mes devoir lol
bonjour

on ne peux pas mettre des images entre mes menus?

finalement j'ai fait beaucoup d'erreur dans mon code. Bon je vais essayé de le rectifier
merci en tout cas

**gaya102** · 02/03/2009, 15h28

par contre
Désolé mais je suis débutante
En fait au début je voulais faire un menu déroulant en javascript et je crois que j'ai mis se code a ce moment la. Actuellement je pense qu'il est totalement inutile. Enfin si je ne me trompe pas?

**GihefBey** · 02/03/2009, 15h31

Envoyé par gaya102

on ne peux pas mettre des images entre mes menus?

Si, on peut.
Mais pas comme ça.
Elles doivent (selon ce que je crois deviner par ton code) être placés entre deux <ul>

Code HTML :

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

1
2
3
4
5
6
  </li>
</ul>
<img src="image/oiseau1_rub.jpg" style="float: left">
<!-- le style serait mieux dans la feuille de styles -->
<ul>
  <li>

Ou en arrière-plan.

Tu n'as pas une image de ce que tu souhaites obtenir ?
Où as-tu trouvé ce menu (l'adresse) ?

-

**gaya102** · 02/03/2009, 15h36

ok je vais mettre le style dans le fichier css

mais j'ai fait les modifs que tu m'as dit mais ça ne marche toujours pas

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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Jour J</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design_emeline4.css" /> 
<script type="text/javascript" src="menu.js"></script>
<script language="JavaScript" src="mm_menu.js"></script>
 
 
	   </head>
 
   <body>
       <!-- fond -->
 
       <div id="rubrique">        
           <div>
 
           <img src="image/emeline_rub.jpg" style="float: left">
		<ul id="menuderoulant">
		<li>		   
		   <a href="emelinepresentation.html"><img src="image/presentation_rub_off.jpg" style="float: left" alt="image/presentation_rub_on.jpg" class="rollOver" /></a>
			<ul class="sousmenu">
			<li><a href="lesmariees.html">Les mariées</a></li>
			<li><a href="lesparents.html">Les parents des mariées</a></li>
			<li><a href="lesfrangins.html">les frangins et frangines</a></li>
			<li><a href="lestemoins.html">Les témoins</a></li>
			</ul>
 
			<ul><img src="image/oiseau1_rub.jpg" style="float: left"></ul>
		   <li>
		   <a href="emelinejourj.html"><img src="image/jourj_rub_off.jpg" alt="image/jourj_rub_on.jpg" style="float: left" class="rollOver" /></a>
		   <ul class="sousmenu">
			<li><a href="lesmariees.html">Les mariées</a></li>
			<li><a href="lesparents.html">Les parents des mariées</a></li>
			<li><a href="lesfrangins.html">les frangins et frangines</a></li>
			<li><a href="lestemoins.html">Les témoins</a></li>
			</ul>
			</li>
		   <ul><img src="image/oiseau2_rub.jpg" style="float: left"></ul>
		   <li>
		   <a href="infospratiques.html"><img src="image/infospratiques_rub_off.jpg" alt="image/infospratiques_rub_on.jpg" style="float: left" class="rollOver" /></a>
		   <ul class="sousmenu">
			<li><a href="lesmariees.html">Les mariées</a></li>
			<li><a href="lesparents.html">Les parents des mariées</a></li>
			<li><a href="lesfrangins.html">les frangins et frangines</a></li>
			<li><a href="lestemoins.html">Les témoins</a></li>
			</ul>
			</li>
		   <ul><img src="image/oiseau3_rub.jpg" style="float: left"></ul>
		   <a href="contact.html"><img src="image/contact_rub_off.jpg" alt="image/contact_rub_on.jpg" class="rollOver" style="float: left" /></a>
			<ul><img src="image/oiseau4_rub.jpg" style="float: left"></ul>	
			</ul>
				</li>
           </div>
		   </div>
 
 
 
 
		   	<script type="text/javascript">
                        var imgs = document.getElementsByTagName('img');
                        
                        for (var i = 0; i < imgs.length; i++)
                        {
                                if (imgs[i].className == 'rollOver')
                                {
                                        imgs[i].onmouseover = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
                                        imgs[i].onmouseout = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
                                        imgs[i].className = '';
                                }
                        }
                        
                        </script>
   </body>
</html>

**gaya102** · 02/03/2009, 19h08

J'ai trouvé le tut sur

http://marcarea.com/tuto/menu-deroulant-css/

probleme de code en css pour menu deroulant

CSS

Vue hybride

Discussions similaires

Partager

Partager