Impossible de centrer mon site avec margin :auto;

**kate59** · 03/02/2010, 12h13

kikou,
voila impossible de centrer mon site, avec le margin : auto; voila ma page:
j ai donc div general qui englobe mon site pour le centrer normalement mais la ca marche pas et il reste un peu plus a gauche j ai remarquer que des que j enleve le float:left du center donc du milieu de mon site la page ce centre.

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
<body>
<div id="general">
              <div id="header">
                  <div id="logo_fleur"></div>
                 <div id="logo"></div>
              </div>
       <div id="menu_gauche">
<img src="<?php echo $host;?>images/galets.png"  style="margin:15px       </div>
 
 
			<div id="center">
 
				</div>
 
 
 
		<div id="menu_droit">
 
<img src="<?php echo $host;?>images/galets2.png" style="margin:15px;">
		</div>
 
 
	</div>
 
 
</body>

et 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
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
body {text-align:center; padding:0; background-color:#fff; font-size:0.9em;
color: #522d1d;background: url(../images/degrader.png) repeat-x;width:100%;margin:auto;min-width:600px;max-width:1200px;height:auto;}
#general{ 
margin-left:auto;
margin-right:auto;
margin-top:5px;/*clear:left; */
 width:100%;min-width:600px;
 max-width:1200px;
 height:auto;
 text-align:center;
} /* Bug centrage FF : margin:0 auto */
 
 
/************EN TETE*********************************/
div#header {
height: 100px;
/*max-width:1200px;*/
width:100%;
padding:2px;
margin:auto;
 
	}
/*-#logo_fleur{
padding-top:50px;
padding-left:40px;
/*position:absolute;
z-index:2;
background: url(../images/fleur_Elles.png) no-repeat ;
height:100px;
width:153px;
position:fixed;
overflow:auto; 
    
}
*/
 
div#logo {
 
height:100px;
background: url(../images/header.png) no-repeat! important;
background: none;
margin-top:15px;
width: 60%;
float:right;
margin-right:180px;
}
/*************************************************************************/	
/******************************PAGE*****************************************/	
 
 
div#center {
 
border:#432286 solid 4px;
width:55%;
background-color:white;
float: left;
margin-left: 10px;
margin-bottom: 10px; 
position:relative;
 
 
}
 
 
 
/***************MENU A DROITE***************************/
 
#menu_droit {
font-family: Edwardian Script ITC, times news roman;
height:auto;
float:left;
position:relative;
margin-top:80px;
 
}
#menu_droit a{width:auto;height:18px; font-size:1.8em; font-weight:bold;color:black; text-decoration:none; margin:40px 0 7px 5px;  display:block;}
 
 
/*********************MENU A gauche*********************/
 
#menu_gauche {
font-family: Edwardian Script ITC, times news roman;
position:relative;
height:auto;
float:left;
margin-top:80px;
 
}
#menu_gauche a{width:auto;height:18px; font-size:1.8em; font-weight:bold; color:black; text-decoration:none; margin:40px 0px 7px 15px; display:block;}

quelqu un a une idee?
mERCI

**Macmillenium** · 03/02/2010, 18h15

Tu as testé sous IE et tu es en mode Quirks.
Vérifie si tu as un doctype complet et valide.

Au passage le width:100% sur le conteneur global est inutile, tu as déjà un min/max-width.

**cahnory** · 03/02/2010, 19h33

Pour centrer un block avec "margin: 0 auto;" il faut donner une largeur fixe à celui-ci.
Sinon il faut avoir recours à une technique un peu plus complexe :
http://toolmakersteve.com/Expression...oated-lisC.htm

**Macmillenium** · 03/02/2010, 21h43

Envoyé par Macmillenium

Tu as testé sous IE et tu es en mode Quirks.
Vérifie si tu as un doctype complet et valide.

Ou alors tu testes sous IE6 qui n'implémente pas min/max-width.

Envoyé par cahnory

Pour centrer un block avec "margin: 0 auto;" il faut donner une largeur fixe à celui-ci.

- Valeur fixe : exprimée en px ;
- Valeur relative (calculée par le navigateur) : exprimée en em ou en %.

L'une de ces valeurs(*) affectée à la propriété width ou min-width ou max-width permet de centrer un élément bloc présent dans le flux (non flottant, non positionné en absolue ni fixed) via les marges latérales auto.
Donc, il suffit de spécifier une largeur.

* Sauf valeurs initiales.

**kate59** · 04/02/2010, 13h45

bonjour,
voila une capture d'image, je ne comprend pas j ai changer et mit une largeur fixe #general(colorer en rouge) mais vous voyer il n englobe pas le reste des div alors qu'il devrait.
Avez vous une idée?
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
body {text-align:center; padding:0; background-color:#fff; font-size:0.9em;
color: #522d1d;background: url(../images/degrader.png) repeat-x;width:100%;margin:auto;height:auto;}
#general{ 
 
margin-top:5px;/*clear:left; */
 width:1200px;
 min-width:600px;
 max-width:1200px;
 height:auto;
 text-align:center;
 margin:auto;
background-color:red;
} /* Bug centrage FF : margin:0 auto */
 
 
/*********EN TETE*********************************/
div#header {
height: 100px;
 
