[CSS] a:active ne fonctionne pas toujours ?
Voila j'ai repris une partie d'un CSS d'un site pour faire une gallerie d'images (voila le lien : http://cssplay.co.uk/menu/lightbox3.html)
Le souci que j'ai est le suivant : sous IE parfois le clic sur un lien (qui doit donc agrandir l'image) ne l'agrandit pas (comme si l'évènement activate n'avait pas lieu). Malgré tout lorsque je me déplace en dehors du lien l'image s'agrandit a ce moment la !!! C'est assez bizarre !
Voici mon 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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="styles/baseStyles.css">
<link rel="stylesheet" type="text/css" href="styles/photos.css">
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="styles/photosIE.css">
<![endif]-->
<script type="text/javascript" src="js/prototype/prototype.js"></script>
</head>
<body>
<div class="images">
<!--[if lte IE 6]>
<table><tr><td>
<![endif]-->
<ul>
<li>
<a href="#photo1"><img src="images/degrade2.jpg"/><img id="test" class="bigger pos1" src="images/degrade2.jpg"/></a>
<a href="#photo2"><img src="images/degrade2.jpg"/><img class="bigger pos2" src="images/degrade2.jpg"/></a>
<a href="#photo3"><img src="images/degrade2.jpg"/><img class="bigger pos3" src="images/degrade2.jpg"/></a>
<a href="#photo4"><img src="images/degrade2.jpg"/><img class="bigger pos4" src="images/degrade2.jpg"/></a>
<span class="lineBreak"></span>
<a href="#photo5"><img src="images/degrade2.jpg"/><img class="bigger pos5" src="images/degrade2.jpg"/></a>
<a href="#photo6"><img src="images/degrade2.jpg"/><img class="bigger pos6" src="images/degrade2.jpg"/></a>
<a href="#photo7"><img src="images/degrade2.jpg"/><img class="bigger pos7" src="images/degrade2.jpg"/></a>
<a href="#photo8"><img src="images/degrade2.jpg"/><img class="bigger pos8" src="images/degrade2.jpg"/></a>
<span class="lineBreak"></span>
<a href="#photo9"><img src=""/><img class="bigger pos9" src=""/></a>
<a href="#photo10"><img src=""/><img class="bigger pos10" src=""/></a>
<a href="#photo11"><img src=""/><img class="bigger pos11" src=""/></a>
<a href="#photo12"><img src=""/><img class="bigger pos12" src=""/></a>
<span class="lineBreak"></span>
<a href="#photo13"><img src=""/><img class="bigger pos13" src=""/></a>
<a href="#photo14"><img src=""/><img class="bigger pos14" src=""/></a>
<a href="#photo15"><img src=""/><img class="bigger pos15" src=""/></a>
<a href="#photo16"><img src=""/><img class="bigger pos16" src=""/></a>
<span class="lineBreak"></span>
</li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
<![endif]-->
</div>
</body>
</html> |
Et voila les 3 css :
basesStyles.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
|
@CHARSET "ISO-8859-1";
html,body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
.menu ul,.menu li
{
margin: 0;
padding: 0;
list-style-type: none;
}
.header
{
margin: 0;
padding: 0;
width: 100%;
height: 13%;
float: left;
}
.menu
{
margin: 0;
padding: 0;
width: 18%;
height: 87%;
float: left;
}
.content
{
margin: 0;
padding: 0;
float: left;
width: 82%;
height: 87%;
float: left;
}
.menu a
{
padding-left: 0.5em;
color: #323499;
text-decoration: none;
}
.menu a:hover
{
background-color: #ff0000;
}
.menu a:visited
{
color: #323499;
}
.menuSubLinks
{
padding-left: 0.75em;
}
.largeurEntiere
{
width: 100%;
}
.hauteurEntiere
{
height: 100%;
} |
photos.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
|
@CHARSET "ISO-8859-1";
.images ul
{
padding:0;
margin:0;
list-style-type: none;
border:0;
text-align:left;
display:block;
position:absolute;
top:0px;
left:0;
}
.images ul li
{
width:700px;
height:415px;
color:#000;
position:relative;
padding: 40px 60px;
cursor:pointer;
}
span.lineBreak
{
display:block;
clear:both;
width:0;
height:0;
font-size:0;
line-height:1px;
}
.images ul li a img
{
width:100px;
height:75px;
border:0;
margin:5px;
}
.images ul li a
{
float:left;
width:110px;
height:85px;
background:#eee;
border:1px solid #888;
margin:1px;
}
.images ul li a:hover
{
position:relative;
}
.images ul li a img.bigger
{
visibility:hidden;
position:absolute;
z-index:0;
}
.images li a:hover img
{
width:200px;
height:150px;
position:absolute;
left:-50px;
top:-38px;
border:0;
border:1px solid #888;
padding:5px;
background:#ccc;
}
.images ul li a:active, .images ul li a:focus
{
background:#aaa;
position:relative;
outline:none;
}
.images ul li a:active img.bigger, .images ul li a:focus img.bigger
{
visibility:visible;
background:#ddd;
position:absolute;
width:640px;
height:480px;
z-index:200;
padding:5px;
border:1px solid #888;
cursor:default;
}
.images ul li a:active img.pos1, .images ul li a:focus img.pos1 {top:-46px; left:-65px;}
.images ul li a:active img.pos2, .images ul li a:focus img.pos2 {top:-42px; left:-179px;}
.images ul li a:active img.pos3, .images ul li a:focus img.pos3 {top:-42px; left:-293px;}
.images ul li a:active img.pos4, .images ul li a:focus img.pos4 {top:-42px; left:-407px;}
.images ul li a:active img.pos5, .images ul li a:focus img.pos5 {top:-131px; left:-65px;}
.images ul li a:active img.pos6, .images ul li a:focus img.pos6 {top:-131px; left:-179px;}
.images ul li a:active img.pos7, .images ul li a:focus img.pos7 {top:-131px; left:-293px;}
.images ul li a:active img.pos8, .images ul li a:focus img.pos8 {top:-131px; left:-407px;}
.images ul li a:active img.pos9, .images ul li a:focus img.pos9 {top:-220px; left:-65px;}
.images ul li a:active img.pos10, .images ul li a:focus img.pos10 {top:-220px; left:-179px;}
.images ul li a:active img.pos11, .images ul li a:focus img.pos11 {top:-220px; left:-293px;}
.images ul li a:active img.pos12, .images ul li a:focus img.pos12 {top:-220px; left:-407px;}
.images ul li a:active img.pos13, .images ul li a:focus img.pos13 {top:-309px; left:-65px;}
.images ul li a:active img.pos14, .images ul li a:focus img.pos14 {top:-309px; left:-179px;}
.images ul li a:active img.pos15, .images ul li a:focus img.pos15 {top:-309px; left:-293px;}
.images ul li a:active img.pos16, .images ul li a:focus img.pos16 {top:-309px; left:-407px;} |
photosIE.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
124
125
126
127
|
@CHARSET "ISO-8859-1";
@CHARSET "ISO-8859-1";
.images ul
{
padding:0;
margin:0;
list-style-type: none;
border:0;
text-align:left;
display:block;
position:absolute;
top:0px;
left:0;
}
.images ul li
{
width:780px;
height:500px;
color:#000;
position:relative;
padding: 40px 60px;
cursor:pointer;
}
span.lineBreak
{
display:block;
clear:both;
width:0;
height:0;
font-size:0;
line-height:1px;
}
.images ul li a
{
float:left;
width:112px;
height:87px;
background:#ccc;
border:1px solid #888;
margin:1px;
}
.images ul li a img
{
width:100px;
height:75px;
border:0;
margin:5px;
}
.images ul li a img.bigger
{
visibility:hidden;
position:absolute;
z-index:0;
}
.images ul li a:hover
{
position:relative;
background: #eee;
}
.images li a:hover img
{
width:200px;
height:150px;
position:absolute;
left:-50px;
top:-38px;
border:1px solid #888;
padding:5px;
background:#ccc;
}
.images ul li a:active
{
background:#aaa;
position:relative;
height:0;
width:0;
}
.images ul li a:active img
{
background:#bbb;
height:0;
width:0;
padding:0;
margin:0;
}
.images ul li a:active img.bigger
{
visibility:visible;
background:#ddd;
position:absolute;
width:640px;
height:480px;
padding:5px;
border:1px solid #888;
z-index:500;
cursor:default;
}
.images ul li a:active img.pos1 {top:-42px; left:-65px;}
.images ul li a:active img.pos2 {top:-42px; left:-179px;}
.images ul li a:active img.pos3 {top:-42px; left:-293px;}
.images ul li a:active img.pos4 {top:-42px; left:-407px;}
.images ul li a:active img.pos5 {top:-131px; left:-65px;}
.images ul li a:active img.pos6 {top:-131px; left:-179px;}
.images ul li a:active img.pos7 {top:-131px; left:-293px;}
.images ul li a:active img.pos8 {top:-131px; left:-407px;}
.images ul li a:active img.pos9 {top:-220px; left:-65px;}
.images ul li a:active img.pos10 {top:-220px; left:-179px;}
.images ul li a:active img.pos11 {top:-220px; left:-293px;}
.images ul li a:active img.pos12 {top:-220px; left:-407px;}
.images ul li a:active img.pos13 {top:-309px; left:-65px;}
.images ul li a:active img.pos14 {top:-309px; left:-179px;}
.images ul li a:active img.pos15 {top:-309px; left:-293px;}
.images ul li a:active img.pos16 {top:-309px; left:-407px;} |
