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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1365610
godbout
Génial.
Posté le 13-05-2006 à 13:23:23  profilanswer
 

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
mood
Publicité
Posté le 13-05-2006 à 13:23:23  profilanswer
 

n°1366003
godbout
Génial.
Posté le 14-05-2006 à 20:31:42  profilanswer
 

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

n°1366094
mIRROR
Chevreuillobolchévik
Posté le 14-05-2006 à 23:11:18  profilanswer
 

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

n°1366122
godbout
Génial.
Posté le 14-05-2006 à 23:56:49  profilanswer
 

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]

n°1366127
godbout
Génial.
Posté le 15-05-2006 à 00:24:59  profilanswer
 

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

n°1366248
mIRROR
Chevreuillobolchévik
Posté le 15-05-2006 à 10:50:12  profilanswer
 

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%

n°1366368
godbout
Génial.
Posté le 15-05-2006 à 12:29:37  profilanswer
 

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:


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

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

 

Sujets relatifs
[HTML/CSS] :hover qui souligne les ancrages[CSS/HTML] Utiliser les médias audios
[HTML/CSS] pb pour creer un menuPassage de variable...multicodes (HTML PHP JS)
[CSS] élément select grisé car "disabled"solution pour mettre en forme du texte html dans un formulaire
Marche sous firefox pas sous IE 
Plus de sujets relatifs à : [HTML/CSS] Firefox et boites div imbriquées


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