Bonsoir,
Je ne sais pas si je vais te rendre vraiment service en t'orientant juste sur ta partie css ...
Ton code html comporte des erreur , puis pour le balisage : plein de div et des liens ...
je ne m'attarderais pas trop la dessus exepté pour ta façon d'intégrer les styles et l'entête.
Ceux-ci doivent etre inserer dans la balise head , soit en lien (<link />) ou en dure (<style>) .
Commence par corriger ceci en ecrivant tes balises style comme cela (dans l'entete):
(J'en profite aussi pour reprendre un peu l'entete de ta page en commençant par reprendre un doctype 1.0 )
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta name="Author" content="Jean-François LEROUX" />
LEs balise meta suivante sont a corrigé : en minuscule avec un chevrons de fermeture (voir ci-dessus)
<META NAME="Description" CONTENT="Jean-François LEROUX, �tudiant � Supinfocom.">
<META NAME="Keywords" CONTENT="Leroux, jean-fran�ois leroux, supinfocom, graphisme, jean-francois leroux, infographie, r�alisation, synth�se, 2D, 3D, maya, max, 3D studio max, r�alisateur, cr�ation, film, court-m�trage, annecy, canalJ, canal J, espoir de l'animation, ">
<META NAME="Copyright" CONTENT="Jean-François LEROUX">
<META NAME="ROBOTS" CONTENT="Index">
la suite ...
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jean-François LEROUX</title>
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
<style type="text/css" media="screen" >
/* les autres styles en dure ici */
</style>
<!--[if lte IE 7 ]>
<style " type="text/css" media="screen">
/* code pour IE */
</style>
<![endif]-->
</head>
</body>
<div class="info">
<!-- la je ne dis plus rien [langue] -->
Maintenant en revenant au css de l'exemple proposé , il est adaptable a ta page sans en modifier le code html .
Il faut reprendre en compte quelques differences avec IE , enlever les float et compenser l'effet de simli tableau impliqué.
Dans le code suivant , les regle pour IE devrait etre repasser dans les CC ,
elles sont a coté des autres pour une appreciation globale du code proposé .
div#scrollbox {
width:840px;
height:60px;
overflow:auto;
white-space:nowrap;/* force tout le monde sur une ligne , IE */
}
div#thumbs {
display:inline;/* pour IE */
display:table-row;
white-space:nowrap;/* piqure de rappel *//* force tout le monde sur une ligne , IE */
}
#thumbs a , #thumbs a.gallery {
display:inline;/* IE ! pas de display block SVP */
zoom:1;/* activation du layout , permet de dimensionné les lien et de contenir les retours de lignes */
display:table-cell;/* les autres */
float:none;/* pas de float !, sinon perte des valeurs display et de white-space */
padding-left:75px;/* redimensionne le lien , qui par effet de style est vide (span en absolue)
et se retracte sur lui même : display:table-cell ,
il faudra passer par les cc pour annuler cette regles dans IE qui n'a pas de raison d'être */
}
Pour IE , je pense que l'on peut proposer ses regles pour les version 7 et 6 (reprise de tes commentaires conditionnel + une modif :ejection du white-space).
<!--[if lte IE7]>
<style type="text/css">
#thumbs a , #thumbs a.gallery {display:inline;zoom:1;padding-left:0px}
a.gallery span {display:block; position:absolute; width:402px; height:280px; top:49px; left:-99999px; padding:5px; font-style:italic; color:#000; background:#fff; z-index:100; font-size:11px;}
a.gallery span img {border:1px solid #000;}
a.gallery:hover {border:1px solid #fff;}
a.gallery:hover img {/* white-space:normal; an e pas conserver */border:1px solid #000; z-index:100;}
a.gallery:active img, a.gallery:focus img {border:1px solid #000; z-index:50;}
a.gallery:hover span {left:170px; z-index:100;}
a.gallery:hover span img {border:1px solid #000;}
a.gallery:active span, a.gallery:focus span {left:170px; z-index:50;}
</style>
<![endif]-->
bon c'est surement mal expliqué et confus et ça fait plus d'une heure que j'essaie de te servir un truc a peu prés correcte et la je fatigue , je repasserais demain .
Grosso-modo , j'ai repris le principe de l'exemple sans modifié ton code html ni ta gestion des hover , en principe cela fonctionne en l'etat.
++
, puis reste le white-space:normal; dans le css pour IE qui perturbe l'affichage .