Centrage de site

**koukic11** · 20/01/2010, 11h44

bonjour

j'aurais besoin de votre aide. je ne sais pas si c'est possible, je cherche mais je ne trouve pas ...

je cherche à centrer mon site sur le navigateur au lieu d'être "collé" à gauche, comme par défaut.

est-ce possible déjà ?

je vous file mes codes sources pour exemple

Fichier PHP

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
<!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" >
	<head>
		<title>test</title>
		<meta http–equiv="Content–Type" content="text/html; charset=utf–8" />
		<link rel="stylesheet" media="screen,print,handheld" type="text/css" title="test" href="css/standard.css" />
	</head>
	<body>
		<div id="wrapper"> 
			<div id="en_tete_banniere">
				<img src="images/bandeaux/bandeau_accueil.jpg" alt="" />
			</div>
			<div id="menu_horizontal">
				<?php include("menu_hor.php"); ?>
			</div>
			<div id="menu_gauche">
				<img src="images/photo_accueil.jpg" alt="" />
			</div>
			<div id="contacts">
				<img src="images/contacts.jpg" alt="" />
			</div>
			<div id="corps_exemple">
 
			</div>
			<div id="menu_droite1">
				<img src="images/recherche.jpg" alt="" />
			</div>
			<div id="menu_droite2">
				<img src="images/espace_membre.jpg" alt="" />
			</div>
			<div id="menu_droite3">
				<img src="images/horaires.jpg" alt="" />
			</div>
			<div id="menu_droite4">
				<img src="images/tuteurs.jpg" alt="" />
			</div>
			<div id="pied_de_page">
 
			</div>
		</div>
	</body>
</html>

Fichier 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
body
{
	text-align : center; 
}
 
#wrapper
{
	text-align : left;
	width: 970px;     
	margin: auto;    
}
 
#en_tete_banniere
{
	height: 177px;
	width: 970px;
	/*position: absolute;*/
	top: 0px;
	left: 0px;
}
 
#pied_de_page
{
	height: 22px;
	width: 970px;
	/*position: absolute;*/
	top: 692px;
	left: 0px;
	background-image: url("../images/pied_page/pied_page.jpg");
	background-repeat: no-repeat; 
}
 
a img
{
   border: none; /* Pas de bordure */
}
 
#menu_horizontal
{
	height: 19px;
	width: 970px;
 
	top: 177px;
	left: 0px;
}
 
#corps_exemple
{
	height: 496px;
	width: 571px;
	/*position: absolute;*/
	top: 196px;
	left: 182px;
	background-image: url("../images/corps_exemple.jpg");
	overflow: auto;
}
 
#menu_gauche
{
	height: 452px;
	width: 182px;
	/*position: absolute;*/
	top: 0px;
	left: 0px;
}
 
#contacts
{
	height: 44px;
	width: 182px;
	/*position: absolute;*/
	top: 648px;
	left: 0px;
}
 
#menu_droite1
{
	height: 46px;
	width: 217px;
	position: absolute;
	top: 196px;
	left: 753px;
}
 
#menu_droite2
{
	height: 126px;
	width: 217px;
	position: absolute;
	top: 242px;
	left: 753px;
}
 
#menu_droite3
{
	height: 179px;
	width: 217px;
	position: absolute;
	top: 368px;
	left: 753px;
}
 
#menu_droite4
{
	height: 145px;
	width: 217px;
	position: absolute;
	top: 547px;
	left: 753px;
}

Pour l'instant, j'arrive à centrer le bandeau, le menu horizontal, le menu gauche et contacts. ensuite, c'est le corps même et les 4 menus de droite qui merdent. que dois-je faire ? à part me jeter ???

Merci d'avance.

**nsanabi** · 20/01/2010, 14h57

ce que tu veut faire est très possible

si tu veut utiliser une autre façon de faire:
commence par centrer ton #wrapper , remet les autres div en position relative pour suivre leur conteneur (enlever aussi top et left)

puis pour positionner tes menus de gauche et le contenu utilise le

Code :

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

{ float : left;}

englobe tes menu de droite (pr simplifier) dans une div #menuDroite avec le style

Code :

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

float : right

pour ton footer utilise le

Code :

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

{clear: both ; }

tu peut perfectionner le tout avec des margin , padding et width à volonté

fait quelque recherche sur les notions de flux html, block, inline,boite flottante etc...

**koukic11** · 20/01/2010, 17h22

nsanabi, j'ai lu ton doc sur le centrage et utilisé tes conseils (à part les derniers, sur la recherche, je ne suis pas arrivé là) mais j'ai juste 1 mot à te dire : MERCI !

tout n'est pas parfait (reste 1 truc) mais ça centre pas mal !!!

j'ai donc mis les 2 menus (droite et gauche) en "parents" et j'ai ensuite inclut les sous-menus dedans. j'ai enlevé les top et left et mis "relative" à la place d'"absolute".

voici mon code 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
body 
{
  margin : 0px; 
  padding : 0px;  
  text-align: center; 
}
 
.centrer 
{
  margin-left : auto;
  margin-right : auto;
  width : 970px;
  text-align : left;  
}
 
#en_tete_banniere
{
	height: 177px;
	width: 970px;
	position: relative;
}
 
#menu_horizontal
{
	height: 19px;
	width: 970px;
	position: relative;
}
 
a img
{
   border: none; 
}
 
#menu_gauche
{
	height: 496px;
	width: 182px;
	position: relative;
	float : left;
}
 
#ss_menu_gauche
{
	height: 452px;
	width: 182px;
	position: relative;
}
 
#contacts
{
	height: 44px;
	width: 182px;
	position: relative;
}
 
#corps
{
	height: 496px;
	width: 571px;
	position: absolute;
	/*top: 196px;*/
	/*left: 500px;*/
	text-align:center;
	background-image: url("../images/corps_central.jpg");
	/*background-repeat: no-repeat;*/
	overflow: auto; /* en cas de dépassement du texte, ajout de barre de défilement */
}
 
#menu_droite
{
	height: 496px;
	width: 217px;
	position: relative;
	float : right;
}
 
#menu_droite1
{
	height: 46px;
	width: 217px;
	position: relative;
}
 
#menu_droite2
{
	height: 126px;
	width: 217px;
	position: relative;
}
 
#menu_droite3
{
	height: 179px;
	width: 217px;
	position: relative;
}
 
#menu_droite4
{
	height: 145px;
	width: 217px;
	position: relative;
}
 
#pied_de_page
{
	height: 22px;
	width: 970px;
	position: relative;
	background-image: url("../images/pied_page/bas_de_page.jpg");
	/*background-repeat: no-repeat; */
	clear: both;
}

Voici mon code 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
42
43
44
45
46
47
48
49
50
51
52
53
<!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" >
	<head>
		<title>test</title>
		<meta http–equiv="Content–Type" content="text/html; charset=utf–8" />
		<link rel="stylesheet" media="screen,print,handheld" type="text/css" title="test" href="css/standard4.css" />
		<script src="fonction_java.js" type="text/javascript"></script>
	</head>
	<body>
		<div class="centrer">
			<!-- EN TETE -->
			<div id="en_tete_banniere">
				<img src="images/bandeaux/bandeau_accueil.jpg" alt="" />
			</div>
			<!-- MENU HORIZONTAL -->
			<div id="menu_horizontal">
				<?php include("menu_hor2.php"); ?>
			</div>
			<!-- MENU DE GAUCHE -->
			<div id="menu_gauche">
				<div id="ss_menu_gauche">
					<img src="images/photo_accueil.jpg" alt="" />
				</div>
				<div id="contacts">
					<?php include("contacts_ss_rubriques.html"); ?>
				</div>
			</div>
			<!-- CORPS CENTRAL -->
			<div id="corps">
 
			</div>
			<!-- MENU DE DROITE -->
			<div id="menu_droite">
				<div id="menu_droite1">
					<img src="images/recherche.jpg" alt="" />
				</div>
				<div id="menu_droite2">
					<img src="images/espace_membre.jpg" alt="" />
				</div>
				<div id="menu_droite3">
					<img src="images/horaires.jpg" alt="" />
				</div>
				<div id="menu_droite4">
					<img src="images/tuteurs.jpg" alt="" />
				</div>
			</div>
			<!-- PIED DE PAGE -->
			<div id="pied_de_page">
 
			</div>
		</div>
	</body>
</html>

Il n'y a que ma classe "#corps" que je n'arrive pas à interpréter... Même en rajoutant "relative". Elle se positionne automatiquement à gauche, sur le menu de gauche. Je n'arrive pas à la positionner entre les 2 menus. question top, y'a pas de problème.

qu'en penses-tu ? qu'est-ce que j'oublie ?

merci.

**nsanabi** · 21/01/2010, 11h59

puis pour positionner tes menus de gauche et le contenu utilise le Code :

Code :

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

{ float : left;}

la boite #corps doit, elle aussi être flottante

**koukic11** · 22/01/2010, 11h15

Envoyé par nsanabi

puis pour positionner tes menus de gauche et le contenu utilise le Code :

Excuses-moi, j'ai zappé le mot ... j'ai lu trop rapide, 1000 excuses !

En effet, ça centre le corps. Y'a t-il un moyen de dire, d'abord le corps et ensuit le menu de droite ? car pour l'instant, ça me faire l'inverse.j'ai le menu de droite qui est au milieu, entre le menu de gauche et le corps.

**koukic11** · 22/01/2010, 11h21

Non, c'est bon nsanabi, dsl !

J'avais laissé right au lieu de left.

Je te remercie encore pour ton aide précieuse !!!

**nsanabi** · 22/01/2010, 13h50

juste une petite amélioration , tu pouvait quasiment enlevé la propriété position:relative, elle va prendre la valeur par défaut: static qui convient parfaitement

Centrage de site

Centrer un élément en CSS

Vue hybride

Discussions similaires

Partager

Partager