List layout apart aanpassen.
Elks hebben ze een lichtgrijze kader. Wanneer je met je muis over een menuoptie gaat wordt de kader donker grijs.
Ik wil ervoor kunnen zorgen dat ik de kader van Home kan aanpassen van kleur wanneer iemand in Home zit, zodat de kleur bijvoorbeeld automatisch donker grijs is waaraan je kan zien dat je in Home zit.
Dit is mijn html code, deze zit in een div <div id="menubalk"> in de div <div id="header">
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<ul>
<li><a href="home.php">Home</a></li>
<li><a href="profiel.html" >Profiel</a></li>
<li><a href="vrienden.html" >Vrienden</a></li>
<li><a href="leden.html" >Leden</a></li>
<li><a href="gamelijst.html" >Gamelijst</a></li>
</ul>
<li><a href="home.php">Home</a></li>
<li><a href="profiel.html" >Profiel</a></li>
<li><a href="vrienden.html" >Vrienden</a></li>
<li><a href="leden.html" >Leden</a></li>
<li><a href="gamelijst.html" >Gamelijst</a></li>
</ul>
Dit is mijn 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
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
/*List*/
#header ul
{
list-style-type: none;
float:right;
margin: 6px 0 0 0;
padding: 0px;
}
/*List Item*/
#header ul li
{
display: inline;
float: left;
font-size: 12px;
margin: 5px;
position: relative; right: 40px; top: 10px;
}
/*Extra Layout List*/
#header ul li a
{
padding: 10px;
background-color: #C0C0C0;
font-family: Verdana;
color: black;
}
/*Link*/
#header a:link
{
color:#000000;
text-decoration:none;
font-weight: bold;
}
/*Muis over Link*/
#header a:hover
{
color: #FFFFFF;
text-decoration: underline;
background-color:#303030 ;
font-weight: bold;
}
#header ul
{
list-style-type: none;
float:right;
margin: 6px 0 0 0;
padding: 0px;
}
/*List Item*/
#header ul li
{
display: inline;
float: left;
font-size: 12px;
margin: 5px;
position: relative; right: 40px; top: 10px;
}
/*Extra Layout List*/
#header ul li a
{
padding: 10px;
background-color: #C0C0C0;
font-family: Verdana;
color: black;
}
/*Link*/
#header a:link
{
color:#000000;
text-decoration:none;
font-weight: bold;
}
/*Muis over Link*/
#header a:hover
{
color: #FFFFFF;
text-decoration: underline;
background-color:#303030 ;
font-weight: bold;
}
http://css-tricks.com/almanac/selectors/a/active/
Gewijzigd op 24/11/2014 19:43:17 door johan de wit
Johan de wit op 24/11/2014 19:41:45:
Dat gaat dus niet werken, elke keer als je op home klikt dan veranderd url en is de :active weer weg..
Zorg er voor dat er op de huidige pagina een class "active" of dergelijke komt, en dan via css: .active { background: red; }
Aaron Autrique op 25/11/2014 19:00:48:
Het instellen van een active had ik al geprobeerd en deze werkte spijtig genoeg niet. Het gebruik van een class verandert blijkbaar ook niets.
Dat van class werkt wel, wss doen je gewoon wat verkeerd. Wat is je code