Probleme d'affichage avec firefox

Probleme d'affichage avec firefox - HTML/CSS - Programmation

Marsh Posté le 29-08-2006 à 08:16:16    

Bonjour
 
Mon probleme est que dans mon site la couleur du "main" en jaune ne s'affiche pas sous Firefox alors que sous IE aucun probleme. La hauteur du bloc "main" doit augmenter en fonction de la hauteur du bloc "contenu"
 
Le XHTML

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  3.    <head>
  4.        <title>Bienvenue dans le test!</title>
  5.        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.    <link rel="stylesheet" media="screen" type="text/css" title="design" href="design_vierge.css" />
  7.    </head>
  8.    <body>
  9.  <div class="head">
  10.   <div class="bloc1"></div>
  11.   <div class="bloc2"></div>
  12.   <div class="bloc3"></div>
  13.  </div>
  14.  <div class="main">
  15.   <div class="blocmenu">
  16.    <div id="navcontainer">
  17.     <ul id="navlist">
  18.      <li><a href="connecter.html#">Se connecter</a></li>
  19.     </ul>
  20.    </div>
  21.    <div class="mbloc">Présentation</div>
  22.    <div id="navcontainer">
  23.     <ul id="navlist">
  24.      <li><a href="lien#">lien</a></li>
  25.      <li><a href="lien.html#">lien</a></li>
  26.      <li><a href="lien.html#">lien</a></li>
  27.      <li><a href="lien.html#">lien</a></li>
  28.      <li><a href="lien.html#">lien</a></li>
  29.      <li><a href="lien.html#">lien</a></li>
  30.      <li><a href="lien.html#">lien</a></li>
  31.      <li><a href="lien.html#">lien</a></li>
  32.     </ul>
  33.    </div>
  34.    <div class="mbloc">Information</div>
  35.    <div id="navcontainer">
  36.     <ul id="navlist">
  37.      <li><a href="lien.html#">lien</a></li>
  38.      <li><a href="lien.html#">lien</a></li>
  39.      <li><a href="lien.html#">lien</a></li>
  40.      <li><a href="lien.html#">lien</a></li>
  41.     </ul>
  42.    </div>
  43.   </div>
  44.    <div class="contenu"></div>
  45.  </div>
  46.    </body>
  47. </html>


 
Le CSS

Code :
  1. body
  2. {
  3. margin-top: 30px;
  4. background: #333333;
  5. font: bold 12px verdana,helvetica,arial,sans-serif;
  6. }
  7. /*Head : disposition des 3 premiers blocs*/
  8. .head
  9. {
  10. width: 943px;
  11. height: 107px;
  12. margin: auto;
  13. background-color: white;
  14. border-bottom: #808080 1px solid;
  15. }
  16. .bloc1
  17. {
  18. float: left;
  19. width: 210px;
  20. height: 100%;
  21. }
  22. .bloc2
  23. {
  24. float: left;
  25. width: 530px;
  26. height: 100%;
  27. border-left: #808080 1px solid;
  28. border-right: #808080 1px solid;
  29. }
  30. .bloc3
  31. {
  32. float: left;
  33. width: 201px;
  34. height: 100%;
  35. }
  36. /*Head : disposition des 3 premiers blocs*/
  37. /*Main : disposition des 3 blocs centrales*/
  38. .main
  39. {
  40. width: 943px;
  41. height: auto;
  42. margin: auto;
  43. background: yellow;
  44. }
  45. /*Création du menu*/
  46. .blocmenu
  47. {
  48. float: left;
  49. background-color: blue;
  50. }
  51. ul#navlist
  52. {
  53. width: 210px;
  54. margin: 0px;
  55. padding-right: 0px;
  56. padding-left: 0px;
  57. padding-bottom: 0px;
  58. padding-top: 0px;
  59. background: #808080;
  60. border-bottom: #808080 1px solid;
  61. }
  62. ul#navlist li
  63. {
  64. border-top: #808080 1px solid;
  65. border-left-width: 0px;
  66. border-bottom-width: 0px;
  67. margin: 0px;
  68. list-style-type: none;
  69. border-right-width: 0px
  70. }
  71. ul#navlist li a
  72. {
  73. border-top-width: 0px;
  74. border-bottom-width: 0px;
  75. border-left: #aaaabb 20px solid;
  76. border-right-width: 0px;
  77. padding-right: 8px;
  78. padding-left: 8px;
  79. padding-top: 7px;
  80. padding-bottom: 7px;
  81. display: block;
  82. background: #333399;
  83. width: 174px;
  84. text-align: left;
  85. text-decoration: none;
  86. }
  87. ul#navlist li a:link
  88. {
  89. color: #666677;
  90. }
  91. div#navcontainer li a:visited
  92. {
  93. color: #ffffff;
  94. }
  95. ul#navlist li a:hover
  96. {
  97. border-left-color: #ff9000;
  98. background: #000d33;
  99. border-bottom-color: #ff9000;
  100. border-top-color: #ff9000;
  101. border-right-color: #ff9000;
  102. color: #ffffff;
  103. }
  104. .mbloc
  105. {
  106. background-color: #ffffff;
  107. color: #333366;
  108. width: 210px;
  109. text-indent: 15px;
  110. padding-top: 7px;
  111. padding-bottom: 7px;
  112. }
  113. /*Création du menu*/
  114. .contenu
  115. {
  116. float: left;
  117. width: 530px;
  118. text-align: center;
  119. border-left: #808080 1px solid;
  120. border-right: #808080 1px solid;
  121. padding-bottom: 55px;
  122. background: white;
  123. }
  124. /*Main : disposition des 3 blocs centrales*/


 
