Se connecter / S'enregistrer
Votre question

Probleme d'affichage sur google chrome

Tags :
  • Arrière plan
  • Programmation
Dernière réponse : dans Programmation
6 Mars 2010 09:45:06

Salut !
Voilà j'ai un petit problème mon site s'affiche correctement sur Firefox et IE mais pas sur Google Chrome. J'observe un décalage d'1 px de mes colonnes factices par rapport aux menu et l'entête.

Aperçu sur firefox:
http://img7.hostingpics.net/pics/131266Sans_titre2.png

Aperçu sur Google Chrome :
http://img7.hostingpics.net/pics/808234Sans_titre.png

Voilà le code css :

  1. body
  2. {
  3. width: 863px;
  4. margin: auto;
  5. margin-top: 0px;
  6. margin-bottom: 0px;
  7. background-color: #000000;
  8. background: #242e2f url(images/factices.png) repeat-y 50%;
  9.  
  10. }
  11.  
  12. /* L'en-tête */
  13.  
  14. #en_tete
  15. {
  16. width: 863px;
  17. height: 334px;
  18. background-image: url("images/header3.png");
  19. background-repeat: no-repeat;
  20. margin-bottom: 0px;
  21. }


Edit OmaR: ajout des balises [code]

Autres pages sur : probleme affichage google chrome

a c 232 L Programmation
6 Mars 2010 15:32:45

Salut,

Il nous faudrait un peu plus de données que ça, ça fait un peu léger 2 bouts de CSS surtout que pour moi ni body ni en_tete ne correspondent (en fonction de leur nom) au problème que tu as.

Edit: le code HTML et CSS, ou un lien vers la page si elle est sur le net
m
0
l
6 Mars 2010 17:47:02

C'est vraiment frustrant !! Par moment ça s'affiche correctement et par moment ce décalage revient alors que j'ai même pas retouché au code :(  ça me l'a déja fais sur firefox aussi j'y comprends rien..

Voilà tout le code css :
  1. body
  2. {
  3. width: 862px;
  4. margin: auto;
  5. margin-top: 0px;
  6. margin-bottom: 0px;
  7. background-color: #000000;
  8. background: #837b51 url(images/factices.png) repeat-y 50%;
  9.  
  10. }
  11.  
  12. /* L'en-tête */
  13.  
  14. #en_tete
  15. {
  16. width: 862px;
  17. height: 334px;
  18. background-image: url("images/header3.png");
  19. background-repeat: no-repeat;
  20. margin-bottom: 0px;
  21. }
  22.  
  23.  
  24. /* Le menu */
  25.  
  26. #menu1
  27. {
  28. float: left;
  29. width: 149px;
  30. }
  31.  
  32. #menu2
  33. {
  34. float: right;
  35. width: 149px;
  36. }
  37.  
  38. .element_menu
  39. {
  40. border: 0px solid black;
  41. padding-bottom: 10px;
  42. }
  43.  
  44.  
  45. /* Quelques effets sur les menus */
  46.  
  47.  
  48.  
  49. .element_menu ul
  50. {
  51. list-style-image: url("images/puce.png");
  52. padding: 0px;
  53. padding-left: 20px;
  54. margin: 0px;
  55. margin-bottom: 0px;
  56. }
  57.  
  58. .element_menu a
  59. {
  60. color: #B3B3B3;
  61. }
  62.  
  63. .element_menu a:hover
  64. {
  65. background-color: #B3B3B3;
  66. color: black;
  67. }
  68.  
  69.  
  70. /* Le corps de la page */
  71.  
  72. #corps
  73. {
  74. margin-left: 149px;
  75. margin-right: 149px;
  76. padding: 5px;
  77. color: #000000;
  78. background-color: #FFFFFF;
  79. border: 0px solid black;
  80. }
  81.  
  82. #corps h1
  83. {
  84. color: #B3B3B3;
  85. text-align: center;
  86. font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
  87. }
  88.  
  89. #corps h2
  90. {
  91. height: 30px;
  92.  
  93. background-image: url("images/titre.png");
  94. background-repeat: no-repeat;
  95.  
  96. padding-left: 30px;
  97. color: #B3B3B3;
  98. text-align: left;
  99. }
  100.  
  101.  
  102. /* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */
  103.  
  104. #pied_de_page
  105. {
  106.  
  107. text-align: center;
  108. width: 862px;
  109. height: 60px;
  110. color: #000000;
  111. background-image: url("images/footer.png");
  112. background-repeat: no-repeat;
  113.  
  114. }


et voilà pour le code html :
  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>La taverne d'Eorzea</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.css" />
  7. </head>
  8.  
  9.  
  10. <body>
  11. <!-- L'en-tête -->
  12.  
  13. <div id="en_tete">
  14.  
  15. </div>
  16.  
  17. <!-- Les menus -->
  18.  
  19. <div id="menu1">
  20. <div class="element_menu">
  21. <img src="images/motif.png" alt="motif du menu" />
  22. <ul>
  23. <li><a href="page1.html">Lien</a></li>
  24. <li><a href="page2.html">Lien</a></li>
  25. <li><a href="page3.html">Lien</a></li>
  26. </ul>
  27. </div>
  28.  
  29. <div class="element_menu">
  30. <center><img src="images/motif.png" alt="motif du menu" /></center>
  31. <ul>
  32. <li><a href="page4.html">Lien</a></li>
  33. <li><a href="page5.html">Lien</a></li>
  34. <li><a href="page6.html">Lien</a></li>
  35. </ul>
  36. </div>
  37. </div>
  38.  
  39. <div id="menu2">
  40. <div class="element_menu">
  41. <img src="images/motif2.png" alt="motif du menu" />
  42. <ul>
  43. <li><a href="page1.html">Lien</a></li>
  44. <li><a href="page2.html">Lien</a></li>
  45. <li><a href="page3.html">Lien</a></li>
  46. </ul>
  47. </div>
  48.  
  49. <div class="element_menu">
  50. <img src="images/motif2.png" alt="motif du menu" />
  51. <ul>
  52. <li><a href="page4.html">Lien</a></li>
  53. <li><a href="page5.html">Lien</a></li>
  54. <li><a href="page6.html">Lien</a></li>
  55. </ul>
  56. </div>
  57. </div>
  58.  
  59.  
  60. <!-- Le corps -->
  61.  
  62. <div id="corps">
  63. <h1>Mon super site</h1>
  64.  
  65.  
  66. </div>
  67.  
  68.  
  69. <!-- Le pied de page -->
  70.  
  71. <div id="pied_de_page">
  72.  
  73. </div>
  74.  
  75. </body>
  76. </html>



Edit : En fait même sur firefox ce décalage apparaît maintenant..
m
0
l
Contenus similaires
a c 232 L Programmation
6 Mars 2010 18:28:16

Tu utilises des images pour faire juste un fond de couleur ?

Plutôt que de s'encombrer avec des images qui prennent de la place et du temps de téléchargement pour rien, fais des styles css avec background-color

Ca devrait régler ton soucis aussi au passage
m
0
l
a c 232 L Programmation
6 Mars 2010 22:48:07

Il y a plusieurs techniques pour faire ça.
Une possibilité serait de mettre une div qui contiendrait ton menu1, menu2 et ton corps. Et à cette div, tu lui mets ton fond d'écran des menus, comme ça, tu auras le fond d'écran jusqu'en bas.
m
0
l
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS