Bonjour, sur mon ordinateur quand je clique sur l'une des deux images les images restes sur la même pages mais là, il est en ligne et quand je clique sur l'une des deux images sa m'ouvre une nouvelle page avec l'image. C'est quoi, le problème ?
Code 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" >
<head>
<body>
<!--Début de la galerie-->
<div id="galerie">
<!--Début de la grande photo-->
<div id="grande">
<div id="legende">
</div>
<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td height="600" width="600" align="center">
<img id="grande_img" src="logo toucan.jpg" title="Prague"/>
</td></tr></table>
</div>
<!--Fin de la grande photo-->
<!--Début des vignettes-->
<div id="vignette">
<div id="gauche"></div>
<div id="vignette_wrapper"><ul>
<li><a href="logo toucan.jpg" title="Oiseau"><img src="logo toucan.jpg" alt="Oiseau"/></a></li>
<li><a href="logo pizza.jpg" title="Oiseau"><img src="logo pizza.jpg" alt="Oiseau"/></a></li>
<div id="droite"></div>
</body></html>
Code CSS:
#galerie{
margin:25px auto 0px;
width:650px;
padding-top:25px;
}
#grande{
width:600px;
height:600px;
margin:0px auto;
text-align:center;
position:relative;
border: 10px solid gray;
}
#vignette{
width:548px;
height:70px;
margin:25px auto 25px;
position:relative;
padding:0px 26px 26px;
}
/* Etape08 : style de la légende */
#legende{
position:absolute;
top:74px;
left:0px;
bottom: 50px;
}
#legende_info{
width:32px;
height:32px;
float:left;
}
#legende_texte{
background-color:black;
height:32px;
line-height:32px;
padding:0px 10px;
color:white;
float:left;
margin-left:10px;
display:none;
}
/*Etape 10 : style des vignettes*/
#vignette_wrapper{
width:548px;
height:82px;
overflow:hidden;
}
#vignette ul{
list-style:none;
width:10000px;
}
#vignette img{
width:150px;
}
#vignette li{
float:left;
border:2px solid #373636;
margin:0px 5px 0px;
width:77px;
height:77px;
overflow:hidden;
}
/*Etape 14 : mise en avant de la vignette cliquée : */
#vignette li.actif{
border-color:white;
}
/*Etape 11 : style de la navigation*/
#gauche{
width:27px;
height:83px;
background:black url('gauche.gif') no-repeat left 14px;
position:absolute;
top:0px;
left:0px;
cursor:pointer;
}
#droite{
width:27px;
height:83px;
background:black url('droite.gif') no-repeat right 14px;
position:absolute;
top:0px;
right:0px;
cursor:pointer;
}
#gauche:hover{
background-position:left -54px;
}
#droite:hover{
background-position:right -54px;
}
.vignette {
margin: auto;
width:150px;
height: auto;
display:inline-block;
}
.vignette img {
width: 40%; /*longueur*/
height:10%; /*largeur*/
text-align:center;
}
#resultat { /*centrer l'image*/
margin: 20px auto;
width:auto;
height: auto;
text-align:center;
}
