problème positionement des div (design extensible)
bonjour à tous
voila mon problème j'essaye pour la prmière fois de réaliser un design extensible en trois collones (navigation,contenu,news), donc avec des valeur en %, mais seulement les div ne s'alignent pas, les marges sont bien respecter ainsi que les largeurs des div
seulement les element bloc se place les un en dessous des autre sa me forme donc un espèce d'escalier
PS: j'ai essayer dec hanger les % en px mais le résultat est le même
voici le code xhtml :
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
| <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"
lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Bienvenue</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="menu">
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="#">Travaux</a></li>
<li><a href="#">A popos</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Quete</a></li>
<li><a href="#">Forum</a></li>
</ul>
</div>
<div id="bann">
<img src="images/bann.jpg" alt="bannière" />
</div>
<div id="navigation">
<div class="element">
<h3>Menu</h3>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Travaux</a></li>
<li><a href="#">A popos</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Quete</a></li>
<li><a href="#">Forum</a></li>
</ul>
</div>
</div>
<div id="contenu">
<h1>Bienvenue</h1>
<h3>Une grande quête vous attend</h3>
<p>Ccg est un pays imaginaire constitué de plusieurs îles.<br />
Mais une vieille légende raconte qu'un trésor d'une valeur inestimable serait caché sur une île ("voir Histoire de couincouin gang"). C'est à partir de cette légende que vous décidez de partir à la recherche de se trésor légendaire et de suivre les traces de B.E.Cythebalois, le grand navigateur partit pour trouver ce trésor mais jamais revenu sur son ile... </p>
<p>
Votre quête commence ici, à vous de percer les secrets de ce monde et de résoudre les différents indices pour peut être trouvé ce mystérieux trésor... Pour commencer la quête, vous devez allez dans "Menu des quêtes".<br />
PS: pour connaitre exactement le principe du site je vous invite à visiter cette page:
<a href="#" title="principe du site">C'est ici</a>
</p>
<h4>Pour infos</h4>
<p>Des mini quête s’ajouterons au fur et à mesure (toutes disponible gratuitement)<br/>
pour plus d'informations dirigez vous sur "défis mini-quête"... Si vous avez un problème sur le site ou sur la quête, veuillez vous adresser à un administrateur du "Forum". Vous pouvez vous inscrire dès maintenant sur le forum...</p>
<p>Toute l’équipe de ccg vous souhaite une bonne visite sur notre site.</p>
</div>
<div id="news">
<h1>News</h1>
<h3>Une grande quête vous attend</h3>
<p>Ccg est un pays imaginaire constitué de plusieurs îles.<br />
Mais une vieille légende raconte qu'un trésor d'une valeur inestimable serait caché sur une île ("voir Histoire de couincouin gang"). C'est à partir de cette légende que vous décidez de partir à la recherche de se trésor légendaire et de suivre les traces de B.E.Cythebalois, le grand navigateur partit pour trouver ce trésor mais jamais revenu sur son ile... </p>
<p>
Votre quête commence ici, à vous de percer les secrets de ce monde et de résoudre les différents indices pour peut être trouvé ce mystérieux trésor... Pour commencer la quête, vous devez allez dans "Menu des quêtes".<br />
PS: pour connaitre exactement le principe du site je vous invite à visiter cette page:
<a href="#" title="principe du site">C'est ici</a>
</p>
</div>
<div id="bas">
</div>
</body>
</html> |
et le css:
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
| body{
width: 100%;
background: url("images/fond4.jpg") no-repeat top left;
}
#menu{
background-image: url("images/menu.jpg");
width: 100%;
margin-left: 0px;
height: 45px;
margin-top: 110px;
}
#menu a{
display:block; /*Pour que le "bloc" soit un vrai bloc*/
float:left; /*Pour que les blocs soient alignés horizontalement (essayez de l'enlever pour voir)*/
width: 15%;
height:45px; /*La même hauteur que notre menu*/
border:none; /*On enlève les bordures (enfin, on ne les met pas, même s'il n'y en avait pas)*/
text-align:center; /*Pour que les liens soient centrés par rapport à l'horizontale*/
line-height: 41px;
color: white;
font-size: 20px;
text-decoration: none;
list-style-type: none;
}
#bann{
text-align: center;
background-repeat: no-repeat;
}
#navigation {
background: url("images/h.jpg") top repeat-x;
width: 20%;
}
#navigation h3{
color: white;
font-size: 26px;
font-weight: bold;
text-align: center;
line-height: 40px;
}
.element a{
text-decoration: none;
}
#contenu{
background: url("images/h.jpg") repeat-x top;
margin-left: 2%;
width: 50%;
}
#contenu h1{
color: white;
font-size: 26px;
font-weight: bold;
line-height: 41px;
text-align: center;
}
#news{
background: url("images/h2.jpg") repeat-x top;
width: 20%;
float: right;
margin-right: 2%;
}
#news h1{
color: white;
font-size: 26px;
font-weight: bold;
line-height: 40px;
text-align: center;
} |
ce que je comprend pas c'est que normalement en faisant :
Code:
1
2
3
4
5
6
7
8
9
10
| div1{
width: 150px;
float: left;
}
div2{
margin-left: 160px;
}
div3{
float: right;
} |
cela devrait marcher (pareil avec des %), et je vois pas mon erreur dans mon code
voila merci de vos réponses
