mise en page, probleme avec les CSS, dernier petit problème

**rdams** · 20/09/2007, 14h15

Bonjour,
je suis en train de faire la maquette d'un site, et je voudrais faire ma mise en page à l'aide de div et les css, voici ce que je voudrais :

le contenu de ma page centré par exemple 80%,
divisé en 3 parties :une entete, un contenu et un pied de page avec une marge entre chaque élément.
ensuite, dans le contenu, je veux 3 colonnes avec des marges également.

ca marche sous ie mais sous firefox, la mise en page est complétement en vrac.
voici le code de la page :

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> 
<title>Site</title>
 
<style>
body {
	background-color:#CCCCFF;
	margin:0 0 0 0;
	text-align:center;
}
div#haut {
	width:80%;
	height:100px;
	padding: 10px;
	margin: 10px 0px 5px 0px;
 
	background-color:#FFFFFF;
	border-style:solid;
	border-color:#0099FF;
	border-width:1px;
}
 
div#contenu {
	width:80%;
	padding: 10px;
	margin: 5px 0px 5px 0px;
 
	background-color:#CCCCFF;
	border-style:solid;
	border-color:#0099FF;
	border-width:1px;
}
 
div#piedpage {
	width:80%;
	height:100px;
	padding: 10px;
	margin: 5px 0px 10px 0px;
 
	background-color:#FFFFFF;
	border-style:solid;
	border-color:#0099FF;
	border-width:1px;
}
 
div#col_1 {
	width:19%;
	float:left;
	padding: 10px;
	margin: 1% 1% 1% 0%;
 
	background-color:#FFFFFF;
	border-style:solid;
	border-color:#0099FF;
	border-width:1px;
}
 
div#col_2 {
	width:60%;
	float:left;
	padding: 10px;
	margin: 1% 0% 1% 0%;
 
	background-color:#FFFFFF;
	border-style:solid;
	border-color:#0099FF;
	border-width:1px;
}
 
div#col_3 {
	width:19%;
	float:left;
	padding: 10px;
	margin: 1% 0% 1% 1%;
 
	background-color:#FFFFFF;
	border-style:solid;
	border-color:#0099FF;
	border-width:1px;
}
</style>
 
 
 
</head>
<body>
	<div id="haut">Ceci est le bandeau</div>
	<div id="contenu">
		<div id="col_1">test<br>gauche</div>
		<div id="col_2">
			test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
		</div>
		<div id="col_3">test<br>droite</div>
	</div>
 
	<div id="piedpage">Ceci est le pied de page</div>
 
<br>
</body>
</html>

la hauteur des colonne peut être variable, certain cadre seront supprimés, là ils sont là pour aider à la mise en page.
Comment rendre compatible la page sous ie et firefox

Je voudrais également pouvoir rajouter des élément div dans mes colonnes de gauche ou de droite, ces div serait un sur l'autre.

Merci pour votre aide

**Bisûnûrs** · 20/09/2007, 14h27

Sur IE6 l'affichage est correct parce que tu as mis text-align:center dans le body, et vu qu'un des bugs IE6 permet de centrer les élements block avec cette propriété, ton site est bien centré.

Dans tous tes div que tu veux centrer, à la place des 0, mets auto.

Exemple :

Code :

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

1
2
3
div#haut {
	margin: 10px auto 5px auto;
}

Et tu devrais développer d'abord sur Firefox et régler les bugs IE plutôt que l'inverse.

De plus, tu as un DOCTYPE qui n'est pas complet, il manque la DTD.

http://xhtml.developpez.com/faq/?pag...#html_doctypes

**rdams** · 20/09/2007, 15h24

en suivant tes conseil, ca avance,
au niveau des colonne col 1 2 3, j'ai modifié le float
col_1 -> left
col 2 -> none
col 3 -> right

et au niveau du html, j'écrit col1 ensuite col3 et pour finir col2.
la position et correct et j'ai bien des marges vertical en placant les auto.

il me reste plus qu'a positionner mes div à l'intérieur des colonne.

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> 
<title>Site</title>
 
<style>
body {
	background-color:#CCCCFF;
	margin:0 0 0 0;
}
div#haut {
	width:80%;
	height:100px;
	margin: 10px auto 5px auto;
 
	background-color:#FFFFFF;
	border-style:solid;
	border-color:#0099FF;
	border-width:1px;
}
div#piedpage {
	width:80%;
	height:100px;
	margin: 5px auto 10px auto;
 
	background-color:#FFFFFF;
	border-style:solid;
	border-color:#0099FF;
	border-width:1px;
}
div#contenu {
	width:80%;
	margin: 5px auto 5px auto;
 
	background-color:#CCCCFF;
	/*border-style:solid;
	border-color:#0099FF;
	border-width:1px;*/
}
div#col_1 {
	position:relative;
	width:19%;
	float:left;
	margin: 0 auto 0 auto;
 
	background-color:#FFFFFF;
	border-style:solid;
	border-color:#0099FF;
	border-width:1px;
}
div#col_2 {
	position:relative;
	width:59%;
	float:none;
	margin: 0 auto 0 auto;
 
	background-color:#FFFFFF;
	border-style:solid;
	border-color:#0099FF;
	border-width:1px;
}
div#col_3 {
	position:relative;
	width:19%;
	float:right;
	margin: 0 auto 0 auto;
 
	background-color:#FFFFFF;
	border-style:solid;
	border-color:#0099FF;
	border-width:1px;
}
</style>
 
</head>
<body>
	<div id="haut">Ceci est le bandeau</div>
 
	<div id="contenu">
		<div id="col_1">test<br>gauche</div>
		<div id="col_3">test<br>droite</div>
		<div id="col_2">
			test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
		</div>
 
	</div>
 
	<div id="piedpage">Ceci est le pied de page</div>
</body>
</html>

**Bisûnûrs** · 20/09/2007, 15h34

Résolu ?

**rdams** · 20/09/2007, 15h44

Je viens de retrouvé un petit probleme,

si le contenu de ma deuxieme colonne est plus petit que ma première,
le pied de page se décale à coté de la colonne gauche sous firefox alors que sous ie elle reste bien en dessous.

**rdams** · 20/09/2007, 16h10

aprés avoir regardé correctement, on a l'impression que le cadre passe en dessous et que le texte est décalé pour être visible.

mise en page, probleme avec les CSS, dernier petit problème

CSS

Discussions similaires

Partager

Partager