Discussion :

[flashnet]

Bonjour,
J'ai lu un article pour apprendre à superposer plusieurs blocs et donc réaliser des menus sur la gauche etc...
J'ai vu un autre article pour apprendre à centrer les blocs en mettant les marges en auto... Le problème est que j'arrive bien à centrer mes blocs exepté mon menu.

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
#header {
	width:600px;
	height:50px;
	background-color:#000;
	margin:0 auto 0 auto;
}
#content {
	width:600px;
	height:150px;
	background-color:#666;
	margin:0 auto 0 auto;
}
#footer {
	width:600px;
	height:50px;
	background-color:#000;
	margin:0 auto 0 auto;
}
#menu {
	float:left;
	width:200px;
	height:150px;
	background-color:#CCC;
	margin:0 auto 0 auto;
}

Le code HTML :

Code :

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

1
2
3
4
<div id="header">Header</div>
<div id="menu">Menu</div>
<div id="content">Contenu</div>
<div id="footer">Footer</div>

Tout est centré sauf menu. En enlevant le float du menu celui-ci se centre mais ne se superpose plus à la balise content. Auriez-vous une solution ? Merci

[desert]

Tu peux englober toutes ces div dans un autre.

Code html :

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

1
2
3
4
5
6
<div id="conteneur">
     <div id="header">Header</div>
     <div id="menu">Menu</div>
     <div id="content">Contenu</div>
     <div id="footer">Footer</div>
</div>

Code css :

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

1
2
3
4
#conteneur {
     width:600px;
     margin:0 auto;
}

Comme ca, ton menu sera centré même en position flottante et tu n'auras plus à spécifier à chaque fois les centrages de tes "div-fils".

[flashnet]

Génial, je ne savais pas ça !! Merci beaucoup :-)