Menu deroulant

**cpam123** · 29/10/2013, 12h43

Bonjour à tous,
Je suis en train de m'exercer à créer un site et en voulant créer un menu je me suis retrouvé confronté à un problème...
Je vous transmet les images pour que vous compreniez mieux :

image 1 :

image 2 :

Sur la premiere image on voit que le menu deroulant s'affiche normalement mais quand je change de page, le meme menu est applati (image 2)..
Est ce que quelqu'un saurais d'où peut venir ce problème ?

Merci d'avance

**Bovino** · 29/10/2013, 13h01

Oui, c'est un problème très courant : ça vient du code.

**cpam123** · 29/10/2013, 13h04

Merci pour ta réponse

Le code est le même pour les 2 pages c'est ca que je ne comprend pas..

**Torgar** · 29/10/2013, 13h11

Par définition, si deux pages ayant le même code ne sont pas identiques, c'est que ce n'est pas le même code !

T'aurais quand même pu être un peu plus précis Bovino, parce que "ça vient du code" c'est large comme un râteau.

**cpam123** · 29/10/2013, 14h09

J'ai beau regardé je ne vois pas de différences..
Personne n'a la solution ?

**rodolphebrd** · 29/10/2013, 14h14

Bonjour,

pouvez-vous poster votre code HTML et CSS s'il vous plait.

**cpam123** · 29/10/2013, 14h23

page correcte:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<title>Biscuiterie</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="description" content="Biscuiterie" />
	<meta name="keywords" content="biscuiterie artisanale" />
	<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
	<div id="header">
		<div id="logo">
		<a href="index.html" title="Lien index">
			<img src="HD/Logo2.png" alt="Mon Logo" />
		</a>	
		</div>
		<div id="h1">
		<h4>Biscuiterie Artisanale </h4>
		<h1>Biscuiterie</h1>
		</div>
		<div>
			<ul id="menu">
				<li><a href="index.html">Accueil</a></li>
				<li><a href="#">Nos produits</a>
					<ul class="sousMenu">
						<li><a href="page1.html">Catégorie 1</a></li>
						<li><a href="page2.html">Catégorie 2</a></li>
						<li><a href="page3.html">Catégorie 3</a></li>
						<li><a href="page4.html">Catégorie 4</a></li>
						<li><a href="page5.html">Catégorie 5</a></li>
						<li><a href="page6.html">Catégorie 6</a></li>
					</ul>
				</li>
				<li><a href="#">Capitales</a>
					<ul class="sousMenu">
						<li><a href="#">Paris</a></li>
						<li><a href="#">Londre</a></li>
					</ul>
				</li>
				<li><a href="#">Prénoms</a>
					<ul class="sousMenu">
						<li><a href="#">Emilie</a></li>
						<li><a href="#">Pierre</a></li>
						<li><a href="#">Lionel</a></li>
						<li><a href="#">Virginie</a></li>
						<li><a href="#">Sebastien</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</head>
<body>
	<div id="categories">
		<div id="categoriea">
			<a href="page1.html" title="Lien vers page1">
				<img src="HD/catégorie 1.jpg" id="categoriea"/>
			</a>	
			<a href="page2.html" title="Lien vers page2">
				<img src="HD/catégorie 2.jpg" id="categorieb"/>
			</a>
			<a href="page3.html" title="Lien vers page3">
				<img src="HD/catégorie 3.jpg" id="categoriec"/>
			</a>
			<a href="page4.html" title="Lien vers page4">
				<img src="HD/catégorie 4.jpg" id="categoriea"/>
			</a>
			<a href="page5.html" title="Lien vers page5">
				<img src="HD/catégorie 2.jpg" id="categorieb"/>
			</a>
			<a href="page6.html" title="Lien vers page6">
				<img src="HD/catégorie 3.jpg" id="categoriec"/>
			</a>
		</div>
	</div>
	<div id="content">
	</div>
	<div id="footer">
	</div>
</body>
</html>

Page non correcte :

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
<html>
<head>
	<title>Biscuiterie</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="description" content="Biscuiterie" />
	<meta name="keywords" content="biscuiterie artisanale" />
	<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
	<div id="header">
		<div id="logo">
		<a href="index.html" title="Lien index">
			<img src="HD/Logo2.png" alt="Mon Logo" />
		</a>	
		</div>
		<div id="h1">
		<h4>Biscuiterie Artisanale </h4>
		<h1>Biscuiterie</h1>
		</div>
		<div>
			<ul id="menu">
				<li><a href="index.html">Accueil</a></li>
				<li><a href="#">Nos produits</a>
					<ul class="sousMenu">
						<li><a href="page1.html">Catégorie 1</a></li>
						<li><a href="page2.html">Catégorie 2</a></li>
						<li><a href="page3.html">Catégorie 3</a></li>
						<li><a href="page4.html">Catégorie 4</a></li>
						<li><a href="page5.html">Catégorie 5</a></li>
						<li><a href="page6.html">Catégorie 6</a></li>
					</ul>
				</li>
				<li><a href="#">Capitales</a>
					<ul class="sousMenu">
						<li><a href="#">Paris</a></li>
						<li><a href="#">Londre</a></li>
					</ul>
				</li>
				<li><a href="#">Prénoms</a>
					<ul class="sousMenu">
						<li><a href="#">Emilie</a></li>
						<li><a href="#">Pierre</a></li>
						<li><a href="#">Lionel</a></li>
						<li><a href="#">Virginie</a></li>
						<li><a href="#">Sebastien</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</head>
