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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
|
@charset "utf-8";
/* CSS Document */
html, body { /*paramètres qui seront appliqués à toutes les pages sauf en cas de personnalisation plus loin*/
background-color:#000000; /*fond noir*/
margin:0; /*marge exterieur*/
padding:0; /*marge interieur*/
color:#FFFFFF; /*couleur du texte: blanc*/
font-family:Arial, Helvetica, sans-serif; /*police par défaut*/
font-size:14px; /*taille police par défaut*/
}
/*DEBUT PAGE INDEX*/
#imgindex { /*div contenant l'image de la page d'index*/
position:absolute;
top:50%; /*permet de centrer verticalement*/
left:50%; /*permet de centrer horizontalement*/
margin-top:-250px; /* - moitié de la hauteur : permet de centrer verticalement*/
margin-left:-425px; /* - moitié de la longueur : permet de centrer horizontalement*/
width:850px; /*longueur*/
height:500px; /*hauteur*/
}
/*FIN PAGE INDEX*/
#barre_repeat { /*div pour la petite barre de fond qui est répétée tout le long : images/background.gif*/
position:absolute;
top:0px; /*position haute : collé à la fenêtre*/
left:0px; /*position gauche : collé à la fenêtre*/
background-image:url(images/background.gif); /*image de fond*/
background-repeat:repeat-x; /*l'image est répétéé dur la longueur jusqu'à remplir le div*/
width:100%; /*longueur du div : toute la longueur de la fenêtre*/
height:394px; /*hauteur fixe de la div : celle de background.gif*/
z-index:1; /*superposition : le div sera en arrière plan*/
}
/*DEBUT BOUTONS MENU*/
#menu_survol { /*div du menu qui va contenir les boutons : il mesure la longueur de tous les boutons et la hauteur d'un bouton. Il est centré*/
position:absolute;
top:0px; /*position haute : collé à la fenêtre*/
height:24px; /*hauteur : celle d'un bouton*/
width:850px; /*longueur : somme des longueurs des 5 boutons*/
z-index:4; /*superposition : niveau 4. Tout au dessus*/
left:50%; /*permet de centrer horizontalement*/
margin-left:-425px; /* - moitié de la longueur : permet de centrer horizontalement*/
}
.bt_accueil { /*classe pour le bouton accueil : indique sa position*/
width:142px; /*longueur*/
height:24px; /*hauteur*/
position:absolute;
left:0px; /*position gauche : collé à la fenêtre*/
top:0px; /*position haute : collé à la fenêtre*/
z-index:4; /*superposition : niveau 4. Tout au dessus*/
}
.bt_collec { /*classe pour le bouton ma collection : indique sa position*/
width:142px; /*longueur*/
height:24px; /*hauteur*/
position:absolute;
left:142px; /*position gauche : longueur du bouton précédent (accueil)*/
top:0px; /*position haute : collé à la fenêtre*/
z-index:4; /*superposition : niveau 4. Tout au dessus*/
}
.bt_search { /*classe pour le bouton recherche : indique sa position*/
width:142px; /*longueur*/
height:24px; /*hauteur*/
position:absolute;
left:284px; /* position gauche : longueur des boutons précédents (accueil + ma collection)*/
top:0px; /*position haute : collé à la fenêtre*/
z-index:4; /*superposition : niveau 4. Tout au dessus*/
}
.bt_liens { /*classe pour le bouton liens : indique sa position*/
width:142px; /*longueur*/
height:24px; /*hauteur*/
position:absolute;
left:426px; /* position gauche : longueur des boutons précédents (accueil + ma collection + recherche) */
top:0px; /*position haute : collé à la fenêtre*/
z-index:4; /*superposition : niveau 4. Tout au dessus*/
}
.bt_contact { /*classe pour le bouton contact : indique sa position*/
width:140px; /*longueur*/
height:24px; /*hauteur*/
position:absolute;
left:568px; /* position gauche : longueur des boutons précédents (accueil + ma collection + recherche + liens) */
top:0px; /*position haute : collé à la fenêtre*/
z-index:4; /*superposition : niveau 4. Tout au dessus*/
}
.bt_forum { /*classe pour le bouton forum : indique sa position*/
width:142px; /*longueur*/
height:24px; /*hauteur*/
position:absolute;
left:708px; /* position gauche : longueur des boutons précédents (accueil + ma collection + recherche + liens + contact) */
top:0px; /*position haute : collé à la fenêtre*/
z-index:4; /*superposition : niveau 4. Tout au dessus*/
}
a img { /*caractéristique de la balise img utilisée dans une balise a : lorqu'on fait un lien sur une image*/
border:none; /*elève le contour qui se met par défaut*/
}
/*FIN BOUTONS MENU*/
/*DEBUT BANNIERE : la bannière comprend le morceau central (banniere.gif), le petit morceau à gauche avec le reflet (gauche.gif) et le petit morceau à droite avec reflet (droite.gif)*/
#banniere_complete { /*div centrée regroupant les 3 div : morceau gauche + morceau centre + morceau droite */
position:absolute;
top:0px; /*position haute : collé à la fenêtre*/
left:50%; /*permet de centrer horizontalement*/
margin-left:-475px; /* - moitié de la longueur : permet de centrer horizontalement*/
width:950px; /*longueur : somme longueur morceau gauche + morceau centre + morceau droite*/
height:394px; /*hauteur : hauteur du morceau le plus grand (gauche.gif et droite.gif)*/
z-index:3; /*superposition : niveau 3. Juste avant les boutons*/
}
#banniere_gauche { /*div du morceau gauche : gauche.gif*/
position:absolute;
background-image:url(images/gauche.gif); /*image de fond : gauche.gif*/
background-position:left; /*position de l'image de fond : Ã gauche*/
background-repeat:no-repeat; /*l'image de fond n'est pas répétée*/
top:0px; /*position haute : collé au coté haut à l'intérieur du div bannière_complete*/
left:0px; /*position gauche : collé au coté gauche à l'intérieur du div bannière_complete*/
width:50px; /*longueur : celle de gauche.gif*/
height:394px; /*hauteur : celle de gauche.gif*/
z-index:3; /*superposition : niveau 3. Juste avant les boutons*/
}
#banniere_centre { /*div du morceau centre : banniere.gif*/
position:absolute;
top:24px; /*position haute par rapport au coté haut à l'intérieur du div bannière_complete*/
left:50px; /*position gauche par rapport au coté gauche à l'intérieur du div bannière_complete (longueur de gauche.gif qui se trouve juste avant dans banniere_complete)*/
background-image:url(images/banniere.gif); /*image de fond : banniere.gif*/
background-position:center; /*position d l'image de fond : centrée*/
background-repeat:no-repeat; /*l'image de fond n'est pas répétée*/
width:850px; /*longueur : celle de banniere.gif*/
height:205px; /*hauteur : celle de banniere.gif */
z-index:3; /*superposition : niveau 3. Juste avant les boutons*/
}
#banniere_degrade { /*div du morceau degradé en dessous la banniere : degrade-sous-banniere.gif*/
position:absolute;
top:229px; /*position haute par rapport au coté haut à l'intérieur du div bannière_complete*/
left:50px; /*position gauche par rapport au coté gauche à l'intérieur du div bannière_complete (longueur de gauche.gif qui se trouve juste avant dans banniere_complete)*/
background-image:url(images/degrade-sous-banniere.gif); /*image de fond : degrade-sous-banniere.gif*/
background-position:center; /*position d l'image de fond : centrée*/
background-repeat:no-repeat; /*l'image de fond n'est pas répétée*/
width:850px; /*longueur : celle de degrade-sous-banniere.gif*/
height:42px; /*hauteur : degrade-sous-banniere.gif*/
z-index:3; /*superposition : niveau 3. Juste avant les boutons*/
}
#banniere_droite { /*div du morceau droite : droite.gif*/
position:absolute;
background-image:url(images/droite.gif); /*image de fond : droite.gif*/
background-position:right; /* position de l'image de fond : Ã droite*/
background-repeat:no-repeat; /*l'image de fond n'est pas répétée*/
top:0px; /*position haute : collé au coté haut à l'intérieur du div bannière_complete*/
left:900px; /*position gauche par rapport au coté gauche à l'intérieur du div bannière_complete (longueur de gauche.gif + banniere.gif qui se trouvent juste avant dans banniere_complete)*/
width:50px; /*longueur : celle droite.gif*/
height:394px; /* hauteur : celle de droite.gif*/
z-index:3; /*superposition : niveau 3. Juste avant les boutons*/
}
#conteneur_news { /*div des news en haut à droite de chaque page*/
position:absolute;
width:850px; /*longueur du div*/
height:205px; /*hauteur du div*/
top:24px; /*position haute par rapport au menu*/
left:50%; /*permet de centrer horizontalement*/
margin-left:-425px; /* - moitié de la longueur : permet de centrer horizontalement*/
font-size:12px; /*taille de la police dans ce div*/
z-index:4; /*superposition : niveau 4. Tout au dessus*/
}
#maj { /*div pour la date de mise à jour dans les news*/
position:absolute;
width:90px; /*longueur du div*/
height:15px; /*hauteur du div*/
top:32px; /*position haute par rapport au menu*/
right:5px; /*position droite par rapport au cadre des news*/
z-index:4; /*superposition : niveau 4. Tout au dessus*/
}
#news_texte { /*div pour le texte du cadre des news*/
position:absolute;
width:236px; /*longueur du div*/
height:62px; /*hauteur du div*/
top:75px; /*position haute par rapport au menu*/
right:42px; /*position droite par rapport au cadre des news*/
z-index:4; /*superposition : niveau 4. Tout au dessus*/
}
.date_news { /*classe utilisée pour les dates du cadre des news*/
color:#0100FF; /*couleur bleu*/
font-weight:bold; /*texte en gras*/
}
/*FIN BANNIERE*/
/*DEBUT CENTRE + FOOTER*/
#conteneur { /*div conteneur : contient le div principal, le footer et les liens en bas de page*/
position:absolute;
top:271px; /*position haute par rapport à la fenêtre*/
left:50%; /*permet de centrer horizontalement*/
margin-left:-425px; /* - moitié de la longueur : permet de centrer horizontalement*/
width: 850px; /*longueur du div*/
background-color:#0a0a0a; /*couleur de fond : gris foncé*/
z-index:4; /*superposition : niveau 4. Tout au dessus*/
}
#principal_accueil { /*div principal uniquement pour la page d'accueil : taille fixe*/
width:850px; /*longueur du div*/
height:500px; /*hauteur du div*/
background-color:#0a0a0a; /*couleur de fond : gris foncé*/
}
#animation { /*animation flash de la page d'accueil*/
position:absolute;
top:110px;/*position haute*/
width:600px;/*longueur du div*/
height:171px;/*hauteur du div*/
left:50%;/*permet de centrer horizontalement*/
margin-left:-300px;/* - moitié de la longueur : permet de centrer horizontalement*/
}
#bouteille { /*bouteille en image de fond sur la page d'accueil*/
position:absolute;
top:10px;/*position haute*/
width:850px;/*longueur du div*/
height:400px;/*hauteur du div*/
background-image:url(images/fond-home.jpg); /*image de fond*/
background-position:center; /*position de l'image de fond*/
background-repeat:no-repeat; /*l'image n'est pas répétée dans le div*/
}
#rss_img { /*image pour le flux rss et le logo en bas de la page d'accueil*/
position:absolute;
top:420px;/*position haute*/
left:50%;/*permet de centrer horizontalement*/
margin-left:-161px;/* - moitié de la longueur : permet de centrer horizontalement*/
width:321px;/*longueur du div*/
height:82px;/*hauteur du div*/
}
#rss_lien { /*liens à coté de l'image du flux RSS*/
position:absolute;
top:430px;/*position haute*/
left:316px;/*position gauche*/
width:145px;/*longueur du div*/
height:50px;/*hauteur du div*/
font-size:12px;/*taille du texte*/
}
#principal { /*div principal pour les autres pages : ne possède pas d'image de fond*/
width:850px; /*longueur du div*/
background-color:#0a0a0a; /*couleur de fond : gris foncé*/
z-index:4; /*superposition : niveau 4. Tout au dessus*/
}
#footer { /*div du footer : pied de page*/
width:850px; /*longueur du div*/
height:110px; /*hauteur du div*/
background-image:url(images/footer.gif); /*image de fond : footer.gif*/
background-position:bottom; /*position de l'image de fond : en bas dans le div*/
background-repeat:no-repeat; /* l'image n'est pas répétéé dans le div*/
z-index:4; /*superposition : niveau 4. Tout au dessus*/
}
#footer_texte { /*div contenant le texte du footer*/
position:absolute;
bottom:40px; /*position par rapport au bas du div footer*/
width:850px; /*longueur du div*/
height:55px; /*hauteur du div*/
text-align:center; /*le contenu du div est centré*/
font-size:9px; /*taille de la police pour ce div*/
z-index:4; /*superposition : niveau 4. Tout au dessus*/
}
#footer_liens { /*div pour les liens en bas de page*/
width:850px; /*longueur du div*/
height:20px; /*hauteur du div*/
text-align:center; /*le contenu du div est centré*/
color:#333333; /*couleur des caractères : gris*/
background-color:#000000; /* couleur de fond : noir*/
z-index:4; /*superposition : niveau 4. Tout au dessus*/
}
#footer_creative-c { /*div pour le copyright en bas de page*/
text-align:center; /*le contenu du div est centré*/
font-size:10px; /*taille de la police pour ce div*/
z-index:4; /*superposition : niveau 4. Tout au dessus*/
}
#footer_creative-c-en { /*div pour le copyright en anglais en bas de page*/
text-align:center; /*le contenu du div est centré*/
font-size:10px; /*taille de la police pour ce div*/
font-style:italic; /*le texte est en italique*/
z-index:4; /*superposition : niveau 4. Tout au dessus*/
}
p { /*caractéristiques de la balise p (paragraphe)*/
margin-bottom:0px; /*marge basse : 0 */
margin-top:0px; /* marge haute : 0 */
margin-left:14px; /*marge gauche : 15px */
margin-right:14px; /*marge droite : 15px*/
}
a:link { /*caractéristiques des liens*/
text-decoration:none; /**/
color:#0100FF; /*couleur de la police : bleu*/
}
a:visited { /*caractéristiques des liens visités*/
color:#999999; /*couleur de la police : gris*/
}
.inputperso {/*cases du formulaire*/
background-color:#2a2a2a; /*couleur de fond des cases gris*/
border-color:#978f8f; /*couleur de bordure des cases : gris*/
color:#FFFFFF; /*couleur du texte dans les cases : blanc*/
}
.en { /*classe pour les textes en anglais : tous en italique*/
font-style:italic;
}
.centrer { /*classe permettant de centrer*/
text-align:center;
}
/*FIN CENTRE + FOOTER*/
/*DEBUT POPUP*/
#barre { /*div pour la petite barre de fond qui est répétée tout le long :background_popup.gif : utilisé pour le popup mail d'absolut et les popup de ma collection*/
position:absolute;
top:0px; /*position haute : collé à la fenêtre*/
left:0px; /*position gauche : collé à la fenêtre*/
background-image:url(images/background_popup.gif); /*image de fond*/
background-repeat:repeat-x; /*l'image est répétéé dur la longueur jusqu'à remplir le div*/
width:100%; /*longueur du div : toute la longueur de la fenêtre*/
height:140px; /*hauteur fixe de la div : celle de background_popup.gif*/
z-index:1; /*superposition : le div sera en arrière plan*/
}
#logo { /*logo positionné sur la barre en haut de la page popup*/
position:absolute;
top:0px; /*position haute : collé à la fenêtre*/
left:0px; /*position gauche : collé à la fenêtre*/
background-image:url(images/logo-popup.gif); /*image de fond : logo_popup.gif*/
width:150px; /*longueur du div :celle de logo_popup.gif*/
height:140px; /*hauteur fixe de la div : celle de logo_popup.gif*/
z-index:2; /*superposition : niveau 2. Au dessus de la barre*/
}
#img_popup { /*div utilisé pour les popup contenant l'agrandissement des bouteilles (ma collection) : permet de centrer l'image*/
position:absolute;
width:640px; /*longueur du div*/
height:640px; /*hauteur du div*/
top:150px; /*position haute*/
left:50%; /*permet de centrer*/
margin-left:-320px; /* - moitié de la longueur : permet de centrer horizontalement*/
}
#text_popup { /*div utilisé pour le popup message (mail d'absolut)*/
position:absolute;
width:330px; /*longueur du div*/
height:330px; /*hauteur du div*/
top:120px; /*position haute*/
left:50%; /*permet de centrer*/
margin-left:-165px; /* - moitié de la longueur : permet de centrer horizontalement*/
font-size:14px; /*taille de la police du texte*/
z-index:3; /*superposition : niveau 3. Au premier plan*/
}
#titre_popup {/*div pour le titre dans les popup (sauf music)*/
position:absolute;
top:100px;/*position haute*/
left:10px;/*position gauche*/
z-index:3;/*superposition : niveau 3. Au premier plan*/
}
#titre_popup_music {/*div pour le titre du popup music*/
position:absolute;
top:100px;/*position haute*/
width:100%;/*longueur du div : toute la fenêtre*/
height:38px;/*hauteur du div : celle de l'image music.gif*/
background-image:url(images/titres/music.gif); /*image de fond*/
background-position:center;/*position de l'image de fond*/
background-repeat:no-repeat;/*l'image n'est pas répétée*/
z-index:3;/*superposition : niveau 3. Au premier plan*/
}
/*FIN POPUP*/
/*MESSAGE D'ERREUR*/
.erreur_titre { /*classe des titres des messages d'erreurs*/
color:#FFFFFF; /*couleur du texte: blanc*/
font-family:Arial, Helvetica, sans-serif; /*police par défaut*/
font-size:40px; /*taille police par défaut*/
} |
Décalage du pied de page sous IE sauf si raffraichissement de la page
Répondre avec citation
Partager