---

Jeg bruger et stylesheet til teksten i min html. Men hvordan gør jeg, så
links får en bestemt farve? Jeg har 2 slags links på siden, som skal have
hver deres farve, og skal skifte farve ved mouseover.

Håber på hjælp.

MVH Ole

---

Ole Sørensen skrev:

> Jeg bruger et stylesheet til teksten i min html. Men hvordan gør jeg, så
> links får en bestemt farve? Jeg har 2 slags links på siden, som skal have
> hver deres farve, og skal skifte farve ved mouseover.

Du giver links en klasse hver.

<a href="---" title="---" class="type1">Link af type 1</a>

<a href="---" title="---" class="type2">Link af type 2</a>

Og så skriver du sådan her i dit stylesheet:

..type1{
[Definition af links af type 1]
}

..type2{
[Definition af links af type 2]
}

--
David Trasbo.
Vær en god Usenet-bruger. http://usenet.dk/netikette.

---

David Trasbo skrev:

> Og så skriver du sådan her i dit stylesheet:

Det er vist ikke hjælp nok.

> .type1{
> [Definition af links af type 1]
> }

..type1 {
   color: #f00; // Sætter rød farve - andre tal kan bruges.
   background: inherit;
}

..type1:hover {
   color: #0f0; // Sætter grøn farve.
   background: inherit;
}

Tilsvarende ved type2.

Man kan også vælge at have sine links inden i en div-blok som får
en klasse (f.eks. 'divtype1'). Så skal erklæringen se sådan ud:

..divtype1 a {
   color: #f00; // Sætter rød farve - andre tal kan bruges.
   background: inherit;
}

..divtype1 a:hover {
   color: #0f0; // Sætter grøn farve.
   background: inherit;
}



--
Bertel
http://bertel.lundhansen.dk/      http://fiduso.dk/

---

"Bertel Lund Hansen" <nospamfilius@lundhansen.dk> skrev i en meddelelse
news:4450b118$0$4820$ba624c82@nntp02.dk.telia.net...
> David Trasbo skrev:
>
> > Og så skriver du sådan her i dit stylesheet:
>
> Det er vist ikke hjælp nok.
>
> > .type1{
> > [Definition af links af type 1]
> > }
>
> .type1 {
> color: #f00; // Sætter rød farve - andre tal kan bruges.
> background: inherit;
> }

- hvad gør background: inerit?

ras

---

rasmus carlsen skrev:

>> .type1 {
>> color: #f00; // Sætter rød farve - andre tal kan bruges.
>> background: inherit;
>> }

> - hvad gør background: inerit?

Reelt: Den sikrer kun at man ikke får en advarsel når sidens kode
valideres (tjekkes for korrekthed). Men man kan lige så godt
vænne sig til at bruge den.

Strengt taget så sætter den den samme baggrundsfarve som
elementets ophav har.

Fidusen er at hvis man kun sætter en farve til f.eks. rød, og man
så rammer en bruger der tilfældigvis har sat rød baggrund, så
bliver elementet usynligt. Derfor bør man altid sætte begge
farver samtidig (eller slet ikke).

--
Bertel
http://bertel.lundhansen.dk/      http://fiduso.dk/

---

"Bertel Lund Hansen" <nospamfilius@lundhansen.dk> skrev i en meddelelse
news:4450bb8a$0$16993$ba624c82@nntp02.dk.telia.net...

> Strengt taget så sætter den den samme baggrundsfarve som
> elementets ophav har.
>
> Fidusen er at hvis man kun sætter en farve til f.eks. rød, og man
> så rammer en bruger der tilfældigvis har sat rød baggrund, så
> bliver elementet usynligt. Derfor bør man altid sætte begge
> farver samtidig (eller slet ikke).

- ah ok, mange tak.

ras

---

Bertel Lund Hansen wrote:
> .type1 {
> color: #f00; // Sætter rød farve - andre tal kan bruges.
> background: inherit;
> }
>
> .type1:hover {
> color: #0f0; // Sætter grøn farve.
> background: inherit;
> }


Hej Bertel!
Jeg kan desværre ikke få det til at virke.

I html'en skriver jeg:
<p class="type1"><a href="x.exe">Download hj&aelig;lp-programmet</a></p>

og i stylesheetet skriver jeg:

..type1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FF7702;
text-decoration: underline;
background: inherit;
}
..type1 :hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-decoration: underline;
background: inherit;
}

MVH Ole

---

Ole Sørensen wrote:
> I html'en skriver jeg:
> <p class="type1"><a href="x.exe">Download
> hj&aelig;lp-programmet</a></p>

Det hjalp at ændre det til <p><a href="x.exe" class="type1">Download
hj&aelig;lp-programmet</a></p>

> text-decoration: underline;

Og fjerne denne.

MVH Ole

---

Ole Sørensen skrev:

> Det hjalp at ændre det til <p><a href="x.exe" class="type1">Download
> hj&aelig;lp-programmet</a></p>

Ja, når du styler type1, er linket nødt til at have den klasse
selv.

Den anden måde består i at style links inden for en klasse. Det
er det man gør med ".type1 a {}" og ".type1 a:hover {}".

