Votre question

[pb] Pas d'images sous firefox.

Tags :
  • Firefox
  • Programmation
Dernière réponse : dans Programmation
11 Mai 2008 11:58:24

Bonjour à tous, voila, j'ai commencer à faire un site et je me suis rendu compte qu'aucune image n'apparaissait sous firefox, alors que tout s'affiche bien sous IE6.

Voila ce que ça donne sous firefox :



et voila ce que ça donne sous IE6 :




Pour finir, voila le html :

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "<a href="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" rel="nofollow" target="_blank">http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd</a>">
  2. <html xmlns="<a href="http://www.w3.org/1999/xhtml" rel="nofollow" target="_blank">http://www.w3.org/1999/xhtml</a>" xml:lang="fr" >
  3. <head>
  4. <title>Mon super site</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <link rel="stylesheet" media="screen" type="text/css" title="new" href="style.css"/>
  7. </head>
  8.  
  9. <body>
  10.  
  11. <!-- L'en-tête -->
  12.  
  13. <div id="en_tete">
  14.  
  15. </div>
  16.  
  17. <!-- Les menus -->
  18.  
  19. <div id="menu">
  20. <div class="element_menu">
  21. <h3>Documentation</h3>
  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. <h3>Base de lancement</h3>
  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.  
  38. <div class="element_menu">
  39. <h3>Fusées</h3>
  40. <ul>
  41. <li><a href="page7.html">Lien</a></li>
  42. <li><a href="page8.html">Lien</a></li>
  43. <li><a href="page9.html">Lien</a></li>
  44. </ul>
  45. </div>
  46. </div>
  47.  
  48. <!-- Le corps -->
  49.  
  50. <div id="corps">
  51. <h1>Bienvuenue dans mon univers passionnant des fusées à eau</h1>
  52.  
  53. <p>
  54. Et voici, j'ouvre mon premier site entièrement dédié à mes chères petites fusées
  55. </p>
  56.  
  57. <h2>Fusées à eau??</h2>
  58. <p>
  59. Oui, vous savez, les trucs qu'on remplie d'eau, et qu'on pompe avec une machine et que tout d'un coup pfuiiiiiiiitttttt, ça décolle.<br/>
  60. Vous voyez toujours pas???<br/>
  61. Bon bah va falloir traduire alors :<br/>
  62. les bouteilles qu'on remplie d'eau, et qu'on pompe avec une pompe et que tout d'un coup pfuiiiiiiiitttttt, ça décolle.<br/>
  63. Vous voyez mieux là ??<br/>
  64. Allez, faites un effort...<br/>
  65. C'est bon, vous voyez là ??? Ah, vous me rassurez, j'ai cru que j'allais devoir fermé le site parce que personne n'y comprendrait rien ^^
  66. </p>
  67. </div>
  68.  
  69. <!-- Le pied de page -->
  70.  
  71. <div id="pied_de_page">
  72. <p>Copyright© Koj SARL<br/>
  73. Textes et site entièrements réalisés par Benji, all rights reserved</p>
  74. </div>
  75.  
  76. </body>
  77. </html>


