Discussion :

[sisi1234]

Je veux créer un mini site avec une entête,un menu déroulant juste en dessous et une partie contenu qui affichera les pages. Chaque partie est dans une div a laquelle je donne une hauteur.Le problème c'est que je n'arrive pas a placer le menu déroulant juste en dessous de l'entête.Il y' a un blanc entre l'entête et le menu.
Celui ci ne veut pas se mettre a la bonne hauteur.En fait le menu déroulant est dans une div qui porte l'id menu.Et quand je donne une couleur de fond a cette div je vois bien qu'elle se place bien en dessous de l'entete.Mais le menu deroulant se trouve en bas de la div qui porte l id menu alors qu'il devrait se trouver a l'intériur de la div menu.

Une precision le menu deroulant est en fait une liste a puce dans une liste a puce:voici en gros le code

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
<div id=entête></div>
<div id="menu">
		<ul>
			<li>
			<a href="#">Produits</a>
			<ul>
				<li><a href="#">Lien1</a></li>
				<li><a href="#">Lien2</a></li>
				<li><a href="#">Lien3</a></li>
				<li><a href="#">Lien4</a></li>
			</ul>
			</li>
		</ul>
 
		<ul>
			<li>
			<a href="#">a propos</a>
			<ul>
				<li><a href="#">Lien1</a></li>
				<li><a href="#">Lien2</a></li>
				<li><a href="#">Lien3</a></li>
				<li><a href="#">Lien4</a></li>
			</ul>
			</li>
		</ul>
 
		<ul>
			<li>
			<a href="#">me contacter</a>
			<ul>
				<li><a href="#">Lien1</a></li>
				<li><a href="#">Lien2</a></li>
				<li><a href="#">Lien3</a></li>
				<li><a href="#">Lien4</a></li>
			</ul>
			</li>
		</ul>
</div>
<div id='contenu'></div>

[Invité]

Bonjour,
c'est bien de poster le code HTML.

Mais je suppose que tu n'as pas posté par hasard dans le forum CSS.
Où est le code CSS associé ?

[EDIT]

Code :

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

<div id=entête></div>

EVITE les noms/variables... avec des accents. C'est source d'ennui...
+ mets les apostrophes/double-quotes qui vont bien :

Code :

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

<div id="entete"></div>

[sisi1234]

Voici le 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
*entete*/
#entete{
/*background-color:#34495e;*/
background-color:#000;
height:5%;
}
 
/*menu*/
#menu {
height:30px;
background-color:green;
}
 
#menu ul{
margin:0;
padding:0;
line-height:30px;
}
 
#menu li{
list-style:none;
float:left;
position:relative;
background-color:#999;
}
 
#menu ul li a{
color:#000;
text-decoration:none;
width:150px;
height:30px;
display:block;
text-align:center;
border:1px solid #000;
}
 
#menu ul ul{
position:absolute;
top:31px;
visibility:hidden;
}
 
#menu li:hover ul{
visibility:visible;
}
 
#menu li:hover {
background-color:#fff;
}
 
#menu ul li ul a:hover{
color:#fff;
background-color:#000;
}

[sisi1234]

j'ai mis un fichier "menu deroulant" en pièce jointe pour que tu ai un aperçu de ce que le css donne sur la page web.

[Invité]

Bonjour,
ajoute :

Code css :

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

1
2
* { padding:0; margin:0; border:0; }
html, body { width:100%; height:100%; min-height:100%; }

et

Code css :

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

1
2
3
4
5
6
#menu {
background-color:green;
  display:table;
  width:100%;
  clear:both;
}

Voir aussi :

• Div et CSS : une mise en page rapide et facile
• Redécouvrez la mise en page avec Flexbox

[sisi1234]

Dommage ça ne marche pas.Il ne se passe rien

je vais essayer autre chose.

Merci quand meme.