impossible de centrer un menu

**jejestd** · 16/09/2007, 20h01

Bonjours
voila je debute en html css et j'ai creer un petit site, mais j'ai un probleme avec le menu, impossible qu'il s'aligne avec les autres élements pour que tout le site soit centrer dans la page.
Est ce quelqu'un serait d'ou cela peut provenir?
merci d'avance

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
div#container{
    margin:auto;
    width:800px;
}
div {
	text-align:center;
	}
div#bandeau {
	width:600px;
	height:50px;
	background-color:#00CCFF;
	}
div#menu {
	float:left;
	width:100px;
	height:400px;
	background-color:#FF6699;
	}
div#menu_haut {
	width:100px;
	height:200px;
	background-color:#66CC33;
	}
div#menu_bas {
	width:100px;
	height:200px;
	background-color:#CC99CC;
	}
div#contenu {
	float:center;
	width:500px;
	height:400px;
	background-color:#FFCC00;
	}
div#bloc_news {
	float:right;
	width:150px;
	height:150px;
	background-color:#FF3300;
	}
div#pied_page {
	clear:both;
	width:600px;
	height:50px;
	background-color:#33FF99;
	}

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Positionnement CSS</title>
</head>
 
 
<body>
 
 
 
 
  <div id="container">
 
 
 
	<div id="bandeau">Ceci est le bandeau</div>
	<div id="menu">
		<div id="menu_haut">Menu haut</div>
		<div id="menu_bas">Menu bas</div>
	</div>
	<div id="contenu">
		<div id="bloc_news">Bloc News</div>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed egestas  faucibus nunc. Morbi quis neque laoreet ante varius rutrum. Nam arcu  ipsum, blandit placerat, pharetra ut, pulvinar in, nulla. Vivamus  condimentum, elit eu faucibus sollicitudin, nisi metus fermentum mi,  sed egestas purus nunc sit amet est. Cras imperdiet, arcu sed placerat  viverra, arcu justo malesuada augue, a tristique nunc neque vitae  ligula. Mauris bibendum. Praesent nibh. Sed in lacus semper dui  lobortis dignissim. Nunc iaculis, tortor sed commodo tincidunt, neque  ligula porttitor orci, venenatis bibendum ante mi id massa.  Pellentesque ipsum urna, posuere non, pellentesque non, tempus at,  ipsum. Aliquam lacinia nisl sit amet ipsum. Nam volutpat vulputate  lacus. Integer orci dui, lacinia non, blandit sit amet, vulputate vel,  sem. Vestibulum mi neque, pharetra ut, venenatis et, ultricies vitae,  urna.
	</div>
	<div id="pied_page">Ceci est le pied de page</div> </div>
</body>
</html>

**fallais** · 16/09/2007, 20h41

Code :

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

margin: auto;

**MasterOfChakhaL** · 17/09/2007, 07h38

Salut,

Les éléments étant en float, je ne pense pas que le margin: auto fonctionnera pour toi.

Mais vu qur tu connais la largeur du conteneur et que tu imposes une largeur pour les éléments de menu. Tu dois être en mesure de calculer toi même la marge à appliquer sur ton menu.

Si tu mets des margin sur un élément qui est floattant, n'oublie pas de rajouter display: inline. Cela sera ignoré par les navigateurs conformes aux standards, mais ca permet à IE de ne pas doubler la marge de ton élément (c'est un bug)

impossible de centrer un menu

Centrer un élément en CSS

Vue hybride

Discussions similaires

Partager

Partager