Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1999 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Conflit au niveau des CSS ? Image qui ne s'affiche pas

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Conflit au niveau des CSS ? Image qui ne s'affiche pas

n°2193297
ghmpou
Posté le 07-06-2013 à 13:49:09  profilanswer
 

Bonjour tout le monde,
 
je viens vers vous car je fais face à quelques interrogations sans réponses concernant mon site web : www.bubbleburstband.com
 
Je fais s'afficher sur chaque page un header différent (en fait la meme structure mais image de fond qui change).
MAIS il y a une page sur laquelle mon navigateur chrome ne veut pas m'afficher cette image de fond.
C'est la page "pics.php" qui contient du code pour afficher une galerie déroulante d'images...
 
Voici le code de ma page pics. php

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta http-equiv="Content-Language" content="fr" />
  6. <title>BUBBLE BURST Pics</title>
  7. <link rel="stylesheet" href="style.css" type="text/css" media="screen">
  8. <!-- Styles for my specific scrolling content -->
  9. <style type="text/css">
  10.  #makeMeScrollable
  11.  {
  12.   width:100%;
  13.   height: 350px;
  14.   position: relative;
  15.  }
  16.  /* Replace the last selector for the type of element you have in
  17.     your scroller. If you have div's use #makeMeScrollable div.scrollableArea div,
  18.     if you have links use #makeMeScrollable div.scrollableArea a and so on. */
  19.  #makeMeScrollable div.scrollableArea img
  20.  {
  21.   position: relative;
  22.   float: left;
  23.   margin: 0;
  24.   padding: 0;
  25.   /* If you don't want the images in the scroller to be selectable, try the following
  26.      block of code. It's just a nice feature that prevent the images from
  27.      accidentally becoming selected/inverted when the user interacts with the scroller. */
  28.   -webkit-user-select: none;
  29.   -khtml-user-select: none;
  30.   -moz-user-select: none;
  31.   -o-user-select: none;
  32.   user-select: none;
  33.  }
  34. </style>
  35. <!-- the CSS for Smooth Div Scroll -->
  36. <link rel="Stylesheet" type="text/css" href="gal/css/smoothDivScroll.css" />
  37. <!-- LOAD JAVASCRIPT LATE - JUST BEFORE THE BODY TAG
  38.      That way the browser will have loaded the images
  39.   and will know the width of the images. No need to
  40.   specify the width in the CSS or inline. -->
  41. <!-- jQuery library - Please load it from Google API's -->
  42. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
  43. <!-- jQuery UI Widget and Effects Core (custom download)
  44.      You can make your own at: http://jqueryui.com/download -->
  45. <script src="gal/js/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
  46. <!-- Latest version (3.0.6) of jQuery Mouse Wheel by Brandon Aaron
  47.      You will find it here: http://brandonaaron.net/code/mousewheel/demos -->
  48. <script src="gal/js/jquery.mousewheel.min.js" type="text/javascript"></script>
  49. <!-- jQuery Kinectic (1.5) used for touch scrolling -->
  50. <script src="gal/js/jquery.kinetic.js" type="text/javascript"></script>
  51. <!-- Smooth Div Scroll 1.3 minified-->
  52. <script src="gal/js/jquery.smoothdivscroll-1.3-min.js" type="text/javascript"></script>
  53. <!-- If you want to look at the uncompressed version you find it at
  54.      js/jquery.smoothDivScroll-1.3.js -->
  55. <!-- Plugin initialization -->
  56. <script type="text/javascript">
  57.  // Initialize the plugin with no custom options
  58.  $(document).ready(function () {
  59.   // None of the options are set
  60.   $("div#makeMeScrollable" ).smoothDivScroll({
  61.    autoScrollingMode: "onStart"
  62.   });
  63.  });
  64. </script>
  65. </head>
  66. <body>
  67. <div id="fond_pics">
  68. <div id="fb"><a href="http://www.facebook.com/pages/Bubble-Burst/173233139392281" target="_blank" style="display:block;width:100%;height:100%; font-size:.7em; text-height:.8em;">facebook</a></div>
  69. <div id="menu">
  70. <div id="menu0"><a style="display:block;width:100%;height:100%;" href="index.php"><p></p></a></div>
  71. <div id="menu1" class="menu_actif"><a style="display:block;width:100%;height:100%;" href="pics.php"><p>PICS</p></a></div>
  72. <div id="menu2"><a style="display:block;width:100%;height:100%;" href="shop.php"><p>SHOP</p></a></div>
  73. <div id="menu3"><a style="display:block;width:100%;height:100%;" href="contact.php"><p>CONTACT</p></a></div>
  74. </div>
  75. <div id="content">
  76. <div id="makeMeScrollable">
  77.  <img src="_img/gal/arno01.jpg" alt="The borderliner" id="field" />
  78.  <img src="_img/gal/guim01.jpg" alt="The okman" id="gnome" />
  79.  <img src="_img/gal/jerem01.jpg" alt="The neckbreaker" id="pencils" />
  80.  <img src="_img/gal/photo2.jpg" alt="Band" id="pencils" />
  81.  <img src="_img/gal/photo3.jpg" alt="Arno" id="pencils" />
  82.  <img src="_img/gal/photo5.jpg" alt="Guilhem" id="pencils" />
  83.  <img src="_img/gal/photo6.jpg" alt="Jerem" id="pencils" />
  84.  <img src="_img/gal/photo7.jpg" alt="Gui'M Punk" id="pencils" />
  85.  <img src="_img/gal/photo8.jpg" alt="Arno Ve Del Rio" id="pencils" />
  86.  <img src="_img/gal/photo9.jpg" alt="Jeremy Sterio" id="pencils" />
  87. </div>
  88. <div id="footer">
  89. <!--<hr class="footer_hr" />-->
  90. <div id="barre_footer"></div>
  91. <div align="center" style="margin-top:5px;">&copy; BUBBLEBURST 2013</div>
  92. </div>
  93. </div>
  94. </div>
  95. </div>
  96. </body>
  97. </html>


