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

Conflit au niveau des CSS ? Image qui ne s'affiche pas - HTML/CSS - Programmation

Marsh Posté le 07-06-2013 à 13:49:09    

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" />
  7. <title>BUBBLE BURST Pics</title>
  8. <link rel="stylesheet" href="style.css" type="text/css" media="screen">
  10. <!-- Styles for my specific scrolling content -->
  11. <style type="text/css">
  13.  #makeMeScrollable
  14.  {
  15.   width:100%;
  16.   height: 350px;
  17.   position: relative;
  18.  }
  20.  /* Replace the last selector for the type of element you have in
  21.     your scroller. If you have div's use #makeMeScrollable div.scrollableArea div,
  22.     if you have links use #makeMeScrollable div.scrollableArea a and so on. */
  23.  #makeMeScrollable div.scrollableArea img
  24.  {
  25.   position: relative;
  26.   float: left;
  27.   margin: 0;
  28.   padding: 0;
  29.   /* If you don't want the images in the scroller to be selectable, try the following
  30.      block of code. It's just a nice feature that prevent the images from
  31.      accidentally becoming selected/inverted when the user interacts with the scroller. */
  32.   -webkit-user-select: none;
  33.   -khtml-user-select: none;
  34.   -moz-user-select: none;
  35.   -o-user-select: none;
  36.   user-select: none;
  37.  }
  38. </style>
  39. <!-- the CSS for Smooth Div Scroll -->
  40. <link rel="Stylesheet" type="text/css" href="gal/css/smoothDivScroll.css" />
  42. <!-- LOAD JAVASCRIPT LATE - JUST BEFORE THE BODY TAG
  43.      That way the browser will have loaded the images
  44.   and will know the width of the images. No need to
  45.   specify the width in the CSS or inline. -->
  47. <!-- jQuery library - Please load it from Google API's -->
  48. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
  50. <!-- jQuery UI Widget and Effects Core (custom download)
  51.      You can make your own at: http://jqueryui.com/download -->
  52. <script src="gal/js/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
  54. <!-- Latest version (3.0.6) of jQuery Mouse Wheel by Brandon Aaron
  55.      You will find it here: http://brandonaaron.net/code/mousewheel/demos -->
  56. <script src="gal/js/jquery.mousewheel.min.js" type="text/javascript"></script>
  58. <!-- jQuery Kinectic (1.5) used for touch scrolling -->
  59. <script src="gal/js/jquery.kinetic.js" type="text/javascript"></script>
  61. <!-- Smooth Div Scroll 1.3 minified-->
  62. <script src="gal/js/jquery.smoothdivscroll-1.3-min.js" type="text/javascript"></script>
  64. <!-- If you want to look at the uncompressed version you find it at
  65.      js/jquery.smoothDivScroll-1.3.js -->
  67. <!-- Plugin initialization -->
  68. <script type="text/javascript">
  69.  // Initialize the plugin with no custom options
  70.  $(document).ready(function () {
  71.   // None of the options are set
  72.   $("div#makeMeScrollable" ).smoothDivScroll({
  73.    autoScrollingMode: "onStart"
  74.   });
  75.  });
  76. </script>
  77. </head>
  79. <body>
  81. <div id="fond_pics">
  82. <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>
  83. <div id="menu">
  85. <div id="menu0"><a style="display:block;width:100%;height:100%;" href="index.php"><p></p></a></div>
  86. <div id="menu1" class="menu_actif"><a style="display:block;width:100%;height:100%;" href="pics.php"><p>PICS</p></a></div>
  87. <div id="menu2"><a style="display:block;width:100%;height:100%;" href="shop.php"><p>SHOP</p></a></div>
  88. <div id="menu3"><a style="display:block;width:100%;height:100%;" href="contact.php"><p>CONTACT</p></a></div>
  90. </div>
  92. <div id="content">
  94. <div id="makeMeScrollable">
  95.  <img src="_img/gal/arno01.jpg" alt="The borderliner" id="field" />
  96.  <img src="_img/gal/guim01.jpg" alt="The okman" id="gnome" />
  97.  <img src="_img/gal/jerem01.jpg" alt="The neckbreaker" id="pencils" />
  98.  <img src="_img/gal/photo2.jpg" alt="Band" id="pencils" />
  99.  <img src="_img/gal/photo3.jpg" alt="Arno" id="pencils" />
  100.  <img src="_img/gal/photo5.jpg" alt="Guilhem" id="pencils" />
  101.  <img src="_img/gal/photo6.jpg" alt="Jerem" id="pencils" />
  102.  <img src="_img/gal/photo7.jpg" alt="Gui'M Punk" id="pencils" />
  103.  <img src="_img/gal/photo8.jpg" alt="Arno Ve Del Rio" id="pencils" />
  104.  <img src="_img/gal/photo9.jpg" alt="Jeremy Sterio" id="pencils" />
  105. </div>
  108. <div id="footer">
  110. <!--<hr class="footer_hr" />-->
  112. <div id="barre_footer"></div>
  113. <div align="center" style="margin-top:5px;">&copy; BUBBLEBURST 2013</div>
  115. </div>
  117. </div>
  119. </div>
  121. </div>
  123. </body>
  125. </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 */
  3. /* Invisible left hotspot */
  4. div.scrollingHotSpotLeft
  5. {
  6. /* The hotspots have a minimum width of 100 pixels and if there is room the will grow
  7.     and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
  8. min-width: 75px;
  9. width: 10%;
  10. height: 100%;
  11. /* There is a big background image and it's used to solve some problems I experienced
  12.     in Internet Explorer 6. */
  13. background-image: url(../images/big_transparent.gif);
  14. background-repeat: repeat;
  15. background-position: center center;
  16. position: absolute;
  17. z-index: 200;
  18. left: 0;
  19. /*  The first url is for Firefox and other browsers, the second is for Internet Explorer */
  20. cursor: url(../images/cursors/cursor_arrow_left.png), url(../images/cursors/cursor_arrow_left.cur),w-resize;
  21. }
  23. /* Visible left hotspot */
  24. div.scrollingHotSpotLeftVisible
  25. {
  26. background-image: url(../images/arrow_left.gif);
  27. background-color: #fff;
  28. background-repeat: no-repeat;
  29. opacity: 0.35; /* Standard CSS3 opacity setting */
  30. -moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
  31. filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */
  32. zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
  33. }
  35. /* Invisible right hotspot */
  36. div.scrollingHotSpotRight
  37. {
  38. min-width: 75px;
  39. width: 10%;
  40. height: 100%;
  41. background-image: url(../images/big_transparent.gif);
  42. background-repeat: repeat;
  43. background-position: center center;
  44. position: absolute;
  45. z-index: 200;
  46. right: 0;
  47. cursor: url(../images/cursors/cursor_arrow_right.png), url(../images/cursors/cursor_arrow_right.cur),e-resize;
  48. }
  50. /* Visible right hotspot */
  51. div.scrollingHotSpotRightVisible
  52. {
  53. background-image: url(../images/arrow_right.gif);
  54. background-color: #fff;
  55. background-repeat: no-repeat;
  56. opacity: 0.35;
  57. filter: alpha(opacity = 35);
  58. -moz-opacity: 0.35;
  59. zoom: 1;
  60. }
  62. /* The scroll wrapper is always the same width and height as the containing element (div).
  63.    Overflow is hidden because you don't want to show all of the scrollable area.
  64. */
  65. div.scrollWrapper
  66. {
  67. position: relative;
  68. overflow: hidden;
  69. width: 100%;
  70. height: 100%;
  71. }
  73. div.scrollableArea
  74. {
  75. position: relative;
  76. width: auto;
  77. height: 100%;
  78. }


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


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

Marsh Posté le 07-06-2013 à 13:49:09   

Reply

Marsh Posté le 07-06-2013 à 15:02:57    

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
Reply

Marsh Posté le 07-06-2013 à 20:23:52    

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
Reply

Marsh Posté le 08-06-2013 à 21:40:41    

Un petit up ?


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

Marsh Posté le 09-06-2013 à 11:34:09    

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
Reply

Marsh Posté le 09-06-2013 à 13:12:32    

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


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

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed