Liens d'une galerie

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:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!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:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
#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;
}