<body>
	<div id="content">
		<h1 id="titre1">Page 1</h1>
		<p>Lorem Elsass ipsum commodo vulputate Morbi rossbolla yeuh. pellentesque munster sed adipiscing libero. sed eleifend hopla dui knepfle ftomi! 
	rucksack non semper id, morbi leverwurscht hopla amet, Carola Strasbourg knack gravida tristique Christkindelsmärik ornare Salu*bissame ac mollis 
	baeckeoffe Wurschtsalad sagittis Miss*Dahlias kuglopf amet tellus porta libero, dignissim Mauris wie ornare et lotto-owe sit leo bredele wurscht 
	ullamcorper suspendisse in, Richard*Schirmeck Kabinetpapier lacus hop gal non consectetur vielmols, réchime kougelhopf Spätzle gewurztraminer 
	Oberschaeffolsheim aliquam schnaps flammekueche schneck quam, placerat s'guelt eget risus, libero, messti*de*Bischheim kartoffelsalad Gal. 
	dolor Verdammi Pellentesque Oberschaeffolsheim hopla Coopé*de*Truchtersheim condimentum picon*bière rhoncus bissame elementum geïz senectus 
	météor DNA, turpis, salu Salut*bisamme schpeck quam. mänele merci*vielmols id ac varius und Pfourtz*! Racing. sit sit Heineken hopla tchao*
	bissame jetz*gehts*los nüdle ante ch'ai nullam tellus amet Huguette hoplageiss Chulien chambon leo auctor, blottkopf, elit turpis mamsell geht's 
	Hans Yo*dû. purus Chulia*Roberstau habitant Gal*! barapli so . </p>		
	</div>
	<div id="footer">
	</div>
</body>
</html>

Code CSS :

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
* { margin: 0; padding: 0; }
 
html { background-color: #FFFFCC; }
a {text-decoration: none; }
#header {
height: 282px;
width: 100%;
background-image: url('../HD/Banniere.jpg');
background-repeat: no-repeat;  
background-size: cover; 
}
 
#logo { float: right; margin-top: 27px; margin-right: 50px; }
#h1{ float: left; margin-top: 100px; font-size: 50px; margin-left: 140px; color: white; font-family: Giddyup Std; text-shadow: #FF0000 1px 1px 1px; }
#categoriea { margin-top: 50px; margin-left: 87px; }
#categorieb { margin-top: 50px; margin-left: 50px; }
#categoriec { margin-top: 50px; margin-left: 50px; }
#titre1 { margin-top: 50px; margin-left: 50px; font-family: Giddyup Std; font-size: 35px; }
 
p {
	font-family: Arial;
	text-align : justify;
	color : blue;
	font-size: 15px;
	letter-spacing: 2px;
	margin-left: 100px;
	margin-top: 100px;
	margin-bottom: 100px;
	margin-right: 100px;
	border: solid 1px red;
	padding: 20px 20px 20px 20px;
	position: absolute;
}
 
#menu{
    background: #b60002;  
    width: 100%;
	float: left;
    height: 28px;
    list-style-type: none;
	position: relative;
}
#menu li{
    float: left;
    text-align:center;
    width: 150px;
    margin: 0;
    padding: 0;
    border: 0;
 
}
#menu li a:link, #menu li a:visited{
    display: block;
    height: 1%;
    color: #FFF;
    background: #b60002;
    margin: 0;
    padding: 4px 8px;
    border-right: 1px solid #fff;
    text-decoration: none;
}
#menu li a:hover {background-color: #F2462E;}
#menu li a:active {background-color: #5F879D;}
#menu .sousMenu{
    display: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 0;
}
#menu .sousMenu li{
    float: none;
    margin: 0;
    padding: 0;
    border: 0;
    width: 149px;
    border-top: 1px solid white;
 
}
#menu .sousMenu li a:link, #menu .sousMenu li a:visited{
    display: block;
    color: #FFF;
    margin: 0;
    border: 0;
    text-decoration: none;
}
#menu .sousMenu li a:hover{
    background-image: none;
    background-color: #F2462E;
}
#menu li:hover > .sousMenu {display: block;}

**Candygirl** · 29/10/2013, 14h38

Il n'y a pas de doctype sur la 2ème page ?
De plus ta fermeture de </head> et ouverture de <body> sont mal placés (sur les deux pages).

**cpam123** · 29/10/2013, 14h46

Merci beaucoup pour vos réponses, tout cela était à cause de l'absence du doctype (Merci Candygirl !

)

Le problème est donc résolu !

**Bovino** · 29/10/2013, 15h02

T'aurais quand même pu être un peu plus précis Bovino, parce que "ça vient du code" c'est large comme un râteau.

Bah... c'était ironique et voulait dire en filigrane que sans le code, il est difficile de donner un diagnostic.

**Torgar** · 29/10/2013, 15h04

Envoyé par Bovino

Bah... c'était ironique et voulait dire en filigrane que sans le code, il est difficile de donner un diagnostic.

Moi aussi j'étais ironique

**Publicnew** · 01/11/2013, 00h42

Envoyé par cpam123

Merci beaucoup pour vos réponses, tout cela était à cause de l'absence du doctype (Merci Candygirl !

)

Le problème est donc résolu !

Bonjour

Comment fais-tu pour animer ton menu, au survol de la souris ?

**laurentSc** · 04/11/2013, 20h40

J'ajouterais que mettre le code html du menu dans le head, c'est pas top...

Menu deroulant

HTML

Discussions similaires

Partager

Partager