Comment assembler mes blocs div ?
Bonjour,
Suite à tous les conseils que j'ai reçu, je crée mon site html sans tableau.
J'essaie d'utiliser les div et une feuille CSS.
Voilà de quoi mon site est composé :
- body avec une image de fond
- Header (découpé en 3 images qui doivent se mettre de gauche à droite)
- Barre Navigation (composée de 8 images qui doivent de mettre également de gauche à doite)
- une image déco (une image trait qui doit se coller sous la barre de navigation)
- le corps du site avec une image de fond, du texte par dessus, quelques images par dessus
- footer
Mon gros soucis est d'assembler tout ça, je mets en dessous le code utilisé, mais par exemple sous Firefox j'obtiens des espace entre le header, la barre de navigation, la barre de déco.Sous IE7 ça parît fonctionner.
Ensuite comment mettre l'image de fond du corps, le texte et comment ajouter des images par dessus.
L'image de fond du corps ne s'affiche même pas.
J'ai juste besoin de comprendre le système d'emboîtement, après je me débrouille.
Voici le code utilisé :
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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Mon Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel=stylesheet type="text/css" href="style3.css">
</head>
<body>
<div id="conteneur">
<div class="header1">
<img src="images/header1.png" alt=""></div>
<div class="header2">
<img src="images/header2.png" alt=""></div>
<div class="header3">
<img src="images/header3.png" alt=""></div>
<div class="accueil">
<a href="index.html#"><img name="bouton1" src="images/bouton1.png" border="0" alt=""></a></div>
<div class="bouton2">
<a href="bouton2.html#"><img name="bouton2" src="images/bouton2.png" border="0" alt=""></a></div>
<div class="bouton3">
<a href="bouton3.html#"><img name="bouton3" src="images/bouton3.png" border="0" alt=""></a></div>
<div class="bouton4">
<a href="bouton4.html#"><img name="bouton4" src="images/bouton4.png" border="0" width="97" alt=""></a></div>
<div class="bouton5">
<a href="bouton5l#"><img name="bouton5" src="images/bouton5.png" border="0" alt=""></a></div>
<div class="bouton6">
<a href="bouton6.html#"><img name="bouton6" src="images/bouton6.png" border="0" alt=""></a></div>
<div class="contact">
<a href="bouton7.html#"><img name="bouton7" src="images/bouton7.png" border="0" alt=""></a></div>
<div class="barre"><img name="barre" src="images/barre.png" border="0" alt=""></a></div>
<div class="corps"></div>
</div>
</body>
</html> |
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
| body
{
margin: 0 ;
padding: 0 ;
background-image:url(images/blue4.jpg) ;
}
#conteneur
{
width: 780px ;
margin: 0px auto;
border: 2px solid #565656 ;
background-attachment: scroll;
padding: 0;
}
.header1
{
float: left;
margin: 0;
padding: 0;
}
.header2
{
float: left;
margin: 0;
padding: 0;
}
.header3
{
float: left;
margin: 0;
padding: 0;
}
.bouton1
{
float: left;
margin: 0;
padding: 0;
margin-top: 0;
}
.bouton2
{
float: left;
margin: 0;
padding: 0;
}
.bouton3
{
float: left;
margin: 0;
padding: 0;
}
.bouton4
{
float: left;
margin: 0;
padding: 0;
}
.bouton5
{
float: left;
margin: 0;
padding: 0;
}
.bouton6
{
float: left;
margin: 0;
padding: 0;
}
.bouton7
{
float: left;
margin: 0;
padding: 0;
}
.barre
{
float: left;
margin: 0;
padding: 0;
}
.corps
{
background-image : url(images/fond.png)
background-attachment: scroll;
padding: 0;
margin: 0;
} |
Merci beaucoup
