problème positionement des div (design extensible)

**Er0r_Oo** · 08/05/2009, 21h26

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

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

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Macmillenium** · 08/05/2009, 21h59

Bonsoir,

Ce qui devrait fonctionner c'est :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
div1{
width: 150px;
float: left;
}
div2{
/* margin-left: 160px; */
overflow:hidden;
}
div3{
float: right;
}

Et l'odre dans le HTML :

Code xhtml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div class="div1"></div>
<div class="div3"></div>
<div class="div2"></div>

cela devrait marcher (pareil avec des %), et je vois pas mon erreur dans mon code

Le tien est différent :

Code css :

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
 
#navigation {
background: url("images/h.jpg") top repeat-x;
width: 20%;
}
 
#contenu{
background: url("images/h.jpg") repeat-x top;
margin-left: 2%;
width: 50%;
}
 
#news{
background: url("images/h2.jpg") repeat-x top;
width: 20%;
float: right;
margin-right: 2%;
}

Tu as un margin-left:2% au lieu de 20% sur #contenu et il ne faut pas renseigner son width.

Finalement :

Code css :

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
 
#navigation {
background: url("images/h.jpg") top repeat-x;
width: 20%;
}
 
#contenu{
background: url("images/h.jpg") repeat-x top;
/* margin-left: 2%; */
/* width: 50%; */
overflow:hidden;
}
 
#news{
background: url("images/h2.jpg") repeat-x top;
width: 20%;
float: right;
margin-right: 2%;
}

**Er0r_Oo** · 08/05/2009, 22h31

donc voila j'ai testé ta solution et sa marche j'ai juste un problème avec les titres qui ne se place plus dans l'image de fond sous firefox et opera contrairement à IE, si d'ailleur aurait une solution à ce problème, merci de me le faire parvenir

de plus j'aimerais quand même savoir ou plutôt comprendre ta methode, et plus precisement savoir la fonction de overflow : hidden
et pourquoi avoir mis la div 3 avant la div 2 alors que le float : right agit sur la div 3

EDIT: je reviens sur ce que j'ai dit avec cette methode sa s'aligne bien sur IE et firefox avec margin-left: 22% (pour #contenu) alor que sur opera le contenu va avoir un enorme marge à gauche et va dépasser sur le bloc news

en en mettant le margin-left à 2% sous opera le contenu se place bien mais sous IE et firefox les div contenu et naviguation sont coller

quelqu'un a t'il la solution ?

merci de vos réponses

**Macmillenium** · 09/05/2009, 00h02

Tout d'abord, commences par enlever la déclaration XML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<?xml version="1.0" encoding="UTF-8"?>

Qui fait basculer IE6 en mode de rendu Quirks.

Envoyé par Er0r_Oo

de plus j'aimerais quand même savoir ou plutôt comprendre ta methode, et plus precisement savoir la fonction de overflow : hidden
et pourquoi avoir mis la div 3 avant la div 2 alors que le float : right agit sur la div 3

Avec l'ordre div1-div2-div3, la div3 passera en dessous de la div2 étant donné que cette dernière est présente dans le flux normal.
Pour que cela fonctionne, il faudrait flotter la div2 et lui attribuer un width, ce qui ne correspond pas au principe de ta mise en page.

Avec l'ordre div1-div3-div2, le float:left/right retire les div 1 et 3 du flux normal, la div2 se place alors après le dernier élément dans le flux et remonte au même niveau que div1 et 3.

overflow:hidden confère à div3 un nouveau contexte de formatage bloc afin qu'elle tient compte de la présence des deux flottants div1 et 2.

Envoyé par Er0r_Oo

EDIT: je reviens sur ce que j'ai dit avec cette methode sa s'aligne bien sur IE et firefox avec margin-left: 22% (pour #contenu) alor que sur opera le contenu va avoir un enorme marge à gauche et va dépasser sur le bloc news

en en mettant le margin-left à 2% sous opera le contenu se place bien mais sous IE et firefox les div contenu et naviguation sont coller

Il faudrait rajouter une autre div à l'intérieur de #contenu et lui appliquer directement le margin-left:2%;.

Attention, je ne vois pas de float:left sur #navigation dans ton code !

**julio.t** · 09/05/2009, 10h36

il faut aussi que mette tes line-height, font-size en pourcentage ou en em ce serait mieux pour ce que tu veux faire.

problème positionement des div (design extensible)

Positionnement en CSS

Discussions similaires

Partager

Partager