28173 sujets

CSS et mise en forme, CSS3

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

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 :
http://cjoint.com/data/lxl0E4frG3_site.PNG

Voici le source CSS :

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 :

<!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 faire pour que le menu de gauche s'aligne sur la taille de la partie centrale.

Merci pour votre aide,
ZiP
Oryo a écrit :
Salut,
Tu auras sans doute la réponse à ton problème ici:
Tuto alsa 2 colonnes
A+ Smiley cligne


Pour commencer à déblayer le terrain : tes deux blocs (menu à gauche, bloc de contenu à droite) ne sont absolument pas liés l'un à l'autre, si ce n'est dans ton esprit. Rien ne dit au navigateur que le bloc 1 doit prendre la hauteur du bloc 2. Pour avoir deux éléments liés logiquement et dont les hauteurs s'alignent, on peut utiliser... un tableau. Smiley smile

Heureusement, il y a moyen d'obtenir l'effet graphique voulu sans rajouter un « lien logique » (celui entre deux cellules d'une même ligne d'un tableau) qui n'a pas de raison d'être. Cf. le tutoriel cité, ou plus généralement la technique dite des « colonnes factices ».
http://pompage.net/pompe/colonnesfactices/
Bonjour,

Je ne trouve pas de solution à mon problème Smiley decu

Pouvez-vous m'aider à résoudre mon problème ?

Merci,
ZiP
Sujet clos
Aller à