probleme background color en CSS sur Firefox

probleme background color en CSS sur Firefox - HTML/CSS - Programmation

Marsh Posté le 04-12-2007 à 01:29:47    

Bonjour,  
j'ai un probleme d'affichage du  background color en CSS sur Firefox
 
voici mon fichier CSS

Code :
  1. CSS Document */
  3. body {
  4. background-color: #000000;
  5. }
  6. #page {
  7. MARGIN-TOP: 10px;
  8. VISIBILITY: visible;
  9. MARGIN-LEFT: auto;
  10. WIDTH: 900px;
  11. LINE-HEIGHT: 14px;
  12. MARGIN-RIGHT: auto;
  13. POSITION: relative;
  14. background-color: #FFFFFF;
  15. height: auto;
  16. font-family: Verdana, Arial, Helvetica, sans-serif;
  17. FONT-SIZE: 11px;
  19. }
  20. #box1 {
  21. height: 106px;
  22. width: 900px;
  23. position: relative;
  24. visibility: visible;
  25. }
  26. #box2 {
  27. POSITION: relative;
  28. height: 1px;
  29. width: 900px;
  30. float: left;
  31. clear: left;
  32. bottom: 19px;
  33. }
  34. #box3 {
  35. float: left;
  36. POSITION: relative;
  37. height: 149px;
  38. width: 500px;
  39. visibility: visible;
  40. bottom: 0px;
  41. top: 7px;
  42. left: 170px;
  43. }
  45. #box4 {
  46. clear: right;
  47. float: right;
  48. POSITION: relative;
  49. height: 149px;
  50. width: 229px;
  51. right: 0px;
  52. top: 7px;
  53. }
  54. #box5 {
  55. float: left;
  56. POSITION: relative;
  57. height: 20px;
  58. width: 468px;
  59. right: 0px;
  60. top: 35px;
  61. left: 27px;
  62. font-family: Arial, Helvetica, sans-serif;
  63. font-size: 19px;
  64. font-weight: bold;
  65. color: #F47920;
  66. }
  67. #box6 {
  68. float: left;
  69. POSITION: relative;
  70. width: 468px;
  71. min-height: 60px;
  72. height: auto;
  73. max-width: 468px;
  74. overflow: hidden;
  75. text-align: justify;
  76. padding-top: 15px;
  77. padding-bottom: 10px;
  78. right: 0px;
  79. top: 45px;
  80. left: 27px;
  81. font-family: Arial, Helvetica, sans-serif;
  82. font-size: 12px;
  83. }
  84. #box7 {
  85. clear: both;
  86. float: left;
  87. POSITION: relative;
  88. height: 76px;
  89. width: 900px;
  90. right: 0px;
  91. top: 60px;
  92. }
  93. #box8 {
  94. clear: both;
  95. float: left;
  96. POSITION: relative;
  97. height: 250px;
  98. width: 175px;
  99. right: 0px;
  100. top: 37px;
  101. }
  102. #box9 {
  103. float: left;
  104. POSITION: relative;
  105. height: 200px;
  106. width: 200px;
  107. right: 0px;
  108. left: 56px;
  109. bottom: 0px;
  110. top: 5px;
  111. }


 
et voici mon fichier Html simplifié...
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <link href="feuille de style.css" rel="stylesheet" type="text/css" />
  5. <body>
  7. <DIV align=center>
  9. <DIV id=page>
  10. <div id=box1></div>
  11.   <DIV id=box2></DIV>
  12.   <DIV id=box3></div>
  13. <DIV id=box4></div>
  14. <div id=box8></div>
  15. <div id=box5></div>
  16. <div id=box6></div>
  17. <div id=box9></div>
  18. <div id=box7></div>
  19. </DIV>
  20. </DIV>
  21. </BODY></HTML>


 
