Salut à tous,
Je suis en train de construire une galerie de photos. J'ai pour cela une série de vignettes qui servent de liens vers la photo qui sera affichée lors du clic sur la vignette correspondante.
Mon problème : sous firefox tout marche convenablement. Sous Internet Explorer 6, par contre, les vignettes s'affichent normalement mais la photo cible apparait minuscule minuscule. Si ensuite je clique sur la flèche gauche du navigateur ie6 pour revenir à l'écran précédent, la photo précédente s'affiche normalement; le clic sur la flèche droite, écran suivant, affiche la suivante normalement la photo suivante.
Je sais que ie6 n'interprète pas les dimensions des cadres convenablement mais je ne sais pas où se situe le problème.
Pour une démo: http://users.edpnet.be/ipapag/philippe/etr17_02
Je vous soumets également le code suivant
Le code html des vignettes: index.html
le code d'une image cible: img-2.html (il y en a 63 en tout)
le CSS:grandteststyle.css
Merci pour votre aide
Modifié par glyphada (16 Mar 2008 - 23:14)
Je suis en train de construire une galerie de photos. J'ai pour cela une série de vignettes qui servent de liens vers la photo qui sera affichée lors du clic sur la vignette correspondante.
Mon problème : sous firefox tout marche convenablement. Sous Internet Explorer 6, par contre, les vignettes s'affichent normalement mais la photo cible apparait minuscule minuscule. Si ensuite je clique sur la flèche gauche du navigateur ie6 pour revenir à l'écran précédent, la photo précédente s'affiche normalement; le clic sur la flèche droite, écran suivant, affiche la suivante normalement la photo suivante.
Je sais que ie6 n'interprète pas les dimensions des cadres convenablement mais je ne sais pas où se situe le problème.
Pour une démo: http://users.edpnet.be/ipapag/philippe/etr17_02
Je vous soumets également le code suivant
Le code html des vignettes: index.html
<!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-BE">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ART_17</title>
<link type="text/css" rel="stylesheet" href="style/grandteststyle.css" />
</head>
<body>
<div class="navi">
Page :
<a class="navipage-current" href="index.html">1</a>
<a class="navipage" href="index1.html">2</a>
<a class="navipage" href="index2.html">3</a>
<a class="navipage" href="index3.html">4</a>
</div>
<div class="container1">
<br/><br/>
<div class="thumbs">
<a href="img-1.html"><img src="thumbs/accueil.jpg" alt="#" /></a><a href="img-2.html"><img src="thumbs/img-2.jpg" alt="#" /></a><a href="img-3.html"><img src="thumbs/img-3.jpg" alt="#" /></a><a href="img-4.html"><img src="thumbs/img-4.jpg" alt="#" /></a><a href="img-5.html"><img src="thumbs/img-5.jpg" alt="#" /></a><a href="img-6.html"><img src="thumbs/img-6.jpg" alt="#" /></a><a href="img-7.html"><img src="thumbs/img-7.jpg" alt="#" /></a><a href="img-8.html"><img src="thumbs/img-8.jpg" alt="#" /></a><a href="img-9.html"><img src="thumbs/img-9.jpg" alt="#" /></a><a href="img-10.html"><img src="thumbs/img-10.jpg" alt="#" /></a><a href="img-11.html"><img src="thumbs/img-11.jpg" alt="#" /></a><a href="img-12.html"><img src="thumbs/img-12.jpg" alt="#" /></a><a href="img-13.html"><img src="thumbs/img-13.jpg" alt="#" /></a><a href="img-14.html"><img src="thumbs/img-14.jpg" alt="#" /></a><a href="img-15.html"><img src="thumbs/img-15.jpg" alt="#" /></a><a href="img-16.html"><img src="thumbs/img-16.jpg" alt="#" /></a>
</div>
</div><!--fin de container1-->
</body>
</html>
le code d'une image cible: img-2.html (il y en a 63 en tout)
<!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-BE">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ART_17</title>
<link type="text/css" rel="stylesheet" href="style/grandteststyle.css" />
</head>
<body>
<div class="navi">
<a id="prev" href="img-1.html">Préc</a>
<a id="index" href="index.html">Index</a>
<a id="next" href="img-3.html">Suivant</a>
</div>
<div class="photo">
<img src="hq/img-2.jpg" alt="img-2"></img>
</div>
</body>
</html>
le CSS:grandteststyle.css
body
{
width: 95%;
margin: auto;
font-family: luxi sans, trebuchet ms, sans-serif;
/* background-color: #CCC;//#FFC;//#CC9;//#6CF;*/
background: url("petitfondEcran.jpg") repeat center;
}
.navi /*pavé pour le choix des index 1,2,3,4 et le passage à la photo préc, index, suivante*/
{
margin-top: 20px;
width: 300px;
margin-left: auto;
margin-right: auto;
text-align: center;
/*-moz-border-radius: 3px;
border: 1px solid #444;*/
}
a { /*Tous les liens : photos et pavés de navigation*/
text-decoration: none;
color: #d49200;
}
div.navi a#index:hover, div.navi a#prev:hover, div.navi a#next:hover
{/*survol des prec, index, suivante*/
text-decoration: none;
background-color: #c49200;
color: #333;
}
div.navi a#index, div.navi a#prev, div.navi a#next
{
margin: 20px;
}
/*
div.navi a#index:visited, div.navi a#prev:visited, div.navi a#next:visited
{
background-color: black;
color:white;
}
*/
.photo
{ margin-top: 30px;/*Distance entre le pavé de navigation et le bord sup de la photo*/
width: 98%;
height: 50%;
margin-left: auto;
margin-right: auto;
/*border: 1px solid #444;*//*encadrement de l'aire disponible*/
/*background-color: #3c3c3c;*//*Couleur de l'aire disponible*/
}
div.photo {text-align: center;}/*Centrage de la photo du conteneur div */
div.photo img
{/*
//text-align: center;
//padding: 16px;
//border: 1px solid #555;
//-moz-border-radius: 7px;
//color: black;
//background-image: url("fondEcran.jpg");*/
/*background-color: #FC6;//#333;*//*Couleur du cadre de la photo*/
/*/margin: 20px;*/
border: none;/*supprimer le cadre des images avec lien*/
width:auto; /*650px;*/
height: auto;/*700px;*/
}
div.navi a.navipage-current {/*Couleur de l'index courant*/
background-color: #666;
color: white;
}
div.navi a.navipage-current:hover, div.navi a.navipage:hover
{
text-decoration: none;
background-color: #c49200;
color: #333;
}
div.navi a.navipage-current, div.navi a.navipage
{
/*border: 1px solid red;*/
width: 50px;
height: 17px;
margin: 10px;
/*background-color: red;*/
}
div.thumbs {
clear: both;
padding: 6px;
text-align: center;
}
div.thumbs a {
margin: 6px;
display: block;
float: left;
width: 140px;
height: 140px;
border: 1px solid #727272;
background-color: #282828;
-moz-border-radius: 5px;
}
div.thumbs img {
padding: 0px;
margin: 10px 3px;
border: 0px;
}
div.thumbs a:hover {
background-color: #222;
border: 2px solid yellow;//#c49200;
margin: 5px;
}
div.container1 {
width: 630px;
margin: auto;
}
p.droite {
text-align: right;
}
Merci pour votre aide
Modifié par glyphada (16 Mar 2008 - 23:14)