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 :
la hauteur des colonne peut être variable, certain cadre seront supprimés, là ils sont là pour aider à la mise en 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>
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
Partager