le probleme est en fait que je veux que ma page d'uhe largeur de 900 pixels soit centré (d'ou la box page qui me sert a centrer le reste) et blanche alors que le reste de la page (donc sur les cotés plus ou moins grand selon la resolution d'ecran) soit noirs
si je mets un background-color noir dans le body  et une autre couleur (blanc) dans la box "page" cela marche très bien sur IE mais pas du tout sur Firefox (ou presque toute la "page" se voit appliquer le fond noir.
le seul moyen d'arriver a mes fins que j'ai trouvé est d'appliquer a ma box "page" une position absolue ou fixe.. alors a ce moment la le fond reste bien blanc sur toute ma page mais ce n'est plus centré mais aligné a gauche, d'ou un probleme.
Or je tiens vraiment à ce coté centré de ma page... et au fond gris ou noir qui rend vraiment plus clair le graphisme de mon site...
Je suis donc perdu et viens a vous avec toute l'humilité du débutant que je suis....
Quelqu'un aurait-il une idée qui me permettrait de corriger mon CSS pour que dans Firefox ma page de 900 pixels de large sur une longueur variable s'affiche centré et en blanc sur un fond général noir ?
D'avance merci.... et j'espère que vous aurez compris mes explications confuses.....
Cordialement..


Message édité par buvette1 le 04-12-2007 à 12:57:23
Reply

Marsh Posté le 04-12-2007 à 01:29:47   

Reply

Marsh Posté le 04-12-2007 à 05:08:32    

Rahh, p....n de bordel de m...e, je trouve que ces navigateurs laissent passer vraiment trop de code imbitable. Déjà ton XHTML, tu devrais mieux mettre du HTML, parce que ce n'est pas du tout du XML ton fichier, sans parler de ton MiXeD CaPs, qui date du siècle dernier. Mais ça on s'en fout.
 
Le truc vraiment louche dans ton CSS, c'est le coup des "float: left; clear: left;" dans la même règle CSS. T'espérait faire quoi avec ça ? Ça sent la bidouille, façon je code comme un gorêt jusqu'à ce que ça passe avec un navigateur et vient ensuite râler quand ça ne passe pas sur un autre.
 
J'imagine que c'est pour caler tes div à gauche ou a droite, mais pour supprimer le flottant utilise un "br", avec une règle "clear" dessus.
 
W3C, gougueule, toussa pour les détails ...

Message cité 1 fois
Reply

Marsh Posté le 04-12-2007 à 09:21:14    

tpierron a écrit :

J'imagine que c'est pour caler tes div à gauche ou a droite, mais pour supprimer le flottant utilise un "br", avec une règle "clear" dessus.


 
C est aussi de la bidouille ca
tu rajoutes un element sans aucune utilité semantique et tu voulais probablement parler de <hr>
 
ton probleme buvette c est que tes floats entrainent la sortie du flux de tes elements donc ton conteneur global est vide et ta page prend evidemment le fond noir
http://www.blog-and-blues.org/arti [...] _formatage
comme tu t en apercu tout seul le type de positionnment de tes blocs entraine le contexte de formatage, et donc tes floats reviennent dans le flux normal...Remplissent ton conteneur
 
donc voila tu peux fermer ton div align center qui n est meme pas fermé et sur ce point tpierron a bien raison ton document n a rien d xhtml...la ou il a tort c est que c est pas du html non plus c est juste de la soupe degueulasse
 

Code :
  1. body {
  2.         background-color: #000000;
  3. }
  4. #page {
  5.         margin: 10px auto 0;
  6.         width: 900px;
  7.         line-height: 14px;
  8.         background-color: #FFFFFF;
  9.         font-family: Verdana, Arial, Helvetica, sans-serif;
  10.         font-size: 11px;
  11.         overflow:hidden;
  12.         _overflow:visible;
  13.         zoom:1;
  15. }


 
pas de <hr> inutile  
avec ca tu me fai le plaisir de retirer tous tes clear inutiles et tes positions relatives
si t as besoin de decaler des blocs tu fais ca avec les marges


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 04-12-2007 à 13:25:25    

Bonjour,  
désolé pour le div align center  qui n'était pas fermé et merci pour la "soupe degeulasse": j'avais juste simplifié mon fichier au max et enlevé un peu trop (la grippe a réduit ma vigilance...)... mais il est évident que dans mon fichier original qui était en Php je n'avais pas oublié de refermer ce div et que ce même fichier était un peu plus complexe....  
Quand a mes float je ne peux pas les enlever...
Ceci dit merci de l'info sur les contextes de formatage qui m'ont permis de résoudre mon problème... effectivement en rajoutant l'overflow sur la box "page" ca fonctionne (en adaptant un peu pour que ca s'affiche vraiment correctement...)
Par contre tu me dis d'utiliser les marges plutot que les positions relatives pour décaler mes blocs , en quoi est-ce mieux ?
En tou cas, merci beaucoup pour les infos....
Cordialement...

Reply

Marsh Posté le 04-12-2007 à 22:14:09    

bah désolé pour la soupe degueulasse mais si:
 - la casse alternée
 - les valeurs d attributs sans quote
 - les div vides
et pareil en css avec de gros cop/cols degueux
 
apres je t ai pas dit de retirer tes floats mais tes clear
et les positions sont tres degueux
les marges sont faites pour la mise en page
les positionnements de type relatif/absolu sont plutot a reserver a des cas rares, generalement dus a un probleme de conception de ta page voire à des elements un peu chiants a inserer dans une page genre objet flash


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 05-12-2007 à 02:18:48    

La réponse qu'il faut donner est :  
-Si tu déplace un élément via le position:relative, tu le déplace, mais il conserve la place qu'il a dans le flux.
Genre tu fais un  
.monDiv {position:relative; top:100px}
meme si tu deplace ton DIV de 100px, il garde la place qu'il avait à cet endroit en question.
Alors que un margin ne posera pas de probleme

Reply

Marsh Posté le 06-12-2007 à 03:41:07    

merci pour ces infos qui m'éclairent.. je vais donc de ce pas remplacer toues mes postions relatives par de gentilles marges...  
ceci explique d'ailleurs quelques petits soucis que j'ai eu pour caler certaines box ... elles devaient en fait avoir gardées leur position initiale...
Merci infiniment a vous qui vous êtes penchés sur mon problème!!!!

Reply

Sujets relatifs:

Leave a Replay

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