Tom's Guide > Forum > Programmation > [pb] Pas d'images sous firefox.

[pb] Pas d'images sous firefox.

Forum Programmation : [pb] Pas d'images sous firefox.

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !
Créer un nouveau sujet Répondre
Mot :    Pseudo :           
 
benji2010   11-05-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 :

http://d7.img.v4.skyrock.com/d71/fandefuseeaeau/pics/1749602802_small.jpg

et voila ce que ça donne sous IE6 :

http://d7.img.v4.skyrock.com/d71/fandefuseeaeau/pics/1749603934_small.jpg


Pour finir, voila le html :

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" 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>
  9.   <body>
  11.       <!-- L'en-tête -->
  13.       <div id="en_tete">
  14.          
  15.       </div>
  17.       <!-- Les menus -->
  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>
  48.       <!-- Le corps -->
  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>
  69.       <!-- Le pied de page -->
  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>
  76.   </body>
  77. </html>



et le code CSS :

Code :
  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. }
  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 */
  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. }
  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. }
  53. .element_menu a /* Tous les liens se trouvant dans un menu */
  54. {
  55.   color: #B3B3B3;
  56. }
  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 */
  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. }
  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) */
  106. #pied_de_page
  107. {
  108.   padding: 5px;
  110.   text-align: center;
  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. }


Message édité par benji2010 le 11-05-2008 à 14:54:51
Répondre
Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.
okinou   11-05-2008 à 14:32:11
- 0 +

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...)

Répondre à okinou
benji2010   11-05-2008 à 14:52:27
- 0 +

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...)"

Répondre à benji2010
okinou   11-05-2008 à 16:59:40
- 0 +

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.

Répondre à okinou
benji2010   14-05-2008 à 19:59:43
- 0 +

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 :)

Répondre à benji2010
Créer un nouveau sujet Répondre
Tom's Guide > Forum > Programmation > [pb] Pas d'images sous firefox.
Aller à :

Il y a 2681 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Plan du forum
Forum Bestofmedia ©
2000-2009 Bestofmedia Group
Page générée en 1,238 secondes
Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler
Liens