[Résolu] Album photo génial mais ne fonctionne pas sous Netscape ?????

Question

sperron

1 Jun 2007 à 19:43

Bonjour,

J'ai besoins de votre aide, je viens tout juste de constater que mes albums photos ne fonctionnent sous Netscape (7.1) mais pourtant ils fonctionnnent très bien sous IE et Firefox. voici le CSS:



<style type="text/css">

#holder {
	position:relative; 
	background:transparent url(image.gif) 175px 175px no-repeat; 
	margin-bottom:10px; 
	z-index:1;
	}

#scrollbox {width:580px; height:80px; background:#FFF; overflow:auto; border:1px solid #7EBE1F; margin-left:110px; margin-top:175px;
	scrollbar-DarkShadow-Color: #689D1A;
	scrollbar-Track-Color: #7EBE1F;
	scrollbar-Face-Color:  #7EBE1F;
	scrollbar-Shadow-Color: #689D1A;
	scrollbar-3dLight-Color: #cccccc;
	scrollbar-Highlight-Color: #cccccc;
	scrollbar-Arrow-Color: #ffffff;
	}

a.gallery, a.gallery:visited {
	display:block; 
	color:#000; 
	text-decoration:none; 
	border:1px solid #000; 
	width:75px; 
	height:47px; 
	margin:3px; 
	float:left; 
	font-size:11px;
	}
	
a.slidea {background:url(thumb2.jpg);}
a.slideb {background:url(thumb3.jpg);}
a.slidec {background:url(thumb4.jpg);}
a.slided {background:url(thumb5.jpg);}
a.slidee {background:url(thumb6.jpg);}
a.slidef {background:url(thumb7.jpg);}
a.slideg {background:url(thumb8.jpg);}
a.slideh {background:url(thumb9.jpg);}
a.slidei {background:url(thumb10.jpg);}
a.slidej {background:url(thumb11.jpg);}
a.slidek {background:url(thumb12.jpg);}
a.slidel {background:url(thumb13.jpg);}


a.gallery span {
	display:block; 
	position:absolute; 
	left:150px; 
	top:-1px; 
	width:1px; 
	height:1px; 
	overflow:hidden; 
	background:#FFFCF0; 
	z-index:100; 
	font-size:11px;
	}
	
a.gallery:hover {
	white-space:normal; 
	border:1px solid #7EBE1F;
	}
	
a.gallery:hover img {
	border:1px solid #7EBE1F; 
	z-index:100;
	}
	
a.gallery:active img, a.gallery:focus img {
	border:1px solid #000; 
	z-index:50;
	}

a.gallery:hover span {
	display:block; 
	position:absolute; 
	width:500px; 
	height:380px; 
	top:100px; 
	left:170px; 
	padding:5px; 
	font-style:italic; 
	color:#000; 
	background:#FFFCF0; 
	z-index:100; 
	font-size:11px;
	}
	
* html a.gallery:hover span {left:155px;}

a.gallery:active {border:1px solid #7EBE1F;}

a.gallery:active span, a.gallery:focus span {
	display:block; 
	position:absolute; 
	width:500px; 
	height:380px; 
	top:100px; 
	left:170px; 
	padding:5px; 
	font-style:italic; 
	color:#000; 
	background:#FFFCF0; 
	z-index:50;
	}
	
* html a.gallery:active span {left:155px;}

#thumbs {width:1000px; height:60px;}
#pad {height:320px; width:100px;}

.titre {
	position:absolute;
	width:770px;
	padding:3px;
	margin: 3px;
	border-bottom-color:#7EBE1F;
	border-bottom-style:solid;
	border-bottom-width: 1px;
	border-top-color:#7EBE1F;
	border-top-style:solid;
	border-top-width: 1px;
	background-color:#FFFFFF;
	}
	
.miniature {
	width:770px;
	padding:10px 3px;
	margin: 10px;
	border-bottom-color:#7EBE1F;
	border-bottom-style:solid;
	border-bottom-width: 1px;
	border-top-color:#7EBE1F;
	border-top-style:solid;
	border-top-width: 0px;
	}
	
</style>
<!--[if IE 7]>
<style type="text/css">
a.gallery span {
	display:block; 
	position:absolute; 
	width:500px; 
	height:380px; 
	top:100px; 
	left:-99999px; 
	padding:5px; 
	font-style:italic; 
	color:#000; 
	background:#FFFCF0; 
	z-index:100; 
	font-size:11px;
	}
	
a.gallery span img {border:1px solid #000;}
a.gallery:hover {white-space:normal; border:1px solid #7EBE1F;}
a.gallery:hover img {border:1px solid #000; z-index:100;}
a.gallery:active img, a.gallery:focus img {border:1px solid #7EBE1F; z-index:50;}
a.gallery:hover span {left:170px; z-indx:100;}
a.gallery:hover span img {border:1px solid #7EBE1F;}
a.gallery:active span, a.gallery:focus span {left:170px; z-index:50;}
</style>
<![endif]-->

et le code HTML :


<body bgcolor="#FFFCF0">

<div id="holder">

<div class="titre"><img src="PhotosGallery.jpg" alt="Gallery" width="450" height="80" /></div>

<div id="pad"></div>
<div class="miniature">

  <div id="scrollbox">
  
    <div id="thumbs"> <a class="gallery slidea" href="#nogo" title="Photo 1"><span><img src="Photo1.jpg" alt="Exemple" title="Exemple" /><br />
      Photo 1<br />
      Exemple</span></a> <a class="gallery slideb" href="#nogo" title="photo 2"><span><img src="Photo2.jpg" alt="Exemple" title="Exemple" /><br />
        Photo 2<br />
        Exemple</span></a> <a class="gallery slidec" href="#nogo" title="photo 3"><span><img src="Photo3.jpg" alt="Exemple" title="Exemple" /><br />
          Photo 3<br />
          Exemple</span></a> <a class="gallery slided" href="#nogo" title="photo 4"><span><img src="Photo4.jpg" alt="Exemple" title="Exemple" /><br />
            Photo 4<br />
            Exemple</span></a> <a class="gallery slidee" href="#nogo" title="photo 5"><span><img src="Photo5.jpg" alt="Exemple" title="Exemple" /><br />
              Photo 5<br />
              Exemple</span></a> <a class="gallery slidef" href="#nogo" title="photo 6"><span><img src="Photo6.jpg" alt="Exemple" title="Exemple" /><br />
                Photo 6<br />
                Exemple</span></a> <a class="gallery slideg" href="#nogo" title="photo 7"><span><img src="Photo7.jpg" alt="Exemple" title="Exemple" /><br />
                  Photo 7<br />
                  Exemple</span></a> <a class="gallery slideh" href="#nogo" title="photo 8"><span><img src="Photo8.jpg" alt="Exemple" title="Exemple" /><br />
                    Photo 8<br />
                    Exemple</span></a> <a class="gallery slidei" href="#nogo" title="photo 9"><span><img src="Photo9.jpg" alt="Exemple" title="Exemple" /><br />
                      Photo 9<br />
                      Exemple</span></a> <a class="gallery slidej" href="#nogo" title="photo 10"><span><img src="Photo10.jpg" alt="Exemple" title="Exemple" /><br />
                        Photo 10<br />
                        Exemple</span></a> <a class="gallery slidek" href="#nogo" title="photo 11"><span><img src="Photo11.jpg" alt="Exemple" title="Exemple" /><br />
                          Photo 11<br />
                          Exemple</span></a> <a class="gallery slidel" href="#nogo" title="photo 12"><span><img src="Photo12.jpg" alt="Exemple" title="Exemple" /><br />
                            Photo 12<br />
                            Exemple</span></a> </div>
  </div>
</div>
</div>
</body>
</html>

Je ne suis pas arrivé à trouver à trouver le bobo ...
C'est au niveau du rollover qui ne fonctionne pas, aucune photo agrandie n'apparaît sous Netscape seulement ....

SVP aidez-moi .... Smiley decu

Modifié par sperron (05 Jun 2007 - 21:15)

Felipe

Administrateur

2 Jun 2007 à 00:06

Bonjour,

je doute que la partie HTML commence par "<body>" et sans le Doctype (entre autres) et faute d'avoir les bons noms pour les images présentes dans l'extrait de code source de ta page, c'est nettement plus dur de t'aider.
Aurais-tu une URL où le problème est visible en ligne?

sperron

4 Jun 2007 à 04:10

Oui, voici l'URL d'origine du code css, et là non plus sur Netscape 7.1 ça ne fonctionne pas ...

http://www.cssplay.co.uk/menu/scroll_gallery.html

Je crois que le problème est dû quelque part au scrolling box .... ???

fvsch

4 Jun 2007 à 09:31

Bonjour,

<scrogneugneu>
Je suis le seul à estimer que les démonstrations techniques de CSSplay devraient rester des démonstrations techniques, et rien d'autre ?

Ce genre de galerie dynamique se fera plus efficacement avec Javascript, qui est fait pour ça (tandis que les CSS ne sont pas prévus pour ces effets de dynamisme, d'où des résultats variables d'un navigateur à l'autre et difficiles à garantir avec les évolutions futures des navigateurs).
</scrogneugneu>

Laurent Denis

4 Jun 2007 à 09:35

Florent V. a écrit :

Je suis le seul à estimer que les démonstrations techniques de CSSplay devraient rester des démonstrations techniques, et rien d'autre ?

Bienvenue au club Smiley cligne

sperron

4 Jun 2007 à 14:50

Quelqu'un pourrait-il m'aider à adapter le tout avec du JavaScript ?

Merci !

5 Jun 2007 à 14:56

Je pense que tu devrais t'en sortir en adaptant ce tutoriel.

Avec l'événement onRollOver au lieu de onClick. Mais je ne connais pas plus que ça le javascript. Essaie déjà à partir de ça et si tu bloque, rends toi plutôt sur le salon javascript.

sperron

5 Jun 2007 à 20:59

<nicolas> a écrit :
Je pense que tu devrais t'en sortir en adaptant ce tutoriel.

Avec l'événement onRollOver au lieu de onClick. Mais je ne connais pas plus que ça le javascript. Essaie déjà à partir de ça et si tu bloque, rends toi plutôt sur le salon javascript.

Merci, je crois bien y arriver avec ce script ...

MERCI ! Smiley langue

Sujet clos

CSS et mise en forme, CSS3

[Résolu] Album photo génial mais ne fonctionne pas sous Netscape ?????