width:100%;
padding:2px;
margin:auto;
 
	}
 
 
div#logo {
 
height:100px;
background: url(../images/header.png) no-repeat! important;
background: none;
margin-top:15px;
width: 60%;
 
float:right;
margin-right:180px;
}
/*************************************************************************/	
/******************************PAGE*****************************************/	
 
 
div#center {
 
border:#432286 solid 4px;
width:55%;
background-color:white;
float: left;
margin:auto;
margin-bottom: 10px; 
position:relative;
 
 
}
 
 
 
/*******MENU A DROITE***************************/
 
#menu_droit {
font-family: Edwardian Script ITC, times news roman;
height:auto;
float:left;
position:relative;
margin-top:80px;
 
}
 
 
 
/***********************MENUAgauche***************************/
 
 
 
#menu_gauche {
font-family: Edwardian Script ITC, times news roman;
position:relative;
height:auto;
float:left;
margin-top:80px;
 
}

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
 
<div id="general">
<div id="header">
<div id="logo_fleur"></div>
<div id="logo">
</div>
</div>
<div id="contenu">
<div id="menu_gauche">
<?php if($menu_gauche) { include("menu_gauche.php"); } ?>
<img src="<?php echo $host;?>images/galets.png" style="margin:15px;">
</div>
<div id="center">
<div id="contact">22 Avenue du général de Gaulle - Cabestany - 04.68.61.37.98
</div>
<?php echo $body;?>
</div>
<div id="menu_droit">
<?php if($menu_droit) { include("menu_droit.php"); } ?>
<img src="<?php echo $host;?>images/galets2.png" style="margin:15px;">
</div>
</div>
</div>
</body>
</html>

Merci de votre aide.

**Macmillenium** · 04/02/2010, 13h56

FAQ

http://css.developpez.com/faq/?page=...ment_flottants

Et retire le width:1200px, ton min/max-width ne servent plus à rien dans ce cas (enfin, peut-être si la valeur de width était relative).
A moins que tu veuilles faire ça pour IE6, entre commentaires conditionnels dans ce cas.

**kate59** · 04/02/2010, 15h42

merci j ai enlever le width et mit margin :auto; donc la on vois bien le div général englobe tout mais ça ne centre toujours pas le contenu j ai mit l' image ou on peut voir que c est encore décaler.

j ai remarque que quand j enlève le float left du div center il se centre mais mon menu de droite descend en dessous de la page.

Je désepere !

voici donc 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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
body {text-align:center; padding:0; background-color:#fff; font-size:0.9em;
color: #522d1d;background: url(../images/degrader.png) repeat-x;margin:0px;height:auto;}
#general{ 
margin-left:auto;
margin-right:auto;
margin-top:5px;
min-width:600px;
max-width:1000px;
height:auto;
text-align:center;
 
} 
 
.clear {
	clear : both;	
}
 
/****EN TETE*********************************/
div#header {
height: 100px;
width:100%;
padding:2px;
margin:auto;
 
	}
 
div#logo {
height:100px;
background: url(../images/header.png) no-repeat! important;
background: none;
margin-top:15px;
width: 60%;
float:right;
margin-right:180px;
}
/*******************PAGE***********************/	
 
 
div#center {
 
border:#432286 solid 4px;
width:55%;
background-color:white;
float: left;
margin:auto;
margin-bottom: 10px; 
position:relative;
 
 
}
 
 
 
/*****************MENU A DROITE***************************/
 
#menu_droit {
font-family: Edwardian Script ITC, times news roman;
height:auto;
float:left;
position:relative;
margin-top:80px;
 
}
#menu_droit a{width:auto;height:18px; font-size:1.8em; font-weight:bold;color:black; text-decoration:none; margin:40px 0 7px 5px;  display:block;}
 
 
/**********MENU A gauche***************************/
#menu_gauche {
font-family: Edwardian Script ITC, times news roman;
position:relative;
height:auto;
float:left;
margin-top:80px;
 
}
#menu_gauche a{width:auto;height:18px; font-size:1.8em; font-weight:bold; color:black; text-decoration:none; margin:40px 0px 7px 15px; display:block;}

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
	<div id="general">
 
<div id="header">
<div id="logo_fleur"></div>
<div id="logo">
</div>
</div>
 
 
<div id="menu_gauche">
<?php if($menu_gauche) { include("menu_gauche.php"); } ?>
<img src="<?php echo $host;?>images/galets.png" style="margin:15px;">
</div>
 
 
			<div id="center">
 
<?php echo $body;?>
</div>
 
<div id="menu_droit">
<?php if($menu_droit) { include("menu_droit.php"); } ?>
 
<img src="<?php echo $host;?>images/galets2.png" style="margin:15px;">
</div>
 
<div class="clear"></div>
</div>

merci de votre aide.

**Macmillenium** · 04/02/2010, 16h41

Bon,

Dans le code HTML, place center après menu_droit ;
Dans le code CSS, retire le float:left sur center ;
Mets menu_droit en float:right ;
Déclare un overflow:hidden sur header.

Impossible de centrer mon site avec margin :auto;

Centrer un élément en CSS

Discussions similaires

Partager

Partager