HTML / CSS link vraagje
Nu wil ik van een paar 'knoppen' een andere css class laten selecteren.
Maar dit lukt niet echt.
Origineel is het:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<div class="silverheader"><a href="http://www.dynamicdrive.com" class="More">Dynamic Drive</a></div>
<div class="submenu">
<a href="http://www.dynamicdrive.com" class="normaal">Dynamic Drive</a>
<a href="http://www.dynamicdrive.com" >Dynamic Drive</a>
<a href="#" style="background-image:url(images/buttons/buttonSubBelow.png); background-position:top left; height: 4px;"></a>
</div>
<div class="submenu">
<a href="http://www.dynamicdrive.com" class="normaal">Dynamic Drive</a>
<a href="http://www.dynamicdrive.com" >Dynamic Drive</a>
<a href="#" style="background-image:url(images/buttons/buttonSubBelow.png); background-position:top left; height: 4px;"></a>
</div>
Hierbij is de silverheader de hoofdknop, en de a 's in de div met de class submenu de submenu's.
Nu wil ik bijvoorbeeld bij de bovenste een andere klasse gebruiken dus hernoem ik de LINK ( de div kan helaas niet ivm een javascript ) met de naam class="normaal" maar hoe kan ik in hemelsnaam die klasse veranderen?
Bij de onderste knop het ik het zo direct in de HTML geplaatst , dan werkt het wel, maar ik krijg het niet netjes in de CSS... dus hoe moet ik dit vermelden?
Dit is de CSS nu:
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
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
.normaal a
{
font: normal 12px Tahoma, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif;
background: transparent url(images/buttons/buttonSub.png) no-repeat center left;
text-decoration:none;
color: #606a6f;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 1px 0 1px 0;
padding-left: 8px;
text-decoration: none;
}
div.submenu .normaal a:hover
{
color: #0364a7;
background: transparent url(images/buttons/buttonSubActive.png) no-repeat center left;
}
.menu{
margin: 7px 0;
padding: 0;
width: 178px; /*width of menu*/
border: 0px solid #9A9A9A;
}
div.silverheader a
{
background: transparent url(images/buttons/button.png) no-repeat center left;
font: normal 12px Tahoma, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif;
color: white;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 4px 0 4px 0;
padding-left: 8px;
text-decoration: none;
}
div.silverheader a:visited, div.silverheader, silverheaderSub a:active{
color: white;
}
.menu div.selected a, .menu div.silverheader a:hover{
background-image: url(images/buttons/buttonActive.png);
color: white;
}
/* Submenuknop Silverheader */
div.silverheader .More a
{
background: transparent url(images/buttons/buttonMore.png) no-repeat center left;
font: normal 12px Tahoma, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif;
color: white;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 4px 0 4px 0;
padding-left: 8px;
text-decoration: none;
}
.menu div.selected a, .menu div.silverheader .More a:hover{
background-image: url(images/buttons/buttonMoreActive.png);
color: white;
}
/* Einde Submenuknop*/
.menu div.submenu{ /*DIV that contains each sub menu*/
background: white;
}
{
font: normal 12px Tahoma, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif;
background: transparent url(images/buttons/buttonSub.png) no-repeat center left;
text-decoration:none;
color: #606a6f;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 1px 0 1px 0;
padding-left: 8px;
text-decoration: none;
}
div.submenu .normaal a:hover
{
color: #0364a7;
background: transparent url(images/buttons/buttonSubActive.png) no-repeat center left;
}
.menu{
margin: 7px 0;
padding: 0;
width: 178px; /*width of menu*/
border: 0px solid #9A9A9A;
}
div.silverheader a
{
background: transparent url(images/buttons/button.png) no-repeat center left;
font: normal 12px Tahoma, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif;
color: white;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 4px 0 4px 0;
padding-left: 8px;
text-decoration: none;
}
div.silverheader a:visited, div.silverheader, silverheaderSub a:active{
color: white;
}
.menu div.selected a, .menu div.silverheader a:hover{
background-image: url(images/buttons/buttonActive.png);
color: white;
}
/* Submenuknop Silverheader */
div.silverheader .More a
{
background: transparent url(images/buttons/buttonMore.png) no-repeat center left;
font: normal 12px Tahoma, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif;
color: white;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 4px 0 4px 0;
padding-left: 8px;
text-decoration: none;
}
.menu div.selected a, .menu div.silverheader .More a:hover{
background-image: url(images/buttons/buttonMoreActive.png);
color: white;
}
/* Einde Submenuknop*/
.menu div.submenu{ /*DIV that contains each sub menu*/
background: white;
}
Hier heb ik dus in de SubmenuKnop Silverheader al de css opgenomen zoals ik denk dat hij moet zijn, echter werkt dit niet :(...
Gewijzigd op 01/01/1970 01:00:00 door Jelmer
Code (php)
1
<?php en ?>
knop om dit te doen.SanThe.
Dat is geen probleem maar ik kan het zelf niet editen :(
Verder ben ik benieuwd als iemand hier een oplossing voor weet, volgensmij is mijn ide goed, normalite werkt dit nl. wel...
Maar ook heb ik nog een probleem met dit blokje:
<a href="#" style="background-image:url(images/buttons/buttonSubUp.png); background-position:top left; height: 2px; background-repeat: no-repeat;"></a>
Dit gaat nl. wel goed in IE7 en Firefox maar niet in IE 6.0, hoe kan ik dat oplossen?
Het wordt daar nl. een blok van +/- 20 pixels terwijl hij maar 4 pixels hoog mag zijn!
Code (php)
1
<a href="#" style="background: url(images/buttons/buttonSubUp.png) no-repeat top left; height: 2px;"></a>
Daarnaast is de oplossing volgens mij een line-height: 4px; mee te geven als style.
Code (php)
1
.normaal a {} .normaal a:hover
Code (php)
1
a.normaal {} a.normaal:hover {}