Vous pouvez aussi corriger se qui n'est pas correct
 
Merci


Message édité par Teddyted le 29-08-2006 à 08:18:11
Reply

Marsh Posté le 29-08-2006 à 08:16:16   

Reply

Marsh Posté le 29-08-2006 à 11:28:30    

c'est simplement parce que ton "main" n'a pas de hauteur.  
Et je vois pas bien pourquoi t'utilises une classe ? d'ailleurs t'en utilises un peu partout... tu me diras, tant que ça marche.

Reply

Marsh Posté le 29-08-2006 à 11:44:06    

Salut,
Justement, je ne lui donne pas de hauteur car je veux que le bloc du "contenu" agrandisse le bloc "main" automatiquement. Comme ca, le fond jaune reste sur les coté droite et gauche.
Exemple : si j'ai 50 lignes de texte dans le contenu, alors le bloc contenu va agrandir automatiquement le "main".
Je sais pas si c'est clair?? Sinon comment faire autrement qu'avec des class pour donner la mise en forme?? Des id???

Reply

Marsh Posté le 29-08-2006 à 12:41:42    

bah en theorie, ton main doit prendre automatiquement la hauteur de son contenu (donc au minimum la taille de ton "blocmenu", même si il le fait pas sous ff et opera... ) là j'ai pas le temps de débugger le truc (désolé) mais jsuis sur qu'il y a une ame charitable qui va pouvoir t'aider. Sinon, en gros, on utilise les "class"  pour des elements qui apparaissent plusieurs fois dans la page (comme ton "navcontainer" ) et des "id" pour les elements uniques (comme ton "main" ), j'ai l'impression que tu fais exactement l'inverse :)
et moi je fuis comme la peste les padding, tous les navigateurs ne les interprete pas de la même façon, mais après, peut-être que c'est moi ne sait pas bien les utiliser :)


Message édité par bis2kt le 29-08-2006 à 12:56:45
Reply

Marsh Posté le 29-08-2006 à 13:52:44    

Tu as bien compris mon probleme sous Internet explorer aucun probleme le main prend la taille du contenu donc comme tu as dis au minimum la taille du menu. Malheureusement Firefox ne le comprend pas.
La question reste : que faut il modifier?? J'attend une ame charitable...:)
 
PS : J'ai modifier les class par des id mais j'ai toujours le meme resultat.

Reply

Marsh Posté le 29-08-2006 à 14:38:54    

tiens, ça me revient comme ça en passant (avec les doigts tout gras plein de KFC...) tu peux utiliser la propriété "min-height" qui fonctionne sous ff et Opera.

Reply

Marsh Posté le 29-08-2006 à 14:40:42    

question un peu classique t as du faire de loooooooongues recherches [:pingouino]
tu mets des flottants dans un div au flux normal c est normal que ca plante
il faut faire flotter ton conteneur

Reply

Marsh Posté le 29-08-2006 à 15:03:51    

Tu pourrais m'expliquer plus en détail car je ne comprend pas, je precise je suis novice.
Pour les recherches, c'est vrai que je n'en ai pas de longues car je suis a l'etranger et je n'ai pas souvent accés a internet.
Merci :)

Reply

Marsh Posté le 29-08-2006 à 15:07:40    

en gros, ajoute un div global en absolute qui positionne toute la page, et ton main passe le en float:left

Reply

Marsh Posté le 29-08-2006 à 15:21:47    

Ok, je vais tester ca, merci pour ton aide

Reply

Marsh Posté le 29-08-2006 à 15:21:47   

Reply

Marsh Posté le 29-08-2006 à 17:52:50    

Merci :), ca marche impecable mais je ne comprend pas pourquoi il faut faire ca pour firefox....

Reply

Sujets relatifs:

Leave a Replay

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