Link selected werkt niet
Ik ben bezig met een website te maken op www.futureindance.com
Zo goed als af alleen 1 probleempje :S.
ik wil als je op een link klikt deze hetzelfde word als er over hoverd.
html en css zijn niet me sterkste kanten dus heb mercy on me :P
hier de css
Code (php)
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
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
#nav ul {
width:920px;
margin:0px;
}
#nav li {
display:inline;
}
#nav li.home a {
float:right;
display:block;
background:url("navbar/images/navbar_02.jpg") no-repeat 0 0%;
width:62px;
height:31px;
}
#nav li.home a:hover {
background:url("navbar/images/navbarover_02.jpg") no-repeat 0 100%;
width:62px;
height:31px;
}
#nav li.home a.selected {
background:url("navbar/images/navbarover_02.jpg") no-repeat 0 100%;
}
#nav li.kaartverkoop a {
float:right;
display:block;
background:url("navbar/images/navbar_03.jpg") no-repeat 0 0%;
width:116px;
height:31px;
}
#nav li.kaartverkoop a:hover {
background:url("navbar/images/navbarover_03.jpg") no-repeat 0 100%;
width:116px;
height:31px;
}
#nav li.kaartverkoop a.selected {
background:url("navbar/images/navbarover_03.jpg") no-repeat 0 100%;
width:116px;
height:31px;
}
#nav li.contact a {
float:right;
display:block;
background:url("navbar/images/navbar_04.jpg") no-repeat 0 0%;
width:79px;
height:31px;
margin: 0px;
}
#nav li.contact a:hover {
background:url("navbar/images/navbarover_04.jpg") no-repeat 0 100%;
width:79px;
height:31px;
}
#nav li.contact a.selected {
background:url("navbar/images/navbarover_04.jpg") no-repeat 0 100%;
}
width:920px;
margin:0px;
}
#nav li {
display:inline;
}
#nav li.home a {
float:right;
display:block;
background:url("navbar/images/navbar_02.jpg") no-repeat 0 0%;
width:62px;
height:31px;
}
#nav li.home a:hover {
background:url("navbar/images/navbarover_02.jpg") no-repeat 0 100%;
width:62px;
height:31px;
}
#nav li.home a.selected {
background:url("navbar/images/navbarover_02.jpg") no-repeat 0 100%;
}
#nav li.kaartverkoop a {
float:right;
display:block;
background:url("navbar/images/navbar_03.jpg") no-repeat 0 0%;
width:116px;
height:31px;
}
#nav li.kaartverkoop a:hover {
background:url("navbar/images/navbarover_03.jpg") no-repeat 0 100%;
width:116px;
height:31px;
}
#nav li.kaartverkoop a.selected {
background:url("navbar/images/navbarover_03.jpg") no-repeat 0 100%;
width:116px;
height:31px;
}
#nav li.contact a {
float:right;
display:block;
background:url("navbar/images/navbar_04.jpg") no-repeat 0 0%;
width:79px;
height:31px;
margin: 0px;
}
#nav li.contact a:hover {
background:url("navbar/images/navbarover_04.jpg") no-repeat 0 100%;
width:79px;
height:31px;
}
#nav li.contact a.selected {
background:url("navbar/images/navbarover_04.jpg") no-repeat 0 100%;
}
en hier de html
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<div id="nav" class="nav">
<ul>
<li class="contact"><a href="contact.html" title="Contact"></a></li>
<li class="kaartverkoop"><a href="http://www.theaterzuidplein.nl/kaartenkopen/158" title="Kaartverkoop"></a></li>
<li class="home"><a href="index.html" title="Home"></a></li>
</ul>
</div>
<ul>
<li class="contact"><a href="contact.html" title="Contact"></a></li>
<li class="kaartverkoop"><a href="http://www.theaterzuidplein.nl/kaartenkopen/158" title="Kaartverkoop"></a></li>
<li class="home"><a href="index.html" title="Home"></a></li>
</ul>
</div>
Modedit:
Graag in het vervolg bij code, [code] [/code] tags gebruiken.
Gewijzigd op 29/12/2010 14:44:35 door Joren de Wit
Gesponsorde koppelingen:
http://www.sceneone.nl/
Probeer eens dit:
bij elke a:hover voeg je ook een a:active toe
bv.
#nav li.contact a:hover {
wordt
#nav li.contact a:hover, #nav li.contact a:active {
Gewijzigd op 29/12/2010 14:42:41 door Kris Peeters
}
#nav li.contact a.selected {
background:url("navbar/images/navbarover_04.jpg") no-repeat 0 100%;
}
spreekt deze link aan:
<a class="selected" href="...">...</a>
Indien je niet zo'n link hebt, mag dat inderdaad weg.
Hoe vlugger de nieuwe pagina geladen is, hoe minder effect het heeft.
Of bedoel je dat de link waarop geklikt is (de actieve pagina) blijvend moet zijn zoals bij hover?
Ja, dan zal je wel wat php (eventueel javascript) nodig hebben.
Of heb je nu echt drie html files die gewoon zo op de server staan?
We komen er wel uit hoor.
Gewijzigd op 29/12/2010 16:06:47 door Kris Peeters
ik heb inderdaad 2 html en 1 style.css files op de server
Gewijzigd op 29/12/2010 16:11:59 door Tiono Wasriya
Als je er op klikt laat die op de volgende pagina ook nog zien waarop je geklikt hebt?
Code (php)
1
class="selected"
In de css moet de declaratie
Code (php)
1
.selected
