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>
Graag in het vervolg bij code, [code] [/code] tags gebruiken.[/modedit]
Gewijzigd op 29/12/2010 14:44:35 door Joren de Wit
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.
hmm het werkt niet..
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.
ja dat bedoel ik dus dat is alleen maar met php of js te bereiken? jammer
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
http://www.ictoriginal.com/docu/ (Paragraven)?
Als je er op klikt laat die op de volgende pagina ook nog zien waarop je geklikt hebt?
Bedoel je dit? Als je er op klikt laat die op de volgende pagina ook nog zien waarop je geklikt hebt?
als je op een link klikt moet de active status hetzelfde blijven als de hover status. zodat het duidelijk blijft op welke pagina je bevind
moet geven, en een pagina contact.html, waarin je de 'contact'-link dat attribuut moet geven.
In de css moet de declaratie WEL blijven bestaan; die zorgt ervoor dat de link eruitziet als 'geselecteerd'.
Je hebt een pagina index.html, waarin je de 'home' link het attribuut In de css moet de declaratie WEL blijven bestaan; die zorgt ervoor dat de link eruitziet als 'geselecteerd'.
ok thx ga het straks proberen