probleme avec height sous netscape!

**Death83** · 01/02/2006, 23h00

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

.

**azertyman** · 02/02/2006, 10h38

utilise la propriété

Code :

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

min-height

, qui définit une hauteur minimale.

**Death83** · 02/02/2006, 11h51

Envoyé par azertyman

utilise la propriété

Code :

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

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?

**Death83** · 04/02/2006, 15h56

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

D'autres idées?

**francis m** · 04/02/2006, 17h07

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

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

**Death83** · 04/02/2006, 21h23

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).

**Death83** · 04/02/2006, 21h27

Voila le code source pour vous aider:

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

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
.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;
}

**francis m** · 05/02/2006, 14h29

remplace la section div fictecmid par le code suivant :

Code :

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

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

**Death83** · 05/02/2006, 15h44

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

**francis m** · 06/02/2006, 00h53

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 :

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

**Death83** · 06/02/2006, 01h57

Merci ca marche

.

probleme avec height sous netscape!

HTML

Discussions similaires

Partager

Partager