Mise en page menu vertical

**frog43** · 26/05/2009, 14h51

Bonjour,
sur ce site, je n'arrive pas à faire que le fond du menu (couleur marron) aille jusqu'en bas de page ...

J'aurais donc besoin d'aide pour réussir à le faire. Voici le 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
 
@charset "UTF-8";
/* CSS Document */
 
 
body{
	margin:0;
	padding:0;
	background-color:#f6e29a;
	font-family:"Lucida Grande CY", Arial, sans-serif;
	font-size:14px;
}
 
#conteneur{
	margin-left : auto;
	margin-right : auto;
	border : 0px;
	z-index:1;
	width: 1000px;
	color:#594240;
	background-color:#ecb802;
}
 
#contenu{
	position:absolute;
	top:0px;
	width:1000px;
	min-height:100%;
	background-color:#ecb802;
	z-index: 2;
}
 
#ban{
	width:1000px;
	height:156px;
	background-image:url(img/ban.jpg);
	background-repeat:no-repeat;
	z-index:4;
}
 
#menu{
	background-color:#6e524e;
	width:150px;
	float:left;	
	min-height:100%;
}
 
.signature{
	color:#6e524e;
	font-size:11px;
	padding-bottom:5px;
}
 
a:hover{
	text-decoration:none;
	color:#FFFFFF;
}
 
a{
	text-decoration:none;
	color:#6e524e;
}

**sibile** · 26/05/2009, 15h13

Je crois que pour que ton min-height en 100% fonctionne il faut que ton body et tous les conteneurs aient une hauteur définie en %. Cela vaut aussi pour height.

De plus il faut aussi spécifier height pour que min-height soit pris en compte ?

**frog43** · 26/05/2009, 15h28

Je comprends pas tout là ...
Dur de définir toutes les hauteur en % ... La aussi je veux bien un peu d'aide ...

**sibile** · 26/05/2009, 16h04

Tu dois avoir ton html en {height:100%} et ton body en { height:100%}.

Code :

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

1
2
3
4
5
6
7
 
html {
height:100%
}
body {
height:100%;
}

Comme je n' ai pas ton code html je ne peux pas tester.

Essaye de voir si ça marche sur IE et Firefox.

**frog43** · 26/05/2009, 16h23

Merci pour ton aide, mais sa ne marche toujours pas ...
Voici le 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
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>J.F. Coste, artisan fabriquant</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
	<div id="conteneur">
    	   <div id="contenu">
    	      <div id="ban"></div>
              <div id="menu"></div>
              <p align="center"><strong>&gt;&gt;</strong> Site en   <strong>CONSTRUCTION &lt;&lt;</strong></p>
        <p class="signature" align="center">Conception &amp; réalisation <a href="http://www.designcreation.fr" target="_blank">Design'Création</a></p>
        </div>
    </div>
</body>
</html>

et le nouveau 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
 
@charset "UTF-8";
/* CSS Document */
 
html {
	height:100%;
}
 
body{
	margin:0;
	padding:0;
	background-color:#f6e29a;
	font-family:"Lucida Grande CY", Arial, sans-serif;
	font-size:14px;
	height:100%;
}
 
#conteneur{
	margin-left : auto;
	margin-right : auto;
	border : 0px;
	z-index:1;
	width: 1000px;
	height:100%;
	color:#594240;
	background-color:#ecb802;
}
 
#contenu{
	position:absolute;
	top:0px;
	width:1000px;
	min-height:100%;
	background-color:#ecb802;
	z-index: 2;
}
 
#ban{
	width:1000px;
	height:156px;
	background-image:url(img/ban.jpg);
	background-repeat:no-repeat;
	z-index:4;
}
 
#menu{
	background-color:#6e524e;
	width:150px;
	float:left;	
	min-height:100%;
}
 
.signature{
	color:#6e524e;
	font-size:11px;
	padding-bottom:5px;
}
 
a:hover{
	text-decoration:none;
	color:#FFFFFF;
}
 
a{
	text-decoration:none;
	color:#6e524e;
}

**sibile** · 26/05/2009, 17h22

Je viens de faire des tests et le menu se présente bien en 100%

à la seule condition que tu mettes ton div #contenu en height:100%.

C' est le parent direct de #menu.

Ca marche sous IE et Firefox.

Pour bien faire il faut tout de même préciser html,body {
height:100% }.

Donc en reprenant ton code cela donne:

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
 
 
html {
	height:100%;
}
 
body{
	margin:0;
	padding:0;
	background-color:#f6e29a;
	font-family:"Lucida Grande CY", Arial, sans-serif;
	font-size:14px;
	height:100%;
}
 
#conteneur{
	margin-left : auto;
	margin-right : auto;
	border : 0px;
	z-index:1;
	width: 1000px;
	color:#594240;
	background-color:#ecb802;
}
 
#contenu{
	position:absolute;
	top:0px;
	width:1000px;
        height:100%;
	background-color:#ecb802;
	z-index: 2;
}
 
#ban{
	width:1000px;
	height:156px;
	background-image:url(img/ban.jpg);
	background-repeat:no-repeat;
	z-index:4;
}
 
#menu{
	background-color:#6e524e;
	width:150px;
	float:left;	
	min-height:100%;
}
 
.signature{
	color:#6e524e;
	font-size:11px;
	padding-bottom:5px;
}
 
a:hover{
	text-decoration:none;
	color:#FFFFFF;
}
 
a{
	text-decoration:none;
	color:#6e524e;
}

Mise en page menu vertical

CSS

Vue hybride

Discussions similaires

Partager

Partager