DIV qui s'allonge pas

Version imprimable

Bonjour à tous,
j'ai un problème sur mon site,

je suis enfin arrivé à un affichage correct et identique pour ff et ie (déjà ça c'est pas facile ...) mais en testant l'élasticité verticale j'ai constaté que mes div (menu et corps du site) ne voulaient pas s'allonger.

j'ai un peu vidé le cote html pour plus de lisibilité mais pour le css c'est un peu long désolé :/

édit:j'ai viré le css qui n'est pas à l'origine de l'erreur (les span, a etc ...)

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 xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="iso-8859-1" />
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
 
</head>
<body>
 
<div id="colonneg">
 
<img></img>
 
<h3></h3>
 
<h3 class="deuxieme"></h3>
<ul>
	<li></li>
</ul>
 
</div>
 
<div id="droite">
<h1></h1>
<h2></h2>
 
<div id="pagetop"></div>
<div id="page">
ici y'a une pseudo frame (du php)
</div>
</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
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
 
/* Menu */
 
 
 
/* Caractéristiques générales */
 
html, body {
height:100%;
font-family:"Trebuchet MS",Verdana,Geneva,Arial,Helvetica,sans-serif;
background-color:#326496;
margin:0;
text-align: center;
}
 
 
/* Les blocs */
 
.newstop {
text-align:left;
width:96%;
margin:10px 0 0 2%;
_margin:10px 0 0 0;
padding-left:5px;
height:20px;
background-color:#FEC865;
border:1px solid;
}
 
.newsbody {
text-align:left;
padding:5px 5px 5px 5px;
width:94%;
margin:2px 0 20px 3%;
_margin:2px 0 20px 0;
height:200px;
background-color:#E0E7EE;
border:1px dashed;
}
 
#pagetop {
text-align:center;
position:absolute;
margin-left:0.5%;
width:99%;
height: 40px;
min-height: 500px;
top:150px;
border-top:1px dashed;
border-left:1px dashed;
border-right:1px dashed;
background-color:white;
filter:alpha(opacity=60);
-moz-opacity:.60;
opacity:.60;
}
 
#page {
text-align:center;
position:absolute;
margin-left:0.5%;
width:99%;
height: auto;
_height: 650px;
min-height: 500px;
top:190px;
border-bottom:1px dashed;
border-left:1px dashed;
border-right:1px dashed;
background-color:white;
}
 
#colonneg {
position:absolute;
text-align:left;
left:50px;
width:165px;
height:100%;
border-left:1px solid;
background-color:white;
filter:alpha(opacity=60);
-moz-opacity:.60;
opacity:.60;
}
 
#droite {
margin-left: auto;
margin-right: auto;
text-align: left;
position:absolute;
left:215px;
width:70%;
height:100%;
border-left:3px double;
border-right:6px double;
background-image:url(engrenage.jpg);
background-repeat:no-repeat;
background-color:white;
}

21/02/2008, 15h14
LeDuc123

petit up ^^

si il vous manque une info n'hésitez pas à me demander ... merci :)
21/02/2008, 15h45
Erwan31

Bonjour,
tes div s'allongent, je vois pas ou est le problème.
Pour quoi utiliser le positionnement absolue? Est ce vraiment nécessaire?

Au passage le underscore hack (_height...) n'est plus implémenté par IE7 en
mode strict. Oublies ce genre de hacks et passes par une feuille de style pour
IE6 appelée avec des commentaires conditionnels.
21/02/2008, 18h23
LeDuc123

Merci pour ta réponse ...
sous IE6 et FF mes div s'allongent pas, j'insiste ^^

capture d'écran :
ici

en fait quand on rempli pas la page on s'en aperçoit pas ... c'est ma faute.

pour position absolute (d'ailleurs je pense que le problème vient de là) tu as sans doute raison mais je ne suis pas arrivé à faire SANS (je débute ... j'essaye de bien faire sans beaucoup de succès)

merci pour ta réponse ;)

Citation:
Envoyé par LeDuc123
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 #colonneg { position:absolute; text-align:left; left:50px; width:165px; height:100%; border-left:1px solid; background-color:white; filter:alpha(opacity=60); -moz-opacity:.60; opacity:.60; } #droite { margin-left: auto; margin-right: auto; text-align: left; position:absolute; left:215px; width:70%; height:100%; border-left:3px double; border-right:6px double; background-image:url(engrenage.jpg); background-repeat:no-repeat; background-color:white; }
Tu donnes une hauteur de 100% qui correspond à la hauteur de la fenêtre. Ces 2 éléments prennent donc la hauteur de la fenêtre et le contenu, s'il est plus long sort, ce qui est le comportement normal, d'autant que le contenu est placé en absolute à l'intérieur donc pas pris en compte; 2 raisons pour que ton #colonneg et #droite ne s'allongent pas.

Par exemple, tu devrais mettre un min-height au lieu d'un height (en gérant IE6) et ne pas utiliser de positionnement absolu pour ton contenu ou alors utiliser un position:fixed (cas IE6 plus dur à gérer).

21/02/2008, 21h43
LeDuc123

Ok j'ai bien compris pour le contenu (si position=absolute alors il n'est pas pris en compte par le reste de la page (en gros ^^))

ça marche pour la page centrale, mais pas pour le menu (normal puisque ce dernier n'est pas "poussé" par le contenu du site)

je vais chercher ma solution et si personne ne m'a répondu et si je trouve la réponse je mettrais résolu mais pour l'instant si quelqu'un peut me donner un indice ça serait sympas

en tout cas merci pour vos réponses ça m'aide à comprendre le CSS
21/02/2008, 21h48
LeDuc123

désolé pour le double post.

j'ai mis position:fixed; pour le menu et le rendu (même si ce n'est pas ce que je voulais au départ) est très bien (mieux en fait ... parce que le menu ne bouge pas avec la reste de la page)

encore merci