Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1596 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1408851
xkamui
Their Destiny Was Foreordained
Posté le 18-07-2006 à 22:07:29  profilanswer
 

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
mood
Publicité
Posté le 18-07-2006 à 22:07:29  profilanswer
 

n°1408894
xkamui
Their Destiny Was Foreordained
Posté le 18-07-2006 à 22:53:15  profilanswer
 
n°1408925
Pitsy
Posté le 18-07-2006 à 23:06:21  profilanswer
 


 
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.

n°1408935
xkamui
Their Destiny Was Foreordained
Posté le 18-07-2006 à 23:10:05  profilanswer
 

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

n°1408943
xkamui
Their Destiny Was Foreordained
Posté le 18-07-2006 à 23:17:30  profilanswer
 

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

n°1408956
Pitsy
Posté le 18-07-2006 à 23:27:41  profilanswer
 

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

n°1408958
xkamui
Their Destiny Was Foreordained
Posté le 18-07-2006 à 23:28:37  profilanswer
 

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
n°1408967
Pitsy
Posté le 18-07-2006 à 23:33:53  profilanswer
 

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

n°1408975
xkamui
Their Destiny Was Foreordained
Posté le 18-07-2006 à 23:39:18  profilanswer
 

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

n°1408981
Pitsy
Posté le 18-07-2006 à 23:42:41  profilanswer
 

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 ?

mood
Publicité
Posté le 18-07-2006 à 23:42:41  profilanswer
 

n°1408988
xkamui
Their Destiny Was Foreordained
Posté le 18-07-2006 à 23:46:34  profilanswer
 

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

n°1409008
Pitsy
Posté le 18-07-2006 à 23:54:50  profilanswer
 

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
n°1409317
xkamui
Their Destiny Was Foreordained
Posté le 19-07-2006 à 11:50:54  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
[résolu][Excel]automatiser taille commentaireserreur définie par l'application ou par l'objet résolu
[opengl]Pb: liberation mémoire textures [RESOLU]Help !!! Problème d'affichage de page
copier une plage de cellule résoluProbleme de POST lors de l'actualisation de ma page ??
[C# .net] Faire une recherche dans une page weble php et allopass(protection de page)
[Résolu][C# .net] SqlDataReader ne contenant rien => exception[VBA] RESOLU Extraction d'une chaine de caractères
Plus de sujets relatifs à : Div qui ne prend pas toute la hauteur de la page... [résolu]


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR