div, css, backgroud-image

**rems033** · 07/11/2007, 10h42

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 :

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
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 :

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
 
<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,

**BnA** · 07/11/2007, 10h54

Salut!

Ton problème, c'est que par défaut, les DIV se mettent les uns en dessous des autres, même si ta largeur totale fait par exemple 600px, et que tes DIV en font 100...

Je te conseille de lire cet article, vraiment intéressant, sur la mise en page CSS.

Developpez.net - Mise en page CSS

Bien à toi!

**rems033** · 07/11/2007, 10h59

je fonce la dessus et je te tiens au jus!
merci et a plus

**rems033** · 07/11/2007, 11h02

J'ai trouvé ma solution.....merci encore pour le lien!

div, css, backgroud-image

CSS

Vue hybride

Discussions similaires

Partager

Partager