Se connecter avec
S'enregistrer | Connectez-vous

Probleme d'affichage sur google chrome

Dernière réponse : dans Programmation

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

Lassé par la pub ? Créez un compte
Expert Programmation

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

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" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
    

  2. <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" 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..
Expert Programmation

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
Expert Programmation

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.
Lassé par la pub ? Créez un compte

Créer un nouveau sujet

Tom's guide dans le monde