[CSS] Aanpassen linkstijl met A:

[MiKeZZa]

Ik heb een css stijl bij een systeem dat ik gebruik (PHP Nuke) dat gemaakt is door de ontwerper van de stijl.

Helaas zit hier dit stukje code in:

code:

A:link          {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 10px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
A:active        {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 10px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
A:visited       {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 10px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
A:hover         {BACKGROUND: none; COLOR: #dd6900; FONT-SIZE: 10px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: underline}

Maar nu wil ik voor sommige andere links een andere stijl gebruiken. Maar het bovenstaande stuk code geeft direct alle links dezelfde stijl. Dit wil ik dus niet..... Maar ik denk dat als ik dat stuk weghaal dat ik alle links overal een stijl moet gaan meegeven dus wat kan ik nu het beste doen?

[Reinier]

Geef de linkjes die je anders wilt hebben een bepaalde klasse en zet die class in je stylesheet. Hier staat hoe: http://www.w3schools.com/css/css_syntax.asp (class selectors)

[MiKeZZa]

Dat snap ik wel maar ik had ook nog een andere regel geschreven, namelijk deze:

code:

.content2   {BACKGROUND: none; COLOR: #FFFFFF; FONT-SIZE: 10px; FONT-FAMILY: Verdana, Helvetica}

Maar als ik die dan op de juiste manier aanroep bij de link (hetgene waar jij me naartoe linkt maar dat snapte ik al) krijg hij toch de stijl die omschreven staat bij mijn eerder genoemde code.

[Rowanov]

Dat komt omdat alle links in je history staan en daarom standaard de stijl van "visited krijgen". Als je andere stijlen voor een bepaald type link wil toekennen, kan je het volgende gebruiken:

Cascading Stylesheet:

a.class:link { // etc }
a.class:hover { // etc }
a.class:active { // etc }
a.class:visited { // etc }

Waarbij je hier wel een zinvolle class-naam moet gebruiken en niet mijn voorbeeld 1 op 1 overnemen

[MiKeZZa]

Rowanov schreef op maandag 05 februari 2007 @ 21:48:
Dat komt omdat alle links in je history staan en daarom standaard de stijl van "visited krijgen". Als je andere stijlen voor een bepaald type link wil toekennen, kan je het volgende gebruiken:

Cascading Stylesheet:

a.class:link { // etc }
a.class:hover { // etc }
a.class:active { // etc }
a.class:visited { // etc }

Waarbij je hier wel een zinvolle class-naam moet gebruiken en niet mijn voorbeeld 1 op 1 overnemen

Ah ok en dan pakt de link die stijl over áls hij dezelfde naam ziet in de css en anders pakt hij het spul bij A: . Dat is wat ik wilde! Bedankt!

[Not Pingu]

Houd ook de precedentie van events in de gaten:

1) link
2) visited
3) hover
4) active
(ezelsbruggetje: LoVe HAte)

Dwz. dat de active style de hover style overruled, the hover style de visited style, etc.

[MiKeZZa]

Ik heb nu dit staan:

a.wittelink:link {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 10px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
a.wittelink:active {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 10px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
a.wittelink:visited {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 10px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
a.wittelink:hover {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 10px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: underline}


En bij de link staat dit:

<a style=\"wittelink\" href=\...........


Maar het werkt niet.... Wat doe ik nu nog fout?

[Savantas]

Daar zou ik <a class=\'wittelink\' href=.... van maken...

Of om lelijke bloated code te krijgen: overal <a style=\'color:white\' href=....., maar dan is ie ten alle tijden wit, ook bij hover

Afhankelijk van je layout kan je ook kijken of al deze linkjes binnen een ander element (div bv) vallen. Dan is het mooier om dit element een class (en bij eenmalig gebruik een id!) te geven en vervolgens je css zo te maken:

Cascading Stylesheet:

.menu a { ... }
.menu a:hover { ... }, enz
of in geval van id
#uniekmenu a { ... }
#uniekmenu a:hover { ... }, enz

[ Voor 120% gewijzigd door Savantas op 06-02-2007 17:23 ]

[MiKeZZa]

Savantas schreef op dinsdag 06 februari 2007 @ 17:16:
Daar zou ik <a class=\'wittelink\' href=.... van maken...

Of om lelijke bloated code te krijgen: overal <a style=\'color:white\' href=....., maar dan is ie ten alle tijden wit, ook bij hover

Afhankelijk van je layout kan je ook kijken of al deze linkjes binnen een ander element (div bv) vallen. Dan is het mooier om dit element een class (en bij eenmalig gebruik een id!) te geven en vervolgens je css zo te maken:

Cascading Stylesheet:

.menu a { ... }
.menu a:hover { ... }, enz
of in geval van id
#uniekmenu a { ... }
#uniekmenu a:hover { ... }, enz

Ah ok dit werkt idd stukken beter! Thx voor de tips!

[BtM909]

En nu eens tijd voor zelf-inzet. Gewoon zelf even proberen, gebeurt niks met je hoor