div, css, backgroud-image

Salut a tous
J'ai crée un kit graphique sous photoshop, découpé en slices sous ImageReady et je cherche maintenant à tout reconstituer sous dreamweaver.
J'ai donc crée un fichier CSS ainsi qu'une page HTML.
Le fichier CSS est construit de telle sorte à contenir toutes les images de fond

Code:

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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
 
@charset "latin1;
body {
        margin: 0 ;
        padding: 0 ;
        font: 10pt Verdana, Arial, Helvetica, sans-serif ;
        text-align: center ;
        color: #666666 ;
}
#global {
        width: 790px ;
        margin-right: auto ;
        margin-left: auto ;
        margin-top: 10px ;
        margin-bottom: 1Opx ;
        text-align: left ;
}
#entete {
        padding: 0 ;
        margin: 0 ;
        width:790px;
        height: 175px ;
        background-image: url(../images/ckg_01.png);
}
#content {
        padding: 0 ;
        margin: 0 ;
}
#bande_gauche {
        padding: 0 ;
        margin: 0 ;
        width:44px;
        height: 625px ;
        background-image: url(../images/ckg_02.png);
}
#bande_droite {
        padding: 0 ;
        margin: 0 ;
        width:40px;
        height: 625px ;
        background-image: url(../images/ckg_08.png);
}
#barre_gauche {
        padding: 0 ;
        margin: 0 ;
        width:5px;
        height: 536px ;
        background-image: url(../images/ckg_04.png);
}
#barre_droite {
        padding: 0 ;
        margin: 0 ;
        width:5px;
        height: 536px ;
        background-image: url(../images/ckg_06.png);
}
#menu_gauche {
        padding: 0 ;
        margin: 0 ;
        width:125px;
        height: 536px ;
        background-image: url(../images/ckg_03.png);
}
#menu_droite {
        padding: 0 ;
        margin: 0 ;
        width:130px;
        height: 536px ;
        background-image: url(../images/ckg_07.png);
}
#contenu {
        padding: 0 ;
        margin: 0 ;
        width:441px;
        height: 536px ;
        background-image: url(../images/ckg_05.png);
}
#pied_de_page {
        padding: 0 ;
        margin: 0 ;
        width:706px;
        height: 89px ;
        background-image: url(../images/ckg_09.png);
}
ul {
        list-style-type: none ;
        padding: 0 ;
        margin: 0 ;
        margin-top: 5px ;
        margin-left: 20px ;
}
 
li {
        list-style-image : none ;
        padding-top: 0 ;
        margin-top: 0 ;
        color: #9D9D9D ;
        font-size: 0.85em ;
}
h1 {
        padding: 0px ;
        padding-left: 15px ;
        padding-top: 25px ;
        margin: 0px ;
        font-size: 40pt ;
        font-weight: bold ;
}
h2 {
        padding: 0 ;
        padding-left: 5px ;
        padding-right: 5px ;
        padding-bottom: 2px ;
        margin-left: 5px ;
        margin-right: 10px ;
        margin-bottom: 0px ;
        margin-top: 5px ;
        color: #336699 ;
        font-size: 12pt ;
        font-weight: bold ;
        border-bottom: #336699 2px solid ;
}
h3 {
        padding-left: 5px ;
        padding-right: 5px ;
        padding-bottom: 0px ;
        padding-top: 5px ;
        margin-left: 5px ;
        margin-right: 10px ;
        margin-bottom: 0px ;
        margin-top: 2px ;
        color: #336699 ;
        font-size: 12pt ;
        font-weight: bold ;
        border-bottom: #336699 2px solid ;
}

Le fichier HTML est constitué de <div> avec un id pour associer les images

Code:

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
 
<html>
<head>
<title>Cabinet Campings en France : Accueil...</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles/styles.css" rel="stylesheet" type="text/css">
</head>
 
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="global">
    <div id="entete">
 
    </div>
    <div id="content">
        <div id="bande_gauche">
 
        </div>
        <div id="menu_gauche">
 
        </div>
        <div id="barre_gauche">
 
        </div>
        <div id="contenu">
 
        </div>
        <div id="barre_droite">
 
        </div>
        <div id="menu_droite">
 
        </div>
        <div id="bande_droite">
 
        </div>
    </div>
    <div id="pied_de_page">
 
    </div>
</div>
</body>
 
</html>

Mon probleme est que pour l'entete, l'image s'affiche super bien mais pour le reste, les images se placent les unes en dessous des autres....
Je pense qu'il doit exister une propriétés CSS afin de positionner toutes ces images en sachant que je souhaiterai que mon site soit visible sur differentes tailles écrans....
Merci pour vos futures réponses,