[HTML/CSS] Firefox et boites div imbriquées

Firefox et boites div imbriquées [HTML/CSS] - HTML/CSS - Programmation

Marsh Posté le 13-05-2006 à 13:23:23    

Je galère avec Firefox comme c'est pas permis :mad:
 
Voilà le problème :
 
Dans mon body j'ai une boite div "page". Dans cette boite div "page", j'ai des boites div "column1", "main", et "column2".
Les hauteurs des boites body et page doivent suivre la hauteur de "page", qui lui suit la hauteur du plus grand entre "column1", "main", et "column2".
Ca marche très bien sous ie, mais pas sous Firefox. Sous ie, toutes mes boites sont bien imbriquées les unes dans les autres, sous Firefox, c'est du tout n'importe quoi : chaque boite sort de son parent. J'ai vu ça en affichant les bordures :o
J'ai essayé de bidouiller avec les height, overflow - visible, auto, etc..., rien n'y fait. J'y arrive pas :/
J'capte pas où j'foire.
 
Le code :  
 

Code :
  1. /*
  2. Balises  par défaut  
  3. */
  4. body, html
  5. {
  6. color:#1F1824;
  7. background-color:#EEE5F9;
  8. text-align:center;
  9. margin:0;
  10. margin-bottom:20px;
  11. padding:0;
  12. width:100%;
  13. height:100%;
  14.  /*order:thin solid purple;*/
  15. }
  16. /*
  17. Eléments de mise en page
  18. */
  19. #page
  20. {
  21. position:relative;
  22. width:780px;
  23. height:100%;
  24. margin-left:auto;
  25. margin-right:auto;
  26. border:1px solid #DCD5E4;
  27.  /*border:thin solid orange;*/
  28. }
  29. #column1
  30. {
  31. float:left;
  32. width:150px;
  33. _width:140px;
  34. height:150%;
  35. text-align:left;
  36. background-color:#725693;
  37. border-width:0;
  38.  /*border:thin solid red;*/
  39. }
  40. #column2
  41. {
  42. float:right;
  43. width:150px;
  44. _width:140px;
  45. height:150%;
  46. text-align:left;
  47. background-color:#C7B4DD;
  48.  /*border:thin solid yellow;*/
  49. }
  50. #main
  51. {
  52. float:left;
  53. text-align:left;
  54. width:430px;
  55. padding:0px 30px 35px 20px;
  56. /*height:100%;*/
  57. background-color:#EEE5F9;
  58. font-family:Verdana;
  59. font-size:12px;
  60. font-weight:normal;
  61.  /*border:thin solid green;*/
  62. overflow:hidden;
  63. }


 
Le code html est bidon, c'est juste de l'imbrication du body -> page -> column1 + main + column2.
 
Pour voir ce que ça donne : http://godbout.free.fr
On voit pas que ça déconne bcp, mais tout est foireux. La bordure violette de ma "page" n'est pas visible sous Firefox car elle est cachée par le main à cause de sa hauteur trop petite. (Si on clique sur "mai 2006" à droite, on peut voir le bas de la bordure apparaitre.
 
Aidez-moi :cry:


Message édité par godbout le 13-05-2006 à 14:13:07
Reply

Marsh Posté le 13-05-2006 à 13:23:23   

Reply

Marsh Posté le 14-05-2006 à 20:31:42    

J'ai passé la journée dessus, j'ai rien réussi à faire de correct avec Firefox. J'ai repris tout depuis le début, j'suis incapable d'imbriquer 4 boites correctement, tout fout le camp, aucune boite ne suit la taille de l'autre, c'est vraiment le bordel ce truc. Ca me donne l'impression d'avoir rien capté du tout à ce que j'ai fait jusqu'à maintenant. Et ce serait Firefox qui serait plus aux normes W3C que ie ? :??:

Reply

Marsh Posté le 14-05-2006 à 23:11:18    

>>Et ce serait Firefox qui serait plus aux normes W3C que ie ? :??:
 
booh le vilain troll  :o  
bref
 
 
 
j ai essayé en rajoutant des guillemets aux pourcentages et c est ok
ca resoudra donc ton probleme pour ta column2
 
pour ce qui est de ton cadre page il faut utiliser le hack du clear:both
en gros il suffit d ajouter
<hr style="clear:both;visibility:hidden" /> avant la balise de fermeture de ton div page
(un truc que j ai appris sur alsacreations mais je retrouve plus le lien)

Reply

Marsh Posté le 14-05-2006 à 23:56:49    

mIRROR a écrit :


booh le vilain troll  :o  
bref


Ah :??:
Ben pourtant j'étais sérieux :D
 

mIRROR a écrit :


j ai essayé en rajoutant des guillemets aux pourcentages et c est ok
ca resoudra donc ton probleme pour ta column2


Hein quoi ? :??:
Quels pourcentages ? :??:
Quel pb de la column2 ? :??:
 

mIRROR a écrit :


pour ce qui est de ton cadre page il faut utiliser le hack du clear:both
en gros il suffit d ajouter
<hr style="clear:both;visibility:hidden" /> avant la balise de fermeture de ton div page
(un truc que j ai appris sur alsacreations mais je retrouve plus le lien)


Ok, j'essaye, merci [:ocube]

Reply

Marsh Posté le 15-05-2006 à 00:24:59    

Pour le <hr> ça marche seulement si je mets mon page en height:auto au lieu de height:100%. Du coup, mes hauteurs de colonnes foirent, super :D
Mais merci pour l'astuce quand même. [:super chinois]
J'vais voir pour rajouter une div container qui englobe le tout, et jouer avec ça. Mais c'est vraiment la misère pour pas grand chose :D

Reply

Marsh Posté le 15-05-2006 à 10:50:12    

le probleme de la column2 : ta box archives n est pas couverte par le background et pour le hr ca marche tres bien auusi.
dans les deux cas tu mets "100%" au lieu de 100%

Reply

Marsh Posté le 15-05-2006 à 12:29:37    

Ah merde, j'avais pas fait gaffe :??:
Par contre le coup des "100%", ça fonctionne parce que le navigateur ne le comprend pas, du coup il le fout en auto, et effectivement dans ce cas ma box archives sera toujours recouverte :o
 
Merci en tout cas, j'vais pouvoir finir ça rapidement et passer à autre chose :jap:

Reply

Sujets relatifs:

Leave a Replay

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