mise en page avec les div

**wind_vinch** · 26/09/2007, 14h37

Bonjour,

Suite a une précédente discussion sur les tableaux j'ai décidé de convertir la mise en page de mon site web en div (au lieu des tableaux). Mais cela me pose quelques problèmes. Voici les sources:

XHTML:

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
 
...
<body>
	<div id="banner">
		BANNER
	</div>
	<div id="menu">
		MENU
	</div>
	<div id="content">
		<div id="header">
			HEADER
		</div>
		<div id="contentText">
			CONTENT TEXT
		</div>
	</div>
	<div id="footer">
		FOOTER
	</div>
</body>
</html>

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
body
{
	background-color : #5e5454;
}
 
#banner
{
	background-color : yellow;
	height : 70px;
}
 
#menu
{
	background-color : red;
	width : 300px;
	min-height : 200px;
	float : left;
}
 
#content
{
	background-color : blue;
	float : left;
}
 
#header
{
	background-color : green;
	height : 150px;
}
 
#contentText
{
	background-color : gray;
}
 
#footer
{
	clear: both;
	background-color : aqua;
	height : 50px;
}

voila le résultat : clickez ici

et voila ce que je voudrais (en gros) : clickez par la

question : comment définir la taille d'une div pour "completer" toute la largeur du page web?

Merci d'avance pour vos réponses.

Vinc.

**reno_tidus** · 26/09/2007, 14h42

Bonjour,

Ca ne serait pas avec un

Code :

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

1
2
 
width:auto;

Sans une totale conviction

**wind_vinch** · 26/09/2007, 14h49

malheureusement non

, j'y avait déjà pensé

**Aspic** · 26/09/2007, 15h35

Salut, il faut affecter des largeurs à tes div :

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
body
{
	background-color : #5e5454;
}
 
#banner
{
	background-color : yellow;
	height : 70px;
		width:900px;
}
 
#menu
{
	background-color : red;
	width : 300px;
	min-height : 200px;
	float : left;
		width:300px;
}
 
#content
{
	background-color : blue;
	float : left;
	width:600px;
}
 
#header
{
	background-color : green;
	height : 150px;
	width:600px;
}
 
#contentText
{
	background-color : gray;
	height:50px;
}
 
#footer
{
	clear: both;
	background-color : aqua;
	height : 50px;
		width:900px;
}

**straitch** · 26/09/2007, 15h45

J'ai fais ça et ça semble bien fonctionner ...à verifier

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
body
{margin:auto;
	background-color : #5e5454;
}
 
#banner
{
	background-color : yellow;
	width: 100%;
	height : 70px;
}
 
#menu
{   float:left;
	background-color : red;
	width : 300px;
	min-height : 200px;
 
}
 
#content
{  
	background-color : blue;
	width:100%;
}
 
#header
{	background-color : green;
    width: 100%;
	height : 150px;
}
 
#contentText
{ position: relative;
 left:300px;
	background-color : gray;
	width:100%;
	height: 150px;
}
 
#footer
{
     clear:both;
	background-color : aqua;
	width: 100%;
	height : 50px;
}