--
Bertel
http://bertel.lundhansen.dk/      http://fiduso.dk/

---

Bertel Lund Hansen <nospamfilius@lundhansen.dk> writes:


[background:inherit]
> Reelt: Den sikrer kun at man ikke får en advarsel når sidens kode
> valideres (tjekkes for korrekthed). Men man kan lige så godt
> vænne sig til at bruge den.
>
> Strengt taget så sætter den den samme baggrundsfarve som
> elementets ophav har.

Faktisk sætter den samme baggrund som elementets parent. Dette
inkluderer baggrundsbillede, så hvis man har baggrundsbilled
på parent, så kan det komme til at se forkert ud på barnet.

Prøv at se det følgende i Firefox:
----
<div style="background:url(http://www.infimum.dk/private/PicA.png);
padding:20px;width:400px;">
<p style="background:inherit">Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
<div>
----

Jeg ville bruge "background:transparent;" istedet. Det gør at
baggrundens baggrund ses.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

---

Lasse Reichstein Nielsen wrote:

>> Strengt taget så sætter den den samme baggrundsfarve som
>> elementets ophav har.

Det ligger netop i definitionen "inherit" = nedarvet.

> Faktisk sætter den samme baggrund som elementets parent. Dette
> inkluderer baggrundsbillede, så hvis man har baggrundsbilled
> på parent, så kan det komme til at se forkert ud på barnet.

Det har jeg ikke oplevet - heller ikke i FF, jeg bruger det selv i min
topbar på Hjemmesideskolen.

> Jeg ville bruge "background:transparent;" istedet.

Sådan gjorde vi indtil for godt et halvt år siden. Så ændrede W3C
valideringsalgoritmen for css og man fik en Warning, hvis man havde brugt
transparent, hvorimod man består med vajende faner når der er brugt inherit.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk/

---

"Erik Ginnerskov" <erik@donotspammmeplease.invalid> writes:

> Lasse Reichstein Nielsen wrote:

> Det har jeg ikke oplevet - heller ikke i FF, jeg bruger det selv i min
> topbar på Hjemmesideskolen.

Det kunne være held.

Prøv at ændre
<div id="headline">
til
<div id="headline" style="margin:5px;">
og se effekten (i hvert fald i Opera, har ikke lige tjekket i

>> Jeg ville bruge "background:transparent;" istedet.
>
> Sådan gjorde vi indtil for godt et halvt år siden. Så ændrede W3C
> valideringsalgoritmen for css og man fik en Warning, hvis man havde brugt
> transparent, hvorimod man består med vajende faner når der er brugt inherit.

Det er pænt af dem at give en advarsel, men det er altså kun en advarsel,
ikke en fejl. Det betyder bare at man skal være opmærksom på at man ved
hvad man laver. Hvis man ved det, så ignorer dog advarslen. Hellere det
end at ændre i god, smart kode for at gøre en dum validator glad.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

---

Lasse Reichstein Nielsen wrote:

> Prøv at ændre
> <div id="headline">
> til
> <div id="headline" style="margin:5px;">
> og se effekten (i hvert fald i Opera, har ikke lige tjekket i

Jeg er ikke et øjeblik i tvivl om, at der vil gå ged i designet, hvis man
tilføjer noget margin til #headline.

Det skyldes, at indholdet i #headline er en grafik og ikke tekst. Der er
således heller ikke defineret hverken color eller background på #headline.

Det er der derimod på #toptekst, som indeholder min bread crumb. Her ændrer
det ikke noget som helst andet en placeringen af teksten, at jeg tilføjer
margin - hverken i FF eller Opera. Og der er slet ikke nogen problemer med
baggrunden.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk/

---

"Erik Ginnerskov" <erik@donotspammmeplease.invalid> writes:

> Det skyldes, at indholdet i #headline er en grafik og ikke tekst. Der er
> således heller ikke defineret hverken color eller background på #headline.

Ak, jeg havde ikke lige gættet at baggrunds-stregerne var med i tekst-billedet.

> Det er der derimod på #toptekst, som indeholder min bread crumb. Her ændrer
> det ikke noget som helst andet en placeringen af teksten, at jeg tilføjer
> margin - hverken i FF eller Opera. Og der er slet ikke nogen problemer med
> baggrunden.

Hvis du ændrer
<div id="toptekst">
til
<div id="toptekst" style="margin:5px;background:inherit;">
så kan du se effekten i Opera. Det ser ikke ud til at der er
"background:inherit" på #toptekst i forvejen.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

---

Lasse Reichstein Nielsen wrote:

> Hvis du ændrer
> <div id="toptekst">
> til
> <div id="toptekst" style="margin:5px;background:inherit;">
> så kan du se effekten i Opera.

Minsandten ja. Det sker også i FF. Kun IE kan håndtere det 'rigtigt'

> Det ser ikke ud til at der er
> "background:inherit" på #toptekst i forvejen.

Nej, men det har jeg på de links, der er inde i #toptekst. Her påvirkes
background ikke af at jeg sætter margin på #toptekst. Først når jeg også
sætter background på, sker der noget.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk/