Alignement de plusieurs div entre eux

**polo66** · 28/01/2009, 16h00

Bonjour a tous,

Débutant, j'ai moi aussi un probleme d'alignement:

comme vous le voyez, j'essaye en vain depuis deux bonnes heures d'aligner mes blocs menus avec le reste de la page...

voici a présent le 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
 
div {
	text-align:left;
	}
div#bandeau {
	margin: 0 auto;
	width:900px;
	height:100px;
	background-color:#00CCFF;
	}
div#flash {
	margin: 0 auto;
	width:900px;
	height:326px;
	background-color:#FFCC00;
	}
div#menu1 {
	width: 450px;
	float:left;
	background-color:#0099CC
	}
div#menu2 {
	width:450px;
	float:left;
	background-color:#CC9933
	}

et le code HTML

Code html :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style_polo.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
</head>
 
<body>
<div id="bandeau">Ceci est le bandeau</div>
<div id="flash">Ceci est le contenu</div>
<div id="menu1">Ceci est le menu 1</div>
<div id="menu2">ceci est le menu 2 </div>
</body>
</html>

je suis sur que la solution est tres conne... mais je bloque. Pouvez vous m'aider ?

Merci !

**12monkeys** · 28/01/2009, 20h20

Bonsoir

Cela s'explique par le fait que tu appliques des marges latérales auto à tes deux premiers div mais pas aux suivants : donc les deux premiers divs sont centrés alors que les suivants ne le sont pas...

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
div {
	text-align:left;
	}
#conteneur { margin: 0 auto;width:900px }
 
div#bandeau {
	height:100px;
	background-color:#00CCFF;
	}
div#flash {
	height:326px;
	background-color:#FFCC00;
	}
div#menu1 {
	width: 450px;
	float:left;
	background-color:#0099CC
	}
div#menu2 {
	width:450px;
	float:left;
	background-color:#CC9933
	}

Code html :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style_polo.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
</head>
 
<body>
<div id="conteneur">
   <div id="bandeau">Ceci est le bandeau</div>
   <div id="flash">Ceci est le contenu</div>
   <div id="menu1">Ceci est le menu 1</div>
   <div id="menu2">ceci est le menu 2 </div>
</div>
</body>
</html>

**polo66** · 29/01/2009, 12h51

bonjour et merci pour ta réponse, ca marche nikel !

bonne journée!

Alignement de plusieurs div entre eux

Positionnement en CSS

Discussions similaires

Partager

Partager