Le code du header dans mon fichier style.css :

Code :
  1. #fond_pics {
  2. position:relative;
  3. width: 1000px;
  4. height: 531px;
  5. margin-left:auto;
  6. margin-right:auto;
  7. background-image: url(_img/headerAD.jpg);
  8. background-repeat: no-repeat;
  9. z-index:15;
  10. text-align: left; /* on r?blit l'alignement normal du texte */
  11. }


Le contenu du fichier smoothDivScroll.css:
 

Code :
  1. /* You can alter this CSS in order to give Smooth Div Scroll your own look'n'feel */
  2. /* Invisible left hotspot */
  3. div.scrollingHotSpotLeft
  4. {
  5. /* The hotspots have a minimum width of 100 pixels and if there is room the will grow
  6.     and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
  7. min-width: 75px;
  8. width: 10%;
  9. height: 100%;
  10. /* There is a big background image and it's used to solve some problems I experienced
  11.     in Internet Explorer 6. */
  12. background-image: url(../images/big_transparent.gif);
  13. background-repeat: repeat;
  14. background-position: center center;
  15. position: absolute;
  16. z-index: 200;
  17. left: 0;
  18. /*  The first url is for Firefox and other browsers, the second is for Internet Explorer */
  19. cursor: url(../images/cursors/cursor_arrow_left.png), url(../images/cursors/cursor_arrow_left.cur),w-resize;
  20. }
  21. /* Visible left hotspot */
  22. div.scrollingHotSpotLeftVisible
  23. {
  24. background-image: url(../images/arrow_left.gif);
  25. background-color: #fff;
  26. background-repeat: no-repeat;
  27. opacity: 0.35; /* Standard CSS3 opacity setting */
  28. -moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
  29. filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */
  30. zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
  31. }
  32. /* Invisible right hotspot */
  33. div.scrollingHotSpotRight
  34. {
  35. min-width: 75px;
  36. width: 10%;
  37. height: 100%;
  38. background-image: url(../images/big_transparent.gif);
  39. background-repeat: repeat;
  40. background-position: center center;
  41. position: absolute;
  42. z-index: 200;
  43. right: 0;
  44. cursor: url(../images/cursors/cursor_arrow_right.png), url(../images/cursors/cursor_arrow_right.cur),e-resize;
  45. }
  46. /* Visible right hotspot */
  47. div.scrollingHotSpotRightVisible
  48. {
  49. background-image: url(../images/arrow_right.gif);
  50. background-color: #fff;
  51. background-repeat: no-repeat;
  52. opacity: 0.35;
  53. filter: alpha(opacity = 35);
  54. -moz-opacity: 0.35;
  55. zoom: 1;
  56. }
  57. /* The scroll wrapper is always the same width and height as the containing element (div).
  58.    Overflow is hidden because you don't want to show all of the scrollable area.
  59. */
  60. div.scrollWrapper
  61. {
  62. position: relative;
  63. overflow: hidden;
  64. width: 100%;
  65. height: 100%;
  66. }
  67. div.scrollableArea
  68. {
  69. position: relative;
  70. width: auto;
  71. height: 100%;
  72. }


 
Est ce que ça peut vous inspirer une solution ?  :)


---------------
www.bubbleburstband.com
mood
Publicité
Posté le 07-06-2013 à 13:49:09  profilanswer
 

n°2193322
rinimi
La vie est une passerelle
Posté le 07-06-2013 à 15:02:57  profilanswer
 

Bonjour,
Déjà tu mets une balise </div> de fermeture, sans ouverture, supprime la non ? :)
Je doute que ce soit ça, mais avant tout, bien coder la page avec <ouverture> et </fermeture>.
 
De plus, une balise <div> doit envelopper certaine chose, et d'autre non. Vérifie ton code.


Message édité par rinimi le 07-06-2013 à 15:10:05
n°2193352
ghmpou
Posté le 07-06-2013 à 20:23:52  profilanswer
 

Bonjour et merci pour cette première réponse.
En effet j'avais laissé trainer une balise de fermeture que j'ai donc supprimé.
 
Par contre je ne comprends pas ce que tu veux dire dans ta derniere phrase.... help ?


---------------
www.bubbleburstband.com
n°2193409
ghmpou
Posté le 08-06-2013 à 21:40:41  profilanswer
 

Un petit up ?


---------------
www.bubbleburstband.com
n°2193423
pyrogoto
Posté le 09-06-2013 à 11:34:09  profilanswer
 

tu devrais essayer sur une copie des autres pages ;
vierge des javascripts supplémentaires pour voir
et les ajouter un par un après.
 
car a part une incompatibilité javascrit, je ne vois pas d'ou sa peut venir.
l'image existe et l'url est correcte,
la  syntaxe dans le css est bonne
 
mais si tu regarde de plus près avec firebug,
la valeur calculée de "background-image" est "none"
sur cette page uniquement


Message édité par pyrogoto le 09-06-2013 à 11:34:40

---------------
Mon feedback
n°2193429
ghmpou
Posté le 09-06-2013 à 13:12:32  profilanswer
 

Je vais tenter ça :)
 
Et plus étonnant je trouve : sous IE l'image s'affiche correctement... arf! Le comble !


---------------
www.bubbleburstband.com

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Conflit au niveau des CSS ? Image qui ne s'affiche pas

 

Sujets relatifs
API AnimateWindows( ) affiche en noir.Modification CSS sur un theme Wordpress
Problème changement d'image lors d'un onclickEffet filter sur une image
[HTML/CSS/Javascript] Lien et script à partir de l'attribut altComment mesurer le niveau de maîtrise d'un developpeur ?
probleme d'incompatibilité CSS entre firefox et chromeprobleme image de fond dreamweaver MX change de taille par rapport a l
Petite aide niveau tablea en HTML/PHP?[HTML ou CSS] Image non bg mais en arrière plan
Plus de sujets relatifs à : Conflit au niveau des CSS ? Image qui ne s'affiche pas


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR