Menu qui ne s'aligne pas sur le centre du site ?

**[ZiP]** · 05/01/2007, 09h04

Bonjour,

J'ai un problème de décalage sur mon site avec le menu.
En effet, la taille de celui-ci ne s'aligne pas sur la taille de la partie du centre :

Voici le source 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
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
 
body
{
	background-color	: #C7E7D5;
	color				: #000000;
	font-family			: Verdana, sans-serif;
	font-size			: 11px;
}
 
h1
{
	background-color	: transparent;
	color				: #8CAD27;
	font-family			: "trebuchet ms", sans-serif;
	font-size			: 25px;
	font-style			: italic;
	margin-top			: 0;
	margin-left			: 15px;
	padding				: 0;
}
 
img
{
	border				: none;
}
 
#global
{
	margin-left			: auto;
	margin-right		: auto;
	width				: 760px;
}
 
#header
{
	background-color	: #FFFFFF;
	border				: 1px #000000 solid;
	color				: #000000;
	height				: 98px;
	width				: 759px;
}
 
#header_menu
{
	margin				: 0;
	padding				: 0;
}
 
#gauche
{
	background-color	: #00913E;
	background-image	: url(images/gauche_fond.jpg);
	background-repeat	: no-repeat;
	border-left			: 1px #000000 solid;
	color				: #000000;
	min-height			: 320px;
	width				: 160px;
}
 
#navigation
{
	padding-top			: 5px;
	min-height			: 35px;
	text-align			: center;
}
 
#centre
{
	background-color	: #FFFFFF;
	background-image	: url(images/centre_fond.jpg);
	background-repeat	: no-repeat;
	border-right		: 1px #000000 solid;
	color				: #000000;	
	margin-left			: 160px;
	margin-top			: -320px;
	min-height			: 320px;
	width				: 600px;
}
 
#map
{
	height				: 450px;
	margin-left			: auto;
	margin-right		: auto;
	width				: 550px;
}
 
#footer
{
	font-size			: 10px;
	text-align			: center;
}
 
.menu
{
	list-style-type		: none;	
	margin				: 0;
	padding				: 0;
}
 
.menu a
{
	display				: block;
	background-color	: inherit;
	color				: #FFF300;
	font-weight			: bold;
	height				: 20px;
	padding-top			: 7px;
	padding-right		: 1em;
	text-align			: right;
	text-decoration		: none;	
}
 
.menu a:hover
{
	background-color	: #007BC1;
	color				: #FFF300;
}
 
.menu li
{
	list-style-type		: none;
}

Le 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
 
<!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" lang="fr">
	<head>
		<title>Mon site</title>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-15" />
		<meta http-equiv="content-style-type" content="text/css" />
		<meta http-equiv="content-language" content="fr" />
		<link rel="stylesheet" href="monsite.css" />
	</head>
	<body>
		<div id="global">
			<div id="header"><img src="images/logo.png" alt="" /><div id="header_menu"></div></div>
			<div id="gauche">
				<div id="navigation">
					<a href="./"><img src="images/menu_sommaire.gif" alt="" onmouseover="this.src='images/menu_sommaire_dessus.gif'" onmouseout="this.src='images/menu_sommaire.gif'" /></a>
					<img src="images/menu_separateur.gif" alt="" />
 
					<a href="./index.php?page=contact"><img src="images/menu_contact.gif" alt="" onmouseover="this.src='images/menu_contact_dessus.gif'" onmouseout="this.src='images/menu_contact.gif'" /></a>
					<img src="images/menu_separateur.gif" alt="" />
					<a href="javascript:history.back();"><img src="images/menu_back.gif" alt="" onmouseover="this.src='images/menu_back_dessus.gif'" onmouseout="this.src='images/menu_back.gif'" /></a>
					<img src="images/menu_separateur.gif" alt="" />
					<a href="javascript:history.next();"><img src="images/menu_next.gif" alt="" onmouseover="this.src='images/menu_next_dessus.gif'" onmouseout="this.src='images/menu_next.gif'" /></a>
				</div>
				<ul class="menu">
					<li><a href="#">aaaaa</a></li>
 
					<li><a href="#">bbbbb</a></li>
					<li><a href="#">ccccc</a></li>
					<li><a href="#">ddddd</a></li>
					<li><a href="#">eeeee</a></li>
				</ul>
			</div>
			<div id="centre"><br/><h1>MON TITRE</h1><br/><div id="map">xxx<br/>yyy<br/>zzz<br/>xxx<br/>yyy<br/>zzz<br/>xxx<br/>yyy<br/>zzz<br/>xxx<br/>yyy<br/>zzz<br/></div><br/></div>
			<div id="footer">
				<br/>Copyright © 2005-2006 Mon site. Tous droits réservés.<br/>
				Page générée en 0,0014s				<br/><br/><a href="http://validator.w3.org/check?uri=referer"><img src="images/w3c_xhtml11.png" alt="Valide XHTML 1.0 Strict"/></a>&nbsp;<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="images/w3c_css.png" alt="Valide CSS"/></a>&nbsp;<a href="http://www.getfirefox.com" onclick="window.open(this.href); return false;"><img src="images/get_firefox.png" alt="Téléchargez Firefox !"/></a><br/>&nbsp;
			</div>
		</div>
	</body>
</html>

Je cherche comment il faut faire pour que le menu de gauche s'aligne sur la taille de la partie centrale.

Merci pour votre aide,
ZiP

**blueice** · 05/01/2007, 09h33

Tu n'indiques pas où dans le code HTML...
Il faut lui demander de remplir toute la hauteur, à supposer qu'il sagisse de ce menu :

Code :

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

1
2
3
4
5
6
7
8
 
.menu
{
    list-style-type:none;    
    margin:0;
    padding:0;
    height:100%;
}

**[ZiP]** · 05/01/2007, 09h40

Bonjour,

Merci pour cette réponse rapide !

La colonne concernée est la suivante : gauche.

J'ai donc rajouté :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
#gauche
{
	background-color	: #00913E;
	background-image	: url(images/gauche_fond.jpg);
	background-repeat	: no-repeat;
	border-left			: 1px #000000 solid;
	color				: #000000;
	height				: 100%;
	min-height			: 320px;
	width				: 160px;
}

Mais le problème n'est pas résolu.

Merci pour ton aide,
ZiP

**Xunil** · 05/01/2007, 10h06

Il faut utiliser la technique de la fausse colonne.

Ajouter un div conteneur englobant ton menu gauche et ton corps, tu mets le background de ton menu dans ce div en repeat-y, et bien sûr tu enlèves le background actuel de ton menu.

**[ZiP]** · 10/01/2007, 08h51

Bonjour,

J'ai donc englobé mes deux parties avec un div et mis ma partie extensible à height : 100%;

C'est impec !

Merci,
ZiP

Menu qui ne s'aligne pas sur le centre du site ?

CSS

Discussions similaires

Partager

Partager