Positionnement de div CSS3
Bonjour,
Voilà j'ai une question sur le positionnement en CSS sur les <div>.
Voici ma page html qui se constitue d'une entête d'une barre de navigation et d'un contenu.
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
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="fr" />
<title>Squelette</title>
<link rel="stylesheet" type="text/css" href="forme.css" media="all" />
</head>
<body>
<div id="conteneur">
<div class="entete"> ENTETE </div>
<div class="navigation"> NAVIGATION
<ul>
<li><a href="index.html">Titre1</a></li>
<li><a href="index.html">Titre1</a></li>
<li><a href="index.html">Titre1</a></li>
<li><a href="index.html">Titre1</a></li>
<li><a href="index.html">Titre1</a></li>
<li><a href="index.html">Titre1</a></li>
<li><a href="index.html">Titre1</a></li>
<li><a href="index.html">Titre1</a></li>
<li><a href="index.html">Titre1</a></li>
</ul>
</div>
<div class="contenu"> CONTENU
<figure>
<img alt="" src="pictures/picture_1.png" />
<figcaption>Légende</figcaption>
</figure>
<figure>
<img alt="" src="pictures/picture_1.png" />
<figcaption>Légende</figcaption>
</figure>
<figure>
<img alt="" src="pictures/picture_1.png" />
<figcaption>Légende</figcaption>
</figure>
<figure>
<img alt="" src="pictures/picture_1.png" />
<figcaption>Légende</figcaption>
</figure>
<figure>
<img alt="" src="pictures/picture_1.png" />
<figcaption>Légende</figcaption>
</figure>
<figure>
<img alt="" src="pictures/picture_1.png" />
<figcaption>Légende</figcaption>
</figure>
<figure>
<img alt="" src="pictures/picture_1.png" />
<figcaption>Légende</figcaption>
</figure>
<figure>
<img alt="" src="pictures/picture_1.png" />
<figcaption>Légende</figcaption>
</figure>
<figure>
<img alt="" src="pictures/picture_1.png" />
<figcaption>Légende</figcaption>
</figure>
<figure>
<img alt="" src="pictures/picture_1.png" />
<figcaption>Légende</figcaption>
</figure>
<figure>
<img alt="" src="pictures/picture_1.png" />
<figcaption>Légende</figcaption>
</figure>
<figure>
<img alt="" src="pictures/picture_1.png" />
<figcaption>Légende</figcaption>
</figure>
<figure>
<img alt="" src="pictures/picture_1.png" />
<figcaption>Légende</figcaption>
</figure>
<figure>
<img alt="" src="pictures/picture_1.png" />
<figcaption>Légende</figcaption>
</figure>
<figure>
<img alt="" src="pictures/picture_1.png" />
<figcaption>Légende</figcaption>
</figure>
</div>
</div>
</body>
</html> |
Et voici mon CSS pour positionner tout ça
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
|
body{
background: #000000;
}
.entete {
background: #00FF00;
height: 50px;
}
.navigation {
background: #00FFFF;
width: 200px;
float: left;
}
.contenu {
background: #FF0000;
width:900px;
float: left;
margin-right: 20px;
}
.contenu figure {
margin: 20px;
float: left;
}
.contenu img {
width: 150px;
height: 200px;
}
.contenu figcaption {
text-align: left;
color: white;
font-size: 0.8em;
} |
J'utilise float left sur ma barre de navigation ainsi que sur mon contenu pour qu'ils soient l'un à coté de l'autre. Le problème vient quand je demande à ce que mon contenu ait une largeur de 90%.
Code:
1
2
3
4
5
6
7
8
|
.contenu {
background: #FF0000;
/*width:900px;*/
width:90%
float: left;
margin-right: 20px;
} |
Lorsque je passe width à 90% et non plus en pixels le contenu vient se caller en dessous de ma barre de navigation et non plus sur la droite.
Quelqu'un aurait une explication ?
