Débordement contenu bloc

Question

Tetsuo

21 Feb 2006 à 18:46

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:
http://users.skynet.be/fa063893/iexp.jpg

et sous firefox
http://users.skynet.be/fa063893/firefox.gif

et voici mon code

css:


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


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

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

fvsch

21 Feb 2006 à 19:08

Un problème de float ? Vite, mon [s]anti-ride[/s] tutoriel made in Covert Prestige (Paris).

Bon ok, là c'est de l'auto-pub éhontée Smiley rolleyes

Mais le lien, c'est par là :
Éléments flottants qui dépassent de l'élément parent

Au fait, quelqu'un sait si on dit élément flotté ou élément flottant (ou les deux) ?
Edit : les anglo-saxons utilisent "floating"... ça serait donc flottants.|/i]
Modifié par mpop (21 Feb 2006 - 19:21)

Tetsuo

21 Feb 2006 à 19:23

J'ai beau essayé toutes les soluces aucun changements (clear:both, float left, overfow:auto,...

Ne serait ce pas du aussi au fait que tous mes blocs sont en position absolue ? ? ?
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...
Modifié par Tetsuo (21 Feb 2006 - 19:25)

Tetsuo

22 Feb 2006 à 13:50

Personne pour m expliquer ? ? ?

Pandore

22 Feb 2006 à 22:01

Mais mpop, où as-tu vu qu'il y avait des flottants dans le code ???

a écrit :
#all {

height: 700px;

}

#centre {

height: 460px;

}

#centhautgauch {

height: 130px;

}

#centhautcent {

height: 130px;

}

#centhautdroit {

height: 130px;

}

#centgauch {

height: 280px;

}

#centdroit {

height: 280px;

}

#basdepage {

height: 30px;

}

Et pourquoi veux-tu que ça s'allonge : je dirais que c'est un comportement normal dans la mesure où tu fixes toutes les hauteurs de tes blocs par des "height" lol

Pour imager, c'est comme si tu avais un verre et que tu le remplis d'eau. Tant que le volume est suffisant pour contenir ce que tu mets, pas de problème, mais si tu mets trop d'eau, le verre ne va pas s'allonger lol Smiley lol

ça va déborder du conteneur!

Là, c'est le même principe Smiley cligne

Tetsuo

22 Feb 2006 à 23:08

ok jusque la je comprend pourtant mon bloc de gauche lui s agrandit en fonction du contenu (txt) ce que le probleme sous firefox est résolu en utilisant un min-height...maintenant comment faire pour que le centre et le all s allonge en fonction des contenu (centgauch par ex) et que de ce fait le basdepage descende...

Pandore a écrit :
lol ça va déborder du conteneur!

Lol comment je fais pour que le verre s allonge si tu préfère (bien qu il s allonge déjà dans le centgauch ca c est vraiment lol non?
Modifié par Tetsuo (22 Feb 2006 - 23:12)

Pandore

22 Feb 2006 à 23:50

ben, normalement, si tu enlèves les height de #all et #centre, ils devraient pouvoir s'adapter au contenu Smiley cligne

Sinon, tu pourrais nous donner un lien en ligne vers une page test, c'est plus pratique pour suivre Smiley smile

Tetsuo

23 Feb 2006 à 00:37

ok alors voila un lien http://users.skynet.be/fa063893/test.htm

voila le code css qui va avec


#all {  
   width: 800px; 
   left: 50%; 
   top: 0%; 
   margin-left: -400px; 
   position: relative; 
} 
    
#centre { 
   height: 460px;
   min-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; 
   min_height: 280px; 
   width: 180px; 
   position: absolute; 
   top: 160px; 
   left: 20px; 
   background-color:#FFFFFF; 
   border-color:#333333; 
   border-width: 1px; 
   border-style: solid; 
   overflow: inherit; 
   } 

.gclear{ 
   clear:both; 
   font-size:0; 
   line-height:0; 
} 
    
#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-color:#CC6600; 
   }

et voila ce que ca donne qd j enleve le height du all et du centre
http://users.skynet.be/fa063893/testt.jpg

ced29

23 Feb 2006 à 14:36

Tout nouveau ds la démarche CSS après des années de tableaux en tout genre (désolé), je me permets de le "re-Uper" car j'ai moi aussi exactement le même problème et les diverses solutions proposées ne semblent pas fonctionner.
Une petite main charitable pour aider les newbies Smiley smile

Pandore

24 Feb 2006 à 21:57

Bon, j'ai regardé un peu plus en profondeur vu que c'est pas encore résolu^^

J'ai testé cette solution qui donne un affichage comme tu voulais :

Pour le xHTML:

<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"> <p>blabla1</p> 
 </div> 

<div id="centhautdroit"><p>blabla2</p> </div> 

<div id="centhautcent"><p>blabla3</p> </div> 
<div class="gclear"></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"><p>blabla4</p></div> 

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

</body> 
</html>

Pour le CSS :

#all {  

   width: 800px; 

   left: 50%; 

   top: 0%; 

   margin-left: -400px; 

   position: relative; 

} 

    

#centre { 

   height: 460px;

   min-height: 460px; 

   width: 800px; 

   background-image: url(images/centrebg.jpg); 

   background-repeat: repeat-y; 

   } 