et le code CSS :

  1. body
  2. {
  3. width: 760px;
  4. margin: auto;
  5. margin-top: 20px;
  6. margin-bottom:20px;
  7. background-image: url("C:/Documents and Settings/Ben/Bureau/site/site fusées a eau/images/wall06.jpg");
  8. }
  9. #en_tete
  10. {
  11. width: 636px;
  12. height: 112px;
  13. background-image: url("D:/Documents and Settings/Ben/Mes documents/Mes images/logo3.jpg");
  14. background-repeat: no-repeat;
  15. margin-bottom: 10px;
  16. margin-left: 62px;
  17. }
  18. #menu
  19. {
  20. float: left; /* Le menu flottera à gauche */
  21. width: 140px; /* Très important : donner une taille au menu */
  22. }
  23.  
  24. .element_menu
  25. {
  26. background-color: rgb(128,128,128);
  27. background-image: url("D:/Documents and Settings/Ben/Mes documents/Mes images/logo4.jpg");
  28. background-repeat: repeat-x;
  29.  
  30. border: 2px solid black;
  31.  
  32. margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
  33. }
  34. /* Quelques effets sur les menus */
  35.  
  36.  
  37. .element_menu h3 /* Tous les titres de menus */
  38. {
  39. color: #B3B3B3;
  40. font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
  41. text-align: center;
  42. }
  43.  
  44. .element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
  45. {
  46. list-style-image: url("D:/Documents and Settings/Ben/Mes documents/Mes images/puce.png"); /* On change l'apparence des puces */
  47. padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
  48. padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
  49. margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
  50. margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
  51. }
  52.  
  53. .element_menu a /* Tous les liens se trouvant dans un menu */
  54. {
  55. color: #B3B3B3;
  56. }
  57.  
  58. .element_menu a:hover /* Quand on pointe sur un lien du menu */
  59. {
  60. background-color: #B3B3B3;
  61. color: black;
  62. }
  63. /* Le corps de la page */
  64.  
  65. #corps
  66. {
  67. margin-left: 160px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
  68. margin-bottom: 5px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
  69. padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
  70.  
  71. color: #B3B3B3;
  72. background-color: rgb(128,128,128);
  73. background-image: url("D:/Documents and Settings/Ben/Mes documents/Mes images/logo4.jpg");
  74. background-repeat: repeat-x;
  75.  
  76. border: 2px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
  77. }
  78. #corps h1 /* Tous les titres h1 du corps */
  79. {
  80. color: #B3B3B3;
  81. text-align: center;
  82. font-family: "Comic Sans MS", Arial, "Arial Black", "Times New Roman", Times, serif;
  83. }
  84.  
  85. #corps h2 /* Tous les titres h2 du corps */
  86. {
  87. height: 30px;
  88.  
  89. background-image: url("D:/Documents and Settings/Ben/Mes documents/Mes images/logo_fusees3.gif");
  90. background-repeat: no-repeat;
  91. padding-left: 30px;
  92. color: #B3B3B3;
  93. text-align: left;
  94. }
  95. #corps a/* Tous les liens du corps*/
  96. {
  97. color: black
  98. }
  99. #corps a:hover /*Quand on passe sur le lien*/
  100. {
  101. background-color: #B3B3B3;
  102. color: black;
  103. }
  104. /* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */
  105.  
  106. #pied_de_page
  107. {
  108. padding: 5px;
  109.  
  110. text-align: center;
  111.  
  112. color: #B3B3B3;
  113. background-color: #626262;
  114. background-image: url("D:/Documents and Settings/Ben/Mes documents/Mes images/logo4.jpg");
  115. background-repeat: repeat-x;
  116.  
  117. border: 2px solid black;
  118. }

Autres pages sur : images firefox

11 Mai 2008 14:32:11

vire moi ca :

background-image: url("D:/Documents and Settings/Ben/Mes documents/Mes images/logo4.jpg" );

par :

background-image: url("/logo4.jpg" ); qui par exemple, doit etre à la racine de ton site (document_root) et installé au préalable un serveur apache/php/mysql qui te permettra d'avoir un environnement complet pour dev, ex esayphp, wamp etc...)
11 Mai 2008 14:52:27

J'ai tout remplacer par ce que tu m'as dit (ex: url("logo4.jpg"), que j'ai mis dans le même dossier que mon fichier HTML, mais maintenant ça m'affiche le même ecran sans les images sous firefox et IE6 (le même que l'image que j'ai mis plus haut qui représente la vue de firefox).

Mais que veut tu dire par "installé au préalable un serveur apache/php/mysql qui te permettra d'avoir un environnement complet pour dev, ex esayphp, wamp etc...)"
Contenus similaires
11 Mai 2008 16:59:40

tu ne peut pas developper un site en local sans avoir l'environnement adéquat.

télécharge ceci : http://www.wampserver.com/
et installe le.

Ensuite, met tes pages html+images dans le répertoire c:/programes files/wamp/www (trouve le répertoire www), puis rend toi dans ton navigateur à l'adresse http://localhost/ et la, tu aura ton site qui s'affichera bien avec url("/tonimage.jpg") ci le fichier image est dans le répertoire www également.
14 Mai 2008 19:59:43

C'est bon, j'ai trouvé mon erreur,désolé de n'avoir pas répondu plus tôt, mais en fait, l'erreur était au niveau des "C:/Documents...", il faillait remplacé par "../images/truc.jpg", et mon erreur a été de mettre 3points et non 2, c'est une autre personne qui a vu le script qui me l'a fait savoir.

Merci quand même :) 
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