[CSS] a:active ne fonctionne pas toujours ?

**KpTn** · 10/05/2006, 17h05

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;}

**blueice** · 10/05/2006, 17h13

Utilise une couleur de fond pour débugger. Tu verras apparaître les zones actives...

**KpTn** · 10/05/2006, 17h25

En virant un maximum de trucs (l'agrandissement de l'image quand je passe sur le lien ainsi qd l'agrandissement quand je clique sur le lien) je me suis apercu de la chose suivante :

Quand je clique sur un lien le style :activate et parfois pris en compte immédiatement, parfois non (dans ce cas il faut alors que je déplace ma souris en dehors du lien pour que le style soit pris en compte)

C'est quand même assez bizarre !

[CSS] a:active ne fonctionne pas toujours ?

CSS

Discussions similaires

Partager

Partager