#centhautgauch { 

   height: 130px; 

   width: 260px; 

  float:left;
   background-color:#666666; 

   border-color:#333333; 

   border-width: 1px; 

   border-style: solid; 

   } 

    

#centhautcent { 

   height: 130px; 

   width: 200px; margin:auto;

 
 
   } 

    

    

#centhautdroit { 

   height: 130px; 

   width: 260px; 

float:right;
   background-color:#666666; 

   border-color:#333333; 

   border-width: 1px; 

   border-style: solid; 

   } 



#centgauch { 

   _height: 280px; 

   min_height: 280px; 

   width: 180px; 

  float:left;
   background-color:#FFFFFF; 

   border-color:#333333; 

   border-width: 1px; 

   border-style: solid; 

   overflow: inherit; 
   } 



.gclear{ 

   clear:both; 

   font-size:0; 

   line-height:0; 

} 

    

#centdroit { 

   height: 280px; 

   width: 180px; 

  float:right;
   background-color:#FFFFFF; 

   border-color:#333333; 

   border-width: 1px; 

   border-style: solid; 

   } 



#basdepage { 

   height: 30px;    

   width: 800px; 

   background-color:#CC6600; 

   }

Il faudra jouer sur les margin/padding pour positionner les blocs comme tu veux.

Solution qui marche avec Firefox 1.5, je n'ai pas testé avec les autres navigateurs Smiley langue

Un remarque tout de même : un clear:both; comme tu l'avais fait ne sert à rien lol car ça coupe les éléments flottants et pas les position:absolute; Smiley cligne

Voilà

Tetsuo

25 Feb 2006 à 15:14

De fait ca fonctionne (il fallait donc faire passer les bloc en float) par contre l image de fond ne se duplique pas jusqu en bas sous firefox dans le bloc central et je sais pas pourquoi???
merci pandore

Pandore

25 Feb 2006 à 15:59

Je n'ai pas testé avec les images, seulement le code Smiley cligne

Tu peux mettre à jour ta page test pour que je vois ce que ça fait exactement ??? Smiley smile

Modifié par Pandore (25 Feb 2006 - 15:59)

Tetsuo

25 Feb 2006 à 17:29

voila le lien http://users.skynet.be/fa063893/teste.htm
et le css


#all {  

   width: 800px; 

   left: 50%; 

   top: 0%; 

   margin-left: -400px; 

   position: relative; 

} 

    

#centre { 


   min-height: 460px; 

   width: 800px; 

   background-image: url(images/centrebg.jpg); 

   background-repeat: repeat-y; 

   } 



#centhautgauch { 

   height: 130px; 

   width: 260px; 

  float:left;
   background-color:#666666; 

   border-color:#333333; 

   border-width: 1px; 

   border-style: solid; 

   } 

    

#centhautcent { 

   height: 130px; 

   width: 200px; margin:auto;

 
 
   } 

    

    

#centhautdroit { 

   height: 130px; 

   width: 260px; 

float:right;
   background-color:#666666; 

   border-color:#333333; 

   border-width: 1px; 

   border-style: solid; 

   } 



#centgauch { 

   _height: 280px; 

   min_height: 280px; 

   width: 180px; 

  float:left;
   background-color:#FFFFFF; 

   border-color:#333333; 

   border-width: 1px; 

   border-style: solid; 

   overflow: inherit; 
   } 



.gclear{ 

   clear:both; 

   font-size:0; 

   line-height:0; 

} 

    

#centdroit { 

   height: 280px; 

   width: 180px; 

  float:right;
   background-color:#FFFFFF; 

   border-color:#333333; 

   border-width: 1px; 

   border-style: solid; 

   } 



#basdepage { 

   height: 30px;    

   width: 800px; 

   background-color:#CC6600; 

   }

Pandore

25 Feb 2006 à 20:03

en faisant ça :

#all {  
   width: 800px; 
   left: 50%; 
   top: 0%; 
   margin-left: -400px; 
   position: relative; 
   background-image: url(images/centrebg.jpg); 
   background-repeat: repeat-y; 
} 

#centre { 
   min-height: 460px; 
   width: 800px; 
   }

ça fait descendre le background jusqu'en bas du footer Smiley biggrin

Après tu joues avec les margin/padding pour positionner tes blocs si nécessaire Smiley cligne

Modifié par Pandore (25 Feb 2006 - 20:03)

Tetsuo

25 Feb 2006 à 20:12

mouais ca fonctionne pas avec l ensemble du site mais c a pas grave...
par contre comment tu fais pour que les marges aient le meme effet dans ie et ff ??

Pandore

25 Feb 2006 à 21:55

Pour le background, il suffit de la mettre sur le body; Essaies ça :

body  {
   margin:0px;
   padding:0px;
   background-image: url(images/centrebg.jpg); 
   background-repeat: repeat-y;
   background-position:top; 
}

#all {  
   width: 800px; 
   left: 50%; 
   top: 0px; 
   margin-left: -400px;
   margin-top:0px;
   padding-top:0px;
   padding-bottom:30px;
   position: absolute; 
} 

#centre { 
   height: 460px;
   min-height: 460px; 
   width: 800px;  
   }

ça marche bien sous IE et Firefox. A noter que sous Firefox, j'observe un espace tout en haut. Je ne vois pas pourquoi ... Smiley murf

Sujet clos