Bug IE7: liens "figés" lors du scroll horizontal + autre bu

<EDIT> Suite aux conseils de RoseGrenouille -merci- , j'ai réparé les liens, et viré une bonne partie du code... ça sera un peu plus digeste, j'espère. </EDIT>

Bonjour, aprés avoir beaucoup appris grâce aux tutoriels d'alsacréations et à certains des bouquins recommandés ici, je me suis finalement lancé sur la conception d'un site... qui me pose aujourd'hui quelques soucis.

J'ai d'abord fait une maquette HTML et css http://ultramooz.free.fr/3emaquette/ [/url], qui a été reprise par un programmeur qui l'a rendu dynamique en injectant plein de PHP - et de choses que je comprends pas trés bien encore - dedans. Ce qui donne ça : http://nicolaslangot.openfact.org/ [/url].

Au passage il a modifié un peu le code HTML, ce qui explique certaines différences entre la maquette et le site dynamique.

A part quelques pétouilles graphiques facilement corrigeables, le site fonctionne trés bien sous firefox (normal), mais il y a un bug gênant avec IE7 (prévisible), et un problème avec Safari (curieux).

1er problème avec IE7 (pc sous vista) :

Dans les pages galeries : (exemple : http://ultramooz.free.fr/3emaquette/derisbourg_mode01.html [/url]

Les liens en dessous des photos ne scrollent pas en même temps que le reste du contenu de la div horizontale : les icônes qui habillent les liens restent comme figées en place, et disparaissent lorsqu'on les survolent, sans toutefois reprendre leur place.

Lorsque l'on recharge la page, tout rendre dans l'ordre... jusqu'à ce qu'on scrolle la fenêtre des images.

Le comportement normal du lien est de permettre d'ajouter l'image à une "sélection" de l'utilisateur lors d'un clic, et d'afficher un cartouche explicatif au survol de la souris. (Ce qui marche trés bien dans firefox) Une alerte lors du clic à été rajoutée (contre mon avis) à la demande du client.

J'ai essayé de supprimer l'icône du lien, de la mettre en fond par css, mais rien n'y fait : le lien en texte seul bugge lui aussi. C'est la balise <a> qui pose problème apparemment... Par contre, le lien "retour" qui se trouve tout a droite des images n'est pas affecté. (?)

2ème problème avec Safari :

Dans safari, pas de problème de scroll, mais lorsque l'on clique sur le lien, rien ne se passe : l'image n'est pas ajoutée à la selection de l'utilisateur.

pour essayer: http://nicolaslangot.openfact.org/debeauchene/naturemorte/
voir la sélection (qui reste desespérement vide) : http://nicolaslangot.openfact.org/selection/

J'ai d'abord pensé que c'était un problème de javascript mal compris par Safari, mais le programmeur m'a dit que les souci venait des css.

La concentration des problèmes sur ce lien me laisse penser que j'ai fait une bêtise quelque part, mais je n'arrive pas à la trouver...

Le menu de gauche de la galerie a depuis été refait, et fonctionne différemment que celui de la maquette (+ simple et fonctionnel)

Merci à ceux qui voudront bien jeter un coup d'oeil a mes soucis, et peut -être m'aiguiller vers une solution...

Et merci à l'équipe d'alsacréations pour m'avoir donné le goût de la créations de site... j'apprends tous les jours.

Voici un bout de l'html de la page galerie de la maquette :

<div class="frame">


<div id="container_floats">
<a id="imagedebut" href="#nogo"></a>

<div class="blocphoto">
<img src="images/photos/derisbourg/galerie/mode/01/IMG3.jpg"/><br />
<div id="infosphoto">
	<p id="NumeroPhoto">03</p>
	<a class="addpic" href="#selection"><img src="images/interface/iconeselect.gif" title="s&eacute;lectionner pour la visionneuse" alt="s&eacute;lection" /><span>ajouter cette photo<br />&agrave; votre s&eacute;lection</span></a>
	<p id="PhotoGalleryCaption">Commentaire super long pour voir la taille maximum du texte.</p>
	</div><!--fin de infosphotos-->
</div>

<div class="blocphoto">
<img src="images/photos/derisbourg/galerie/mode/01/IMG4.jpg"/><br />
<div id="infosphoto">
	<p id="NumeroPhoto">04</p>
	<a class="addpic" href="#selection"><img src="images/interface/iconeselect.gif" title="s&eacute;lectionner pour la visionneuse" alt="s&eacute;lection" /><span>ajouter cette photo<br />&agrave; votre s&eacute;lection</span></a>
	<p id="PhotoGalleryCaption">Commentaire super long pour voir la taille maximum du texte.</p>
	</div><!--fin de infosphotos-->
</div>

<!--lien de retour au debut de la galerie -->
<p id="retour"><a href="#imagedebut" title="retourner &agrave; la premi&egrave;re image"><< retour</a></p>

</div><!-- END OF CONTAINER FLOATS --> 

</div> <!-- FIN FRAME -->

Ainsi que les 2 feuilles de style (une pour la structure de base de la page, et l'autre pour le seul bloc qui change d'une page à l'autre) :

extrait de : base_page.css

.frame {
margin-left: 0px;
width: auto;
height: 547px;
background-color: white;
}

p {
	margin:0;
  	border:0;
  	padding:0;
	}

img {
	margin:0;
  	border:0;
  	padding:0;
	}

extrait de container_gallerie.css

.frame {
	margin: 20px 0 0 175px;

	font-family: verdana, arial, sans-serif;
  	font-size: 0.9em;
	height: 547px;
	border-left: 1px solid #CCCCCC;
	overflow: auto;
}

.blocimage {
	float: left;
	border:1px solid white;
	margin: 3em 0 0 1.9em;
	padding: 0;
	text-align: center;
	width: 13em;
	height: 12em;
	}

	
.blocimage img {
	margin: 0;
	padding: 0;
	border: none;
	text-align: center;
	}
	
.blocimage a {
	display: block;
	color: #666666;
	font-size: 0.9em;
	text-decoration: none;
	margin: 0;
	padding: 0;
	border: 1px solid white;
	}

.blocimage a:hover {
	text-decoration: none;
	color: #CD2086;
	border: 1px solid white;
}

/*-------------------BLOCS PHOTOS-------------------*/


#container_floats {
	overflow: hidden;
	margin: 0;
	border:0;

	padding: 0;
	width: 8000px;
	height: 530px;
	}


.blocphoto{
	float: left;
	border-right: 1px solid white;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
	height: 520px;
	font-size: 10px;
	
	}

	
.blocphoto img {
	margin: 0;
	padding: 0;
	border: none;
	
}

.liensphotos {
	position: relative;
	color: #999999;
	font-size: 0.9em;
	top:0.5em;
	padding: 0;
	margin:0 1em 0 1em;
	border: 1px solid white;
	text-align: right;
}

.blocphoto a {
	color: #CC9999;
	text-decoration: none;

	padding: 0;
	margin:0 1em 0 1em;
	border: 0;

}

.blocphoto a:hover {
	text-decoration: none;
	color: #996666;
}
#retour, #imagedebut {
float: left;
}
#retour {
display: block;
height: 500px;
line-height: 500px;
margin-left: 1em;
}

#retour a {
color: #999999;
text-decoration: none;
}
#retour a:hover {
color: #CD2086;
}

#infosphoto {
	float: left;
	margin: 0.3em auto 0 auto;
	padding: 0;
	width: 370px;
	border: 0;
	color: #666666;
}
#infosphoto p {
	margin: 0 0 0 5px;
	padding: 0;
	border: 0;
}
p#NumeroPhoto {
	float: left;
	padding: 0 5px 0 0;
	border-right: 1px dotted #CCCCCC;
	}
#PhotoGalleryCaption {
	float: none;
	}

#infosphoto a {
	position: relative;
	float: left;
	margin: 0 5px 0 5px;
	padding: 0;
	border: none;
	color: #996666; 
}

.addpic span, a.infopic span {
display: none;
}
.addpic:hover {
background: none; /* correction d'un bug IE */
z-index: 600;
}
.addpic:hover span {
display: inline;
position: absolute;
width: 114px;
height: 39px;
top: -57px;
left: -15px;
background: transparent url(../images/interface/fondcadre.png) top left no-repeat;
border: none;
text-align: center;
color: #CD2086;
padding: 6px 0 0 0;

}

.infopic:hover {
background: none; /* correction d'un bug IE */
z-index: 600;
}

.infopic:hover span {
display: inline;
position: absolute;
width: 10em;
height: 2.3em;
top: -45px;
left: -74px;
background: white;
border: 1px solid white;
text-align: center;
color: #CD2086;
padding: 6px;

}


/*-------------------BLOCS PHOTOS-------------------*/


}

Modifié par Tintoy (14 Mar 2007 - 19:11)

Bonjour Tintoy,

Tant mieux si tu es content d'avoir appris plein de choses ici !

2 remarques :

1/ Tes liens ne fonctionnent pas , il reste /url dedans

2/ Je ne suis pas bien sur que de poster 4650 lignes de code ou a peu près va motiver grand monde.....de scroller vers le bas pendant 15 secondes !

Un conseil: traiter les problèmes un par un | Donner l'exemple en ligne | soumettre la section de code qui correspond au problème

Courage .....
Modifié par RoseGrenouille (14 Mar 2007 - 18:54)

Merci pour les changements !

Je n'aurais pas le temps de me mettre la dessus mais je me permets un commentaire au passage....

J'aime beaucoup le design de ce site , je n'ai pas regardé la propreté du code du tout mais le rendu est vraiment chouette ....