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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Conflit au niveau des CSS ? Image qui ne s'affiche pas

ghmpou

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 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="fr" />
<title>BUBBLE BURST Pics</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
<style type="text/css">
#makeMeScrollable
{
width:100%;
height: 350px;
position: relative;
}
/* Replace the last selector for the type of element you have in
your scroller. If you have div's use #makeMeScrollable div.scrollableArea div,
if you have links use #makeMeScrollable div.scrollableArea a and so on. */
#makeMeScrollable div.scrollableArea img
{
position: relative;
float: left;
margin: 0;
padding: 0;
/* If you don't want the images in the scroller to be selectable, try the following
block of code. It's just a nice feature that prevent the images from
accidentally becoming selected/inverted when the user interacts with the scroller. */
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
</style>
<link rel="Stylesheet" type="text/css" href="gal/css/smoothDivScroll.css" />
<!-- LOAD JAVASCRIPT LATE - JUST BEFORE THE BODY TAG
That way the browser will have loaded the images
and will know the width of the images. No need to
specify the width in the CSS or inline. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
<!-- jQuery UI Widget and Effects Core (custom download)
You can make your own at: http://jqueryui.com/download -->
<script src="gal/js/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
<!-- Latest version (3.0.6) of jQuery Mouse Wheel by Brandon Aaron
You will find it here: http://brandonaaron.net/code/mousewheel/demos -->
<script src="gal/js/jquery.mousewheel.min.js" type="text/javascript"></script>
<script src="gal/js/jquery.kinetic.js" type="text/javascript"></script>
<script src="gal/js/jquery.smoothdivscroll-1.3-min.js" type="text/javascript"></script>
<!-- If you want to look at the uncompressed version you find it at
js/jquery.smoothDivScroll-1.3.js -->
<script type="text/javascript">
// Initialize the plugin with no custom options
$(document).ready(function () {
// None of the options are set
$("div#makeMeScrollable" ).smoothDivScroll({
autoScrollingMode: "onStart"
});
});
</script>
</head>
<body>
<div id="fond_pics">
<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>
<div id="menu">
<div id="menu0"><a style="display:block;width:100%;height:100%;" href="index.php"><p></p></a></div>
<div id="menu1" class="menu_actif"><a style="display:block;width:100%;height:100%;" href="pics.php"><p>PICS</p></a></div>
<div id="menu2"><a style="display:block;width:100%;height:100%;" href="shop.php"><p>SHOP</p></a></div>
<div id="menu3"><a style="display:block;width:100%;height:100%;" href="contact.php"><p>CONTACT</p></a></div>
</div>
<div id="content">
<div id="makeMeScrollable">
<img src="_img/gal/arno01.jpg" alt="The borderliner" id="field" />
<img src="_img/gal/guim01.jpg" alt="The okman" id="gnome" />
<img src="_img/gal/jerem01.jpg" alt="The neckbreaker" id="pencils" />
<img src="_img/gal/photo2.jpg" alt="Band" id="pencils" />
<img src="_img/gal/photo3.jpg" alt="Arno" id="pencils" />
<img src="_img/gal/photo5.jpg" alt="Guilhem" id="pencils" />
<img src="_img/gal/photo6.jpg" alt="Jerem" id="pencils" />
<img src="_img/gal/photo7.jpg" alt="Gui'M Punk" id="pencils" />
<img src="_img/gal/photo8.jpg" alt="Arno Ve Del Rio" id="pencils" />
<img src="_img/gal/photo9.jpg" alt="Jeremy Sterio" id="pencils" />
</div>
<div id="footer">
<div id="barre_footer"></div>
<div align="center" style="margin-top:5px;">© BUBBLEBURST 2013</div>
</div>
</div>
</div>
</div>
</body>
</html>

Le code du header dans mon fichier style.css :

Code :

#fond_pics {
position:relative;
width: 1000px;
height: 531px;
margin-left:auto;
margin-right:auto;
background-image: url(_img/headerAD.jpg);
background-repeat: no-repeat;
z-index:15;
text-align: left; /* on r?blit l'alignement normal du texte */
}

Le contenu du fichier smoothDivScroll.css:

Code :

/* You can alter this CSS in order to give Smooth Div Scroll your own look'n'feel */
/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
/* The hotspots have a minimum width of 100 pixels and if there is room the will grow
and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
min-width: 75px;
width: 10%;
height: 100%;
/* There is a big background image and it's used to solve some problems I experienced
in Internet Explorer 6. */
background-image: url(../images/big_transparent.gif);
background-repeat: repeat;
background-position: center center;
position: absolute;
z-index: 200;
left: 0;
/* The first url is for Firefox and other browsers, the second is for Internet Explorer */
cursor: url(../images/cursors/cursor_arrow_left.png), url(../images/cursors/cursor_arrow_left.cur),w-resize;
}
/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
background-image: url(../images/arrow_left.gif);
background-color: #fff;
background-repeat: no-repeat;
opacity: 0.35; /* Standard CSS3 opacity setting */
-moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */
zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}
/* Invisible right hotspot */
div.scrollingHotSpotRight
{
min-width: 75px;
width: 10%;
height: 100%;
background-image: url(../images/big_transparent.gif);
background-repeat: repeat;
background-position: center center;
position: absolute;
z-index: 200;
right: 0;
cursor: url(../images/cursors/cursor_arrow_right.png), url(../images/cursors/cursor_arrow_right.cur),e-resize;
}
/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
background-image: url(../images/arrow_right.gif);
background-color: #fff;
background-repeat: no-repeat;
opacity: 0.35;
filter: alpha(opacity = 35);
-moz-opacity: 0.35;
zoom: 1;
}
/* The scroll wrapper is always the same width and height as the containing element (div).
Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper
{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
div.scrollableArea
{
position: relative;
width: auto;
height: 100%;
}

Est ce que ça peut vous inspirer une solution ?

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

Publicité

rinimi

La vie est une passerelle

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

ghmpou

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

ghmpou

Un petit up ?

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

pyrogoto

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

ghmpou

Je vais tenter ça

Et plus étonnant je trouve : sous IE l'image s'affiche correctement... arf! Le comble !

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

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 onclick	Effet filter sur une image
[HTML/CSS/Javascript] Lien et script à partir de l'attribut alt	Comment mesurer le niveau de maîtrise d'un developpeur ?
probleme d'incompatibilité CSS entre firefox et chrome	probleme 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

Page générée en 0.097 secondes