Lenkefarge i CSS

Lenkefarge i CSS

Innleggav annelise » tor 04.06.2009 13:05

Jobber i CSS, lager lenker av tekst lagt i div-tagger. Lenkene har i utgpkt raud farge. Ønsker at den aktive sida skal ha orange farge på lenka for å indikere at det er den aktive, medan dei andre er altså er raude. a:hover skal også vere orange.
Svaret er sikkert rett foran nasen min, men eg finn det ikkje ut ... korleis kan eg styre tekstfargen på den aktive sida med CSS? Er det kanskje det a:active er til? Fungerer i så fall ikkje som eg ser ... Forståelig spm?

Brukerens avatar
medlem i 218 måneder
 

Re: Lenkefarge i CSS

Innleggav Mega_Therion » tor 04.06.2009 23:38

a:hover {
color: #e37723;
}

Brukerens avatar
medlem i 234 måneder
 

Re: Lenkefarge i CSS

Innleggav martin » fre 05.06.2009 0:55

Her står nesten alt du trenger å vite om pseudoklasser i CSS: http://www.w3schools.com/CSS/css_pseudo_classes.asp

Administrator
Brukerens avatar
medlem i 249 måneder
 

Re: Lenkefarge i CSS

Innleggav decodex » lør 06.06.2009 3:56

Tror både Mega_Therion og Martin misforstod spørsmålet litt her. Om jeg forstår deg rett, annelise, så ønsker du å vise lenken (i en meny e.l.) for siden man står på med samme farge som når man beveger musepekeren over lenker (a:hover). Dette er dessverre ikke mulig med kun CSS, dvs. man kan ikke be CSS justere utseendet på et element ut i fra adressen for siden man står på. Løsningen man ofte har på dette er at lenken for siden man er på får en egen klasse, som man så kan bruke i CSS.

Gitt at vi er på siden for http://mittdomene.no/minside.html og har laget følgende lenke: <a class="aktiv" href="/minside.html">Min side</a>, så kan vi farge den i CSS med en regel for 'a.aktiv'. Du må altså legge til class="aktiv" på alle lenker som gjelder siden man står på.

a:active, som er en annen pseudo-selektor, er ment for lenker i øyeblikket de blir klikket på (aktivert).

Brukerens avatar
medlem i 217 måneder
 

Re: Lenkefarge i CSS

Innleggav martin » søn 07.06.2009 14:12

Hehe, det kan stemme at vi misforstod spørsmålet ja. Nå er det ene og andre forklart, så jeg håper annelise har fått hjelpen hun trenger :)

Administrator
Brukerens avatar
medlem i 249 måneder
 

Re: Lenkefarge i CSS

Innleggav annelise » søn 07.06.2009 18:33

Toppers, da funker det :)

Brukerens avatar
medlem i 218 måneder
 

Re: Lenkefarge i CSS

Innleggav annelise » tir 09.06.2009 9:37

... eller ... det fungerer ikkje heilt ...

Slik ser html-koden ut:
<div class="meny"><a href="index.html">Hjem</a><a href="mk.html">MK-linjen</a><a href="portef.html" class="aktiv">Porteføljer</a></div>

I css-en har classene følgende verdier:

.meny {
font: 16px Verdana, Arial, Helvetica, sans-serif;
color: #000000;
margin-left: 490px;
width: 400px;
height: 24px;
text-decoration: none;
float: left;
margin-top: 5px;
}

.aktiv {
color: #FF6600;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
}

Problemet er at når eg legg classen aktiv på den aktuelle a-taggen, så blir vel den overstyrt av classen meny ..? Får det i alle fall ikkje til å fungere likevel :-!

Brukerens avatar
medlem i 218 måneder
 

Re: Lenkefarge i CSS

Innleggav tjodolv » tir 09.06.2009 10:28

Det kan tenkes at den blir overstyrt ja, uten at jeg skal si det sikkert. CSS reglene sier også at regelen med høyest spesifisitet gjelder, så om du feks gjør reglene for aktiv-klassen din mer spesifikke i stilsettet så kan det funke, feks slik:
Kode: Merk alt
.meny {
(.. de reglene du hadde satt her ..)
}

.meny a.aktiv { /* <-- her legger vi til .meny og a for å spesifisere at det gjelder lenker som har klassen aktiv, i menyen  */
color: #FF6600;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
}

Funker det da?

Brukerens avatar
medlem i 208 måneder
 

Re: Lenkefarge i CSS

Innleggav taG » tir 09.06.2009 10:30

Css baserer seg jo på ulik vekting av ulike elementtyper. a-elementet (link) har ganske høy vekting. En løsning på problemet ditt vil være å bytte ut ".aktiv" med "a.aktiv". Dette refererer da til lenker av klassen aktiv og vil være tyngre vektet enn element av typen div med klassen meny.

Brukerens avatar
medlem i 249 måneder
 


Returner til CSS



Hvem er i Forumene

Registrerte brukere: Ingen registrerte brukere