Div qui ne prend pas toute la hauteur de la page... [résolu]

Div qui ne prend pas toute la hauteur de la page... [résolu] - HTML/CSS - Programmation

Marsh Posté le 18-07-2006 à 22:07:29    

Regardez cette page sous IE et FFox, je pense qu'en regardant le bas de la page, vous comprendrez mon problème.
 
Tout les styles sont dans la page HTML même.
 
Es-ce que vous pourriez me dire comment faire descendre le background de mon div 'main' jusqu'en bas, quelque soit la longueur de texte.
 
Merci


Message édité par xkamui le 19-07-2006 à 11:50:19
Reply

Marsh Posté le 18-07-2006 à 22:07:29   

Reply

Marsh Posté le 18-07-2006 à 22:53:15    

Reply

Marsh Posté le 18-07-2006 à 23:06:21    


 
Les éléments positionnés en float ne s'écoulent pas selon le flux normal. Ton conteneur ne descend pas parce qu'il n'y a pas de contenu dans le flux. Pour y remédier tu peux utiliser le clear:both; à mettre idéalement dans un footer à l'intérieur de ton main, si footer il est prévu.

Reply

Marsh Posté le 18-07-2006 à 23:10:05    

Le truc c'est que mon background-image est dans la class :  
.div-main {width: 850px; height:  100%; background: url('img/template/bg-main-10.gif') top left #048397; margin-left: auto; margin-right: auto; display: block;}
 
Aucun float dans ce div, donc il devrait s'agrandir... Je crois comprendre le problème avec le div-text, mais ce dernier n'as pas de fond...

Reply

Marsh Posté le 18-07-2006 à 23:17:30    

Je viens de changer... d'intégrer mes DIVs de droite dans le DIV texte (celui qui contient les Hello World)
 
Cependant, sous renard de feu, toujours rien... il continu à ne pas pas m'afficher mon background-image.
 
Je me demande si celà viendrait de ça 'height:  100%' dans le div-main...

Reply

Marsh Posté le 18-07-2006 à 23:27:41    

xkamui a écrit :

Le truc c'est que mon background-image est dans la class :  
.div-main {width: 850px; height:  100%; background: url('img/template/bg-main-10.gif') top left #048397; margin-left: auto; margin-right: auto; display: block;}
 
Aucun float dans ce div, donc il devrait s'agrandir... Je crois comprendre le problème avec le div-text, mais ce dernier n'as pas de fond...


 
Ton contenu se trouve respectivement dans le div-text et div-menu qui sont positionné en float left et float right, donc leur contenu n'est pas dans le flux, donc le flux s'arrête là ou il y a le dernier contenu dans le flux, soit à la fin de ton div-tete et donc ton div main s'arrête là aussi.
 
(sorry suis un peu crevée là, pas étudier à fond le problème mais suis presque sûre que c'est ça...)

Reply

Marsh Posté le 18-07-2006 à 23:28:37    

ok, j'essaye en virant tout mes float...
 
-------------------------------------
 
J'ai retiré mes float, mais ça ne change rien... du moins sur le background qui devrait s'étendre...

Message cité 1 fois
Message édité par xkamui le 18-07-2006 à 23:30:47
Reply

Marsh Posté le 18-07-2006 à 23:33:53    

xkamui a écrit :

ok, j'essaye en virant tout mes float...
 
-------------------------------------
 
J'ai retiré mes float, mais ça ne change rien... du moins sur le background qui devrait s'étendre...


 
Si ça change un minimum. Maintenant il s'arrête là où tu as fixé le 100%. La hauteur que tu lui a donné c'est 100% donc il s'y arrête

Reply

Marsh Posté le 18-07-2006 à 23:39:18    

je ne vois vraiment pas comment faire pour arranger le truc, puisque mes float right, j'en ai besoin... a moins d'utiliser des position: relative...

Reply

Marsh Posté le 18-07-2006 à 23:42:41    

xkamui a écrit :

je ne vois vraiment pas comment faire pour arranger le truc, puisque mes float right, j'en ai besoin... a moins d'utiliser des position: relative...


 
non, utilise ton float, y a moyen de faire descendre ton div. Comment imaginais-tu le bas de ton design? vas-tu mettre un footer, ou c'est juste le bleu qui s'arrête ? ou encore tu voulais que le bleu aille de toute manière toujours jusque tout en bas ?

Reply

Marsh Posté le 18-07-2006 à 23:42:41   

Reply

Marsh Posté le 18-07-2006 à 23:46:34    

je voulais que le bleu aille de toute manière toujours jusque tout en bas...
 
Exactement comme sous Ie en fait...

Reply

Marsh Posté le 18-07-2006 à 23:54:50    

Pour tes pages plus longues que la hauteur de l'écran, y a pas de problème; tu peux règler le problème de la manière suivante:
 
Si tu as un footer, tu le mets au bas du main avec un clear:both et c'est règlé (en virant le 100% du main donc).
Si tu n'as pas de footer, 2 choix:
 
- soit tu rajoutes un élément vide en bas pour placer le clear both, du genre <div style="clear:both;"></div> ou un hr, du genre
- soit tu rajoutes ceci dans ton css:
(au passage, tes éléments uniques devraient être définis par un id et pas un class, typiquement le main)
 

Code :
  1. #div-main:after {
  2.   clear: both;
  3.   content: ".";
  4.   display: block;
  5.   height: 0;
  6.   visibility: hidden;
  7. }
  8. * html #div-main {height:1%}  /* hack IE */


 
Maintenant pour le cas où ton contenu ne dépasse pas la hauteur de l'écran c'est plus galère et je ne maîtrise pas à fond, je viens juste de tester 2-3 truc ce soir sur le sujet, par hasard.
 
edit: autrement, vire aussi le height de ton div div-gog


Message édité par Pitsy le 19-07-2006 à 00:25:50
Reply

Marsh Posté le 19-07-2006 à 11:50:54    

C'est bon, tout est résolu après le suivi des explications + tatonnements
 
Merci encore à toi Pitsy :)


Message édité par xkamui le 19-07-2006 à 11:51:06
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed