Problème menu déroulant vertical

**Tchupa** · 01/03/2008, 08h28

Bonjour a tous ,voila je rencontres actuellement un petit soucis avec mon css et mon menu déroulant , mon problème est qu'il se déroule horizontalement au lieu de verticalement et je n'arrive pas a trouver l'erreur.

Voici mon code HTML

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
79
80
81
82
83
84
85
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
     <head>
          <title>Site auto-ecole</title>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                <style type="text/css" media="screen">
                @import url("./design.css"); <!-- permet d'appeler le css -->
                </style>
 
                <script 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>
     </head>
     <body>
          <div id="header">   
               <div id="banner"></div>
               <ul id="menu">
                    <li><dt onclick="javascript:montre();"><a href=""><img src="images/index_06.gif"></a></dt></li> <!-- Bouton acceuil-->
                    <li><a href=""><img src="images/index_07.gif"></a></li> <!-- séparateur-->
                    <li><dt onclick="javascript:montre('smenu2');"><img src="images/index_08.gif"></dt></li> <!-- Bouton tarif-->
                        <dd id="smenu2">
                        <ul>
                        <li><a href="">Permis Voiture</a></li>
                        <li><a href="">Permis Moto</a></li>
                        <li><a href="">Permis BSR</a></li>
                        </ul>
                        </dd>
                    <li><a href=""><img src="images/index_09.gif"></a></li> <!-- séparateur-->
                    <li><dt onclick="javascript:montre('smenu3');"><img src="images/index_10.gif"></dt></li> <!-- Bouton code-->
                        <dd id="smenu3">
                        <ul>
                        <li><a href="">Inscription</a></li>
                        <li><a href="">Cours</a></li>
                        </ul>
                        </dd>
                    <li><a href=""><img src="images/index_11.gif"></a></li> <!-- séparateur-->
                    <li><dt onclick="javascript:montre('smenu4');"><img src="images/index_12.gif"></dt></li> <!-- Bouton permis-->
                        <dd id="smenu4">
                        <ul>
                        <li><a href="">Permis A</a></li>
                        <li><a href="">Permis B</a></li>
                        <li><a href="">Permis BSR</a></li>
                        </ul>
                        </dd>
                    <li><a href=""><img src="images/index_13.gif"></a></li> <!-- séparateur-->
                    <li><a href=""><img src="images/index_14.gif"></a></li> <!-- Bouton photo-->
 
                    <li><a href=""><img src="images/index_15.gif"></a></li> <!-- séparateur-->
                    <li><dt onclick="javascript:montre('smenu5');"><img src="images/index_16.gif"></dt></li> <!-- Bouton stats-->
                        <dd id="smenu5">
                        <ul>
                        <li><a href="">Taux de reussite voiture</a></li>
                        <li><a href="">Taux de reussite moto</a></li>
                        </ul>
                        </dd>
                    <li><a href=""><img src="images/index_17.gif"></a></li> <!-- séparateur-->
                    <li><dt onclick="javascript:montre('smenu6');"><img src="images/index_18.gif"></dt></li> <!-- Bouton contact-->
                        <dd id="smenu6">
                        <ul>
                        <li><a href="">Contacter auto-ecole</a></li>
                        <li><a href="">Contacter webmaster</a></li>
                        </ul>
                        </dd>
                </ul>
 
 
 
 
 
 
          </div>
     </body>
</html>

Voici mon code css

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
70
71
 
/*Feuille css du design site auto ecole*/
 
body
{
   background:  #000000 url(images/font.png) no-repeat top center;
   width:  1004px; 
   height: 1354px; 
   margin: auto;
   padding: auto;
}
 
 
#header
{
   width: 796px;
   min-height: 1338px;
   background: #FFFFFF;
   margin: auto;
   padding: auto;
}
 
#banner
{
   width: 796px;
   height: 174px;
   background: url(images/index_05.gif) no-repeat top center;
   margin-top: 15px;
}
 
 
 
 
/*parti css du menu */
 
#menu
{
   display:block;
   background-image: url(images/index_06.gif);
   list-style-type: none;
   width: 796px;
   height: 20px;
   margin: 0;
   padding: 0;
 
}
#menu li
{
 
    list-style-type: none;
    float: left;
}
 
#menu dt {
cursor: pointer;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
 
}
 
#menu li a:hover, #menu dt a:hover {
 
background: #eee;
}
 
a img
{
    border: 0px;
}

Donc voila si quelqu'un peut me corriger pour que mon menu se déroule vertiacalement ça serais super sympa.
En vous remerciant.
Amicalement.

**riaStudio** · 01/03/2008, 11h48

En regardant rapidement, je dirais que ton problème vient du "float: left;" sur #menu li.

**Tchupa** · 01/03/2008, 12h22

Oui, j'y avais penser a ceci seulement quand je retire le

Code :

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

float: left;

de mon menu part dans tout les sens

Si besoin est, je peux vous faire un screen à quoi ça ressemble si on le retire .

**riaStudio** · 01/03/2008, 13h01

Ouhla

c'est pas très valide tout sa. Y'a du ménage à faire dans le code avant de pouvoir en tirer quelque chose.

Tu peux t'en tirer avec quelque chose du style :

Code :

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

1
2
3
4
5
6
7
8
9
 
#menu li ul {
	display: none;
	position: absolute;
	width: 150px;
}
#menu li ul li {
	float: left; width: 150px;
}

Mais je te conseilles avant tout de réécrire ton menu dans le style suivant :

Code :

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

1
2
3
4
5
6
7
8
 
<li onclick="javascript:montre('smenu2');"><img src="images/index_08.gif" alt="Tarif"> <!-- Bouton tarif-->
    <ul id="smenu2">
	<li><a href="">Permis Voiture</a></li>
	<li><a href="">Permis Moto</a></li>
	<li><a href="">Permis BSR</a></li>
	</ul>
</li>

eg : Un texte alternatif sur les images et plus de dt/dd utilisés n'importe comment

**Tchupa** · 01/03/2008, 14h42

C'est pas encore ça mais j'ai eut l'impression que j'avais mis des balises en trop.
Enfin voila mon code en suivant tes conseils.

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
70
71
72
73
74
75
76
77
78
79
80
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
     <head>
          <title>Site auto-ecole</title>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		        <style type="text/css" media="screen">
                @import url("./design.css"); <!-- permet d'appeler le css -->
				</style>
 
				<script 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>
     </head>
     <body>
          <div id="header">   
               <div id="banner"></div>
               <ul id="menu">
                    <li><li onclick="javascript:montre();"><a href=""><img src="images/index_06.gif"></a></dt></li> <!-- Bouton acceuil-->
                    <li><a href=""><img src="images/index_07.gif"></a></li> <!-- séparateur-->
                    <li onclick="javascript:montre('smenu2');"><img src="images/index_08.gif" alt="Tarif"> <!-- Bouton tarif-->
					<ul id="smenu2">
					<li><a href="">Permis Voiture</a></li>
					<li><a href="">Permis Moto</a></li>
					<li><a href="">Permis BSR</a></li>
					</ul>
					</li>
                    <li><a href=""><img src="images/index_09.gif"></a></li> <!-- séparateur-->
					<li onclick="javascript:montre('smenu3');"><img src="images/index_10.gif"> <!-- Bouton code-->
						<ul id="smenu3">
						<li><a href="">Inscription</a></li>
						<li><a href="">Cours</a></li>
						</ul>
						</li>
					<li><a href=""><img src="images/index_11.gif"></a></li> <!-- séparateur-->
					<li onclick="javascript:montre('smenu4');"><img src="images/index_12.gif"> <!-- Bouton permis-->
						<ul id="smenu4">
						<li><a href="">Permis A</a></li>
						<li><a href="">Permis B</a></li>
						<li><a href="">Permis BSR</a></li>
						</ul>
						</li>
					<li><a href=""><img src="images/index_13.gif"></a></li> <!-- séparateur-->
					<li><a href=""><img src="images/index_14.gif"></a></li> <!-- Bouton photo-->
 
					<li><a href=""><img src="images/index_15.gif"></a></li> <!-- séparateur-->
					<li onclick="javascript:montre('smenu5');"><img src="images/index_16.gif"> <!-- Bouton stats-->
						<ul id="smenu5">
						<li><a href="">Taux de reussite voiture</a></li>
						<li><a href="">Taux de reussite moto</a></li>
						</ul>
						</li>
					<li><a href=""><img src="images/index_17.gif"></a></li> <!-- séparateur-->
					<li><li onclick="javascript:montre('smenu6');"><img src="images/index_18.gif"> <!-- Bouton contact-->
						<ul id="smenu6">
						<li><a href="">Contacter auto-ecole</a></li>
						<li><a href="">Contacter webmaster</a></li>
						</ul>
						</li>
				</ul>
 
 
 
 
 
 
          </div>
     </body>
</html>

Mon css

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
70
 
/*Feuille css du design site auto ecole*/
 
body
{
   background:  #000000 url(images/font.png) no-repeat top center;
   width:  1004px; 
   height: 1354px; 
   margin: auto;
   padding: auto;
}
 
 
#header
{
   width: 796px;
   min-height: 1338px;
   background: #FFFFFF;
   margin: auto;
   padding: auto;
}
 
#banner
{
   width: 796px;
   height: 174px;
   background: url(images/index_05.gif) no-repeat top center;
   margin-top: 15px;
}
 
 
 
 
/*parti css du menu */
 
#menu
{
   display:block;
   background-image: url(images/index_06.gif);
   list-style-type: none;
   width: 796px;
   height: 20px;
   margin: 0;
   padding: 0;
 
}
#menu li
{
 
	list-style-type: none;
	position: absolute;
	width: 150px;
 
}
 
#menu li ul li {
	float: left; width: 150px;
}
 
 
 
#menu li a:hover, #menu dt a:hover {
 
background: #eee;
}
 
a img
{
	border: 0px;
}

Mais en utilisant cette méthode je rencontre toujours un problème ma barre de menu avec mes boutons ne ressemble a plus rien voici un screen de ce que ça donne:

et le menu devrais ressembler a ça:

**riaStudio** · 01/03/2008, 16h41

Salut,

apparamment, tu as mal interprêté mes propos. Voici ta feuille de style corrigée :

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
70
71
72
73
 
/*Feuille css du design site auto ecole*/
 
body
{
   background:  #000000 url(images/font.png) no-repeat top center;
   width:  1004px; 
   height: 1354px; 
   margin: auto;
   padding: auto;
}
 
 
#header
{
   width: 796px;
   min-height: 1338px;
   background: #FFFFFF;
   margin: auto;
   padding: auto;
}
 
#banner
{
   width: 796px;
   height: 174px;
   background: url(images/index_05.gif) no-repeat top center;
   margin-top: 15px;
}
 
 
 
 
/*parti css du menu */
 
#menu
{
   display:block;
   background-image: url(images/index_06.gif);
   list-style-type: none;
   width: 796px;
   height: 20px;
   margin: 0;
   padding: 0;
 
}
#menu li
{
 
	list-style-type: none;
	float: left;
}
 
#menu li ul {
	position: absolute;
	width: 150px;
}
 
#menu li ul li {
	float: left; width: 150px;
}
 
 
 
#menu li a:hover, #menu dt a:hover {
 
background: #eee;
}
 
a img
{
	border: 0px;
}

**riaStudio** · 01/03/2008, 16h50

Voici également une version valide (au sens w3c) du code html :

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
70
71
72
73
74
75
76
77
78
79
80
81
82
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
     <head>
          <title>Site auto-ecole</title>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		        <style type="text/css" media="screen">
                @import url("./design.css"); <!-- permet d'appeler le css -->
				</style>
 
				<script 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>
     </head>
     <body>
          <div id="header">   
               <div id="banner"></div>
               <ul id="menu">
                    <li onclick="javascript:montre();"><a href=""><img src="images/index_06.gif" alt="" /></a></li> 
                    <!-- Bouton acceuil-->
                    <li><a href=""><img src="images/index_07.gif" alt="" /></a></li> 
                    <!-- séparateur-->
                    <li onclick="javascript:montre('smenu2');"><img src="images/index_08.gif" alt="Tarif" /> <!-- Bouton tarif-->
					<ul id="smenu2">
					<li><a href="">Permis Voiture</a></li>
					<li><a href="">Permis Moto</a></li>
					<li><a href="">Permis BSR</a></li>
					</ul>
					</li>
                    <li><a href=""><img src="images/index_09.gif" alt="" /></a></li> 
                    <!-- séparateur-->
					<li onclick="javascript:montre('smenu3');"><img src="images/index_10.gif" alt="Code" /> <!-- Bouton code-->
						<ul id="smenu3">
						<li><a href="">Inscription</a></li>
						<li><a href="">Cours</a></li>
						</ul>
				 </li>
					<li><a href=""><img src="images/index_11.gif" alt="" /></a></li> 
					<!-- séparateur-->
					<li onclick="javascript:montre('smenu4');"><img src="images/index_12.gif" alt="Permis" /> <!-- Bouton permis-->
						<ul id="smenu4">
						<li><a href="">Permis A</a></li>
						<li><a href="">Permis B</a></li>
						<li><a href="">Permis BSR</a></li>
						</ul>
				 </li>
					<li><a href=""><img src="images/index_13.gif" alt="" /></a></li> 
					<!-- séparateur-->
					<li><a href=""><img src="images/index_14.gif" alt="Photo" /></a></li> 
					<!-- Bouton photo-->
 
					<li><a href=""><img src="images/index_15.gif" alt="" /></a></li> 
					<!-- séparateur-->
					<li onclick="javascript:montre('smenu5');"><img src="images/index_16.gif" alt="Stats" /> <!-- Bouton stats-->
						<ul id="smenu5">
						<li><a href="">Taux de reussite voiture</a></li>
						<li><a href="">Taux de reussite moto</a></li>
						</ul>
				 </li>
					<li><a href=""><img src="images/index_17.gif" alt="" /></a></li> 
					<!-- séparateur-->
					<li onclick="javascript:montre('smenu6');"><img src="images/index_18.gif" alt="Contact" /> <!-- Bouton contact-->
						<ul id="smenu6">
						<li><a href="">Contacter auto-ecole</a></li>
						<li><a href="">Contacter webmaster</a></li>
						</ul>
				 </li>
			</ul>
 
          </div>
     </body>
</html>

Je t'invites à tester régulièrement ton code html avec l'outil suivant http://validator.w3.org/#validate_by_input

**Tchupa** · 01/03/2008, 19h41

Je te remercies beaucoup pour ton aide très précieuse

je comprends mieux maintenant .

Problème menu déroulant vertical

CSS

Discussions similaires

Partager

Partager