Débordement bloc css

**Setsu** · 22/02/2006, 16h00

bonjour, j'ai un petit problème...
lorsque je tape du texte dans un bloc et que le texte prend plus de place en hauteur que la heuteur du bloc il s'étire (uniquement dans ie pas firefox déja un premier probleme) mais le bloc d en dessous ne descent pas... comment faire pour que le bas de la page descende en fonction de la taille du bloc qui s etire et pour que ca marche sous firefox egalement... voici des screen shot
sous IE:

et sous firefox

et voici mon code

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
68
69
70
71
72
73
74
75
76
77
78
79
80
 
#all {
	height: 700px;
	width: 800px;
	left: 50%;
	top: 0%;
	margin-left: -400px;
	position: absolute;
}
 
#centre {
	height: 460px;
	width: 800px;
	background-image: url(images/centrebg.jpg);
	background-repeat: repeat-y;
	}
 
#centhautgauch {
	height: 130px;
	width: 260px;
	position: absolute;
	left: 20px;
	top: 10px;
	background-color:#666666;
	border-color:#333333; 
	border-width: 1px; 
	border-style: solid;
	}
 
#centhautcent {
	height: 130px;
	width: 220px;
	position: absolute;
	left: 290px;
	top: 10px;
	}
 
 
#centhautdroit {
	height: 130px;
	width: 260px;
	position: absolute;
	right: 20px;
	top: 10px;
	background-color:#666666;
	border-color:#333333; 
	border-width: 1px; 
	border-style: solid;
	}
 
#centgauch {
	height: 280px;
	width: 180px;
	position: absolute;
	top: 160px;
	left: 20px;
	background-color:#FFFFFF;
	border-color:#333333;
	border-width: 1px;
	border-style: solid;
	overflow: inherit;
	}
 
#centdroit {
	height: 280px;
	width: 180px;
	position: absolute;
	top: 160px;
	right: 20px;
	background-color:#FFFFFF;
	border-color:#333333;
	border-width: 1px;
	border-style: solid;
	}
 
#basdepage {
	height: 30px;	
	width: 800px;
	background-image: url(images/basdepagebg.jpg); 
	}

et l'html :

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
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans nom</title>
<link href="style1.css" rel="stylesheet" type="text/css">
</head>
 
<body>
<div id="all">
<div id="centre">
 
<div id="centhautgauch"></div>
 
<div id="centhautdroit"></div>
 
<div id="centhautcent"></div>
 
<div id="centgauch">
  <p>sdlkfjlsdkfjs</p>
  <p>fslkdfjlskdjfs</p>
  <p>dfklsdjflskjdf</p>
  <p>sdfkjsldkfs</p>
  <p>dfjslkdfjslkdfl</p>
  <p>sdfjlskjdfslkdjf</p>
  <p>skdfjlskdfjsl</p>
  <p>sdfjlkfjslkdfjs</p>
  <p>dfslkdjflskdfjsdf</p>
  <p>lskdfjslkdfjs</p>
</div>
 
<div id="centdroit"></div>
 
</div>
 
<div id="basdepage"></div>
 
</div>
 
</body>
</html>

Pour ce qui est du code en fait j ai un div all qui englobe le tout, le div centre reprend les éléments centraux avec une image de fon qui donne c est effet d ombre et le div bas qui est le bas de page en vers avec egalement l effet d ombre pour s intégrer avec le reste...

Merci d'avance à tous ceux qui pourront m'aider

**_dranece_** · 22/02/2006, 16h38

Essayes ces petites modifications:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
...
#centgauch {
   _height: 280px;
   min_height: 280px;
   width: 180px;
   ...
   } 
...
.gclear{
   clear:both;
   font-size:0;
   line-height:0;
}

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
...
<div id="centdroit"></div>
 
</div>
<div class="gclear"></div>
<div id="basdepage"></div>
 
</div>
 
</body>
</html>

**Setsu** · 22/02/2006, 17h16

Ok pour le probleme lié a firefox (tout le contenu se trouve bien dans le bloc qui s allonge)
Il reste maintenant le problème de mon bloc centre qui ne s agrandit pas
et du bloc basdepage qui ne descend pas j'ai essayé la même texhnique mais sans succes... que veulent dire les attributs "_height" et "min_height" ?

**_dranece_** · 22/02/2006, 17h33

_height n'est compris que sous IE

min_height permet de définir une hauteur minimum mais n'est pas interprété par IE. C'est lui qui resoud le problème que tu avais sous Firefox à condition que la hauteur ne soit pas défini (d'où le _height qui n'est pas compris par firefox).

tu as bien ajouté ce block avec sa définition css?:

Code :

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

<div class="gclear"></div>

**Setsu** · 22/02/2006, 17h49

ui j'ai ajouté la définition dans mon fichier css et je l appelle à l'endroit que tu m as indiqué dans ma page html mais rien n'y fait ni sous ie ni sous ff

**_dranece_** · 22/02/2006, 17h59

Tu peux remettre un shoot d'écran ou un lien vers ton site pour voir ce que ca donne.
Si ton probleme est que les 3 blocks (gauche, centre et droit) n'ont pas la même hauteur lorsque l'un des blocks déplace la hauteur minimale alors je n'ai pas de solution simple (Il y a plusieurs messages récents qui abordent ce problème).

**Setsu** · 22/02/2006, 18h07

ca donne exactement la même chose que sur le screenshot sous IE dans le premier post...

Attention que le bloc gauche et droite sont contenu dans le bloc centre...

en fait tout ce que je voudrais c est que dans mon bloc gauche par exmple s agrandit a cause de son contenu ben que le bloc "centre" qui le contient s agrandisse aussi (logique puisque son contenu (centgauch) depace sans hauteur) c est pas failce à expliquer tout ca

en gros il faudrait que le bloc centre réagisse avec son contenu (centdroit et centgauche) de la même manière que le bloc centgauch réagi avec son contenu...en gros qd son contenu depace sa hauteur il s agrandit...

et que de ce fait le bloc "basdepage" descende puisque le "centre" est plus grand...

**Setsu** · 25/02/2006, 14h14

Personne pour m'aider?

**Linaa** · 25/02/2006, 19h56

C'est min-height, non pas min_height.

Débordement bloc css

CSS

Vue hybride

Discussions similaires

Partager

Partager