probleme avec height sous netscape!

Version imprimable

01/02/2006, 22h00
Death83

probleme avec height sous netscape!

Salut a tous,

j'ai un petit soucis sur une page avec netscape.

J'ai un <div> avec 3 bloc div a l'intérieur.
Celui d'en haut et celui d'en bas on une hauteur fixé. Celui du milieur, n'a pas de hauteur (réagis donc comme height:auto;). Le probleme est que sous netscape il me met toujours une hauteur de 0 pour ce bloc.

Savez vous comment éviter celà?
(ne me dites pas en donnant un height= Xpx car le contenu est variables donc je ne peut pas deviner la hauteur de ce qu'il y a aura dedans).

Merci d'avance ;).
02/02/2006, 09h38
azertyman

utilise la propriété

Code:

min-height

, qui définit une hauteur minimale.
02/02/2006, 10h51
Death83

Citation:

Envoyé par azertyman

utilise la propriété

Code:

min-height

, qui définit une hauteur minimale.

et tu crois que la hauteur s'adaptera automatiquement si le contenu dépace la hauteur minimal?
04/02/2006, 14h56
Death83

non ca n'ajuste pas la taiolle dynamiquement quand la taille du contenu depasse celui du min-height.

D'autres idées?

j'ai fait ce petit code qui représente ton problème :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <html> <body> <div> <div style="height:100px;background-color:#aaa"></div> <div> <p>aa</p> <p>aa</p> <p>aa</p> <p>aa</p> <p>aa</p> </div> <div style="height:100px;background-color:#ccc"></div> </div> </body> </html>
et chez moi il fonctionne parfaitement sous netscape
peux-tu l'essayer chez toi . et si cela fonctionne, c'est que ton problème est ailleurs...

04/02/2006, 20h23
Death83

Oui ca marche bien chez moi.
EN fait le probleme viens du fait que dans le bloc du milieu j'ai plusieurs petite bloc div aligné avec des float left :(.

Mais je vois pas comment faire pour remédier a ce probleme mi aprt les enlevé (ce que je ne ferais pas).

Voila le code source pour vous aider:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div align="center">
					<span><b>Dernières critiques:</b></span>
					<div class="fictectop">
					</div>
 
					<div align="center" class="fictecmid">
						<div align=center class="caddercrit">
								<div><a href="manga.php?idmanga=32" ><img src="../images/manga/gokinjotome_2couvfacejpg" alt="Gokinjo"><br>Gokinjo - tome 2</a></div>
								<div><a href="manga.php?idmanga=31" ><img src="../images/manga/gokinjotome_1couvfacejpg" alt="Gokinjo"><br>Gokinjo - tome 1</a></div>
								<div><a href="manga.php?idmanga=30" ><img src="../images/manga/flytome_1couvface80.jpg" alt="Fly"><br>Fly - tome 1</a></div>
								<div><a href="manga.php?idmanga=27" ><img src="../images/manga/blametome_1couvface.jpg" alt="Blame"><br>Blame - tome 1</a></div>
								<div><a href="manga.php?idmanga=16" ><img src="../images/manga/alice_19thtome_7couvface.jpg" alt="Alice 19th"><br>Alice 19th - tome 7</a></div><div class="separe"></div>
 
 
						</div>
					</div>
					<div class="fictecbot">
					</div>
 
				</div>

avec les styles correspondant:

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
.fictectop
{
background-image:url(../../imagesite/noir/cadrefichetechtop.jpg);
width:580px;
height:16px;
}
.fictecmid
{
background-image:url(../../imagesite/noir/cadrefichetechmiddle.jpg);
width:580px;
overflow:hidden; 
}
.fictecbot
{
background-image:url(../../imagesite/noir/cadrefichetechbottom.jpg);
width:580px;
height:19px;
}
.caddercrit
{
margin-left:18px;
}
.caddercrit div
{
float:left;
margin-right:2px;
font-size:10px;
text-align:center;
width:106px;
font-weight:bold;
}
.caddercrit img
{
margin-bottom:2px;
width:94px;
height:146px;
border:0;
}

remplace la section div fictecmid par le code suivant :

Code:

1
2
3
4
5
6
7
8
    <div class="fictecmid" style="position:relative;align:center"> 
        <p class="caddercrit"><a href="manga.php?idmanga=32" ><img src="../images/manga/gokinjotome_2couvfacejpg" alt="Gokinjo"><br>Gokinjo - tome 2</a></p> 
        <p class="caddercrit"><a href="manga.php?idmanga=31" ><img src="../images/manga/gokinjotome_1couvfacejpg" alt="Gokinjo"><br>Gokinjo - tome 1</a></p> 
        <p class="caddercrit"><a href="manga.php?idmanga=30" ><img src="../images/manga/flytome_1couvface80.jpg" alt="Fly"><br>Fly - tome 1</a></p> 
        <p class="caddercrit"><a href="manga.php?idmanga=27" ><img src="../images/manga/blametome_1couvface.jpg" alt="Blame"><br>Blame - tome 1</a></p> 
        <p class="caddercrit"><a href="manga.php?idmanga=16" ><img src="../images/manga/alice_19thtome_7couvface.jpg" alt="Alice 19th"><br>Alice 19th - tome 7</a></p>
		<div style="clear:both;"></div>
    </div>

et remplace dans ton style .caddercrit div par .caddercrit (donc sans le div)

cela n'est pas parfaitement centré, mais je pense que c'est acceptable pour ce que tu désires

05/02/2006, 14h44
Death83

ca met bien la bonne hauteur mais rien ne s'affiche a l'intérieur. Meme pas l'image de fond!

ci-dessous la page que j'ai créée pour simuler ton problème. je n'ai pas mis d'image de fond, donc dans le style j'ai mis des couleurs de fond afin de voir le résultat
et cela fonctionne correctement chez moi sous myie2, ie, netscape et mozilla

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
<html>
<head>
<style type="text/css">
.fictectop 
{ 
background-image:url(../../imagesite/noir/cadrefichetechtop.jpg); 
background-color:red; 
width:580px; 
height:16px; 
} 
.fictecmid 
{ 
background-image:url(../../imagesite/noir/cadrefichetechmiddle.jpg); 
background-color:green; 
width:580px; 
overflow:hidden; 
} 
.fictecbot 
{ 
background-image:url(../../imagesite/noir/cadrefichetechbottom.jpg); 
background-color:blue; 
width:580px; 
height:19px; 
} 
.caddercrit
{ 
float:left; 
margin-right:2px; 
margin-left:18px; 
font-size:10px; 
text-align:center; 
width:106px; 
font-weight:bold; 
} 
.caddercrit img 
{ 
margin-bottom:2px; 
width:94px; 
height:146px; 
border:0; 
}
</style>
</head>
<body>
 
<div align="center"> 
               <span><b>Dernières critiques:</b></span> 
               <div class="fictectop"> 
               </div> 
 
    <div class="fictecmid" style="position:relative;align:center"> 
        <p class="caddercrit"><a href="manga.php?idmanga=32" ><img src="../images/manga/gokinjotome_2couvfacejpg" alt="Gokinjo"><br>Gokinjo - tome 2</a></p> 
        <p class="caddercrit"><a href="manga.php?idmanga=31" ><img src="../images/manga/gokinjotome_1couvfacejpg" alt="Gokinjo"><br>Gokinjo - tome 1</a></p> 
        <p class="caddercrit"><a href="manga.php?idmanga=30" ><img src="../images/manga/flytome_1couvface80.jpg" alt="Fly"><br>Fly - tome 1</a></p> 
        <p class="caddercrit"><a href="manga.php?idmanga=27" ><img src="../images/manga/blametome_1couvface.jpg" alt="Blame"><br>Blame - tome 1</a></p> 
        <p class="caddercrit"><a href="manga.php?idmanga=16" ><img src="../images/manga/alice_19thtome_7couvface.jpg" alt="Alice 19th"><br>Alice 19th - tome 7</a></p>
		<div style="clear:both;">&nbsp;</div>
    </div> 
               <div class="fictecbot"> 
               </div> 
 
            </div></body>
</html>

il est vrai que j'ai du ajouter dans le div "clear" l'affichage d'un espace pour éviter un rendu que je ne comprends pas sous netscape

06/02/2006, 00h57
Death83

Merci ca marche ;).