/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
CSS/HTML4 class/id problem
Fra : Martin


Dato : 18-08-04 23:04

Hej,

Jeg er ved at lave en hjemmeside, hvor jeg gerne vil have to
forskellige udseener på mine links.

I menu'en, som jeg "navigation", skal links'ne have ét
udseende, og alle andre steder et andet udseende.

http://www.herlevkollegiet.dk/~maj/pp/

I CSS filen
http://www.herlevkollegiet.dk/~maj/pp/css-layout.css
har jeg lavet "navigation" til et ID med #, men den overskiver ikke
alle mine tidligere settings for f.eks. <a>

Når man sætter musen over links'ne, så kan man se, at font farven
bliver overskrevet (grå i menuen og sort på resten af siden), men rammen
i menuen bliver f.eks. ikke fjernet påtrods af, at jeg bruger en
ID.

Er der nogen der kan hjælpe mig med, at få to forskellige typer links?

Martin




 
 
Allan Vebel (18-08-2004)
Kommentar
Fra : Allan Vebel


Dato : 18-08-04 23:17

Martin <d_e_l_e_t_e_maj@heko_t_h_i_s.dk> skrev:

> Jeg er ved at lave en hjemmeside, hvor jeg gerne vil have to
> forskellige udseener på mine links.

http://html-faq.dk/2008.asp


--
Allan Vebel
http://html-faq.dk



Martin (19-08-2004)
Kommentar
Fra : Martin


Dato : 19-08-04 00:23

> http://html-faq.dk/2008.asp

Der står, at man skal skrive

a.anderledes:visited{
.....
}

Hvad er forskellen på at skrive det og
..anderledes a:visited{
.....
}

som jeg gør???

Anders Thorsen Holm (19-08-2004)
Kommentar
Fra : Anders Thorsen Holm


Dato : 19-08-04 00:34

Martin <d_e_l_e_t_e_maj@heko_t_h_i_s.dk> wrote:

> a.anderledes:visited{
> ....
> }

Denne regel vil matche besøgte links, der har klassen "anderledes",
f.eks.:

<a href="foo.html" class="anderledes">Foo</a>

> .anderledes a:visited{
> ....
> }

Denne regel matcher besøgte links inde i elementer med klassen
"anderledes", f.eks.:

<ul class="anderledes">
<li><a href="foo">Foo</a></li>
</ul>

eller

<div class="anderledes">bla bla bla <a href="foo.html">foo</a></div>

Og så videre.

--
Anders Thorsen Holm, BSc i datalogi-multimedier.

Jeg søger fuldtidsjob i Århus - gerne studierelevant, men ingen
betingelse. Læs mit CV: http://www.thorsenholm.dk/cv/

Martin (20-08-2004)
Kommentar
Fra : Martin


Dato : 20-08-04 03:33


> Og så videre.

Smart! Tak=)



Knud Gert Ellentoft (18-08-2004)
Kommentar
Fra : Knud Gert Ellentoft


Dato : 18-08-04 23:22

Martin skrev:

>Når man sætter musen over links'ne, så kan man se, at font farven
>bliver overskrevet (grå i menuen og sort på resten af siden), men rammen
>i menuen bliver f.eks. ikke fjernet påtrods af, at jeg bruger en
>ID.

Fordi det går i arv fra dine a-tags, du er nødt til også sætte
background på dine id.

Når du ikke angiver det, så arver dine id det fra a, som du ikke
specifikt skriver anderledes.
--
Knud

Martin (19-08-2004)
Kommentar
Fra : Martin


Dato : 19-08-04 00:19

> Fordi det går i arv fra dine a-tags, du er nødt til også sætte
> background på dine id.
>
> Når du ikke angiver det, så arver dine id det fra a, som du ikke
> specifikt skriver anderledes.

Okay, så lærte jeg det! Jeg har virkelig brugt lang tid på at prøve
at løse det, så hjælpen falder på et tørt sted! =)

Tak skal du have!



Anders Thorsen Holm (18-08-2004)
Kommentar
Fra : Anders Thorsen Holm


Dato : 18-08-04 23:23

Martin <d_e_l_e_t_e_maj@heko_t_h_i_s.dk> wrote:

> http://www.herlevkollegiet.dk/~maj/pp/
> Når man sætter musen over links'ne, så kan man se, at font farven
> bliver overskrevet (grå i menuen og sort på resten af siden), men
> rammen i menuen bliver f.eks. ikke fjernet

I din CSS har du:

#navigation a{
text-decoration: none;
color: #595983;
}

Links i #navigation har ingen understregning og en bestemt farve.

#navigation a:hover{
color: #AA9F9F;
}

Ved hover et link i #navigation ændres farven til en grålig nuance.

a{
text-decoration: none;
border: 1px none #ffffff;
}

Her siger du så, at <a>-elementer generelt ingen understregning skal
have, samt en 1px tyk, hvid kant.

a:link, A:visited{
border: 1px solid #f0f0ff;
background-color: transparent;
color: #666699;
}

Og at links og besøgte links har en anden farvet kant, gennemsigtig
baggrund og en tredie farve.

a:hover{
background-color: #f0f0f8;
color: #333366;
border: 1px solid #d0d0f8;
}

Generel regel for hover over <a>-elementer: ændrer baggrundsfarven,
farven og sætter en violet kant på. Påvirker også hover over <a>-
elementer i #navigation, da disse ikke på forhånd er defineret til at
have nogen border.

For at fjerne/ændre border også ved hover over <a>-elementer i
#navigation, skal du altså også eksplicit definere en sådan
egenskab. Udvid derfor #navigation a:hover, så der i alt kommer til
at stå f.eks.:

#navigation a:hover{
color: #AA9F9F;
border: 1px solid #fff;
}


--
Anders Thorsen Holm, BSc i datalogi-multimedier.

Jeg søger fuldtidsjob i Århus - gerne studierelevant, men ingen
betingelse. Læs mit CV: http://www.thorsenholm.dk/cv/

Martin (19-08-2004)
Kommentar
Fra : Martin


Dato : 19-08-04 00:17

> Generel regel for hover over <a>-elementer: ændrer baggrundsfarven,
> farven og sætter en violet kant på. Påvirker også hover over <a>-
> elementer i #navigation, da disse ikke på forhånd er defineret til at
> have nogen border.

Så er det derfor=) Jeg troede, at en ID reset'ede alle egenskaberne og
så skrev nye.

Der burde være en
clear: all;
eller
reset: all;
i CSS, så egenskaber man ikke brugte blev slettet=)


> For at fjerne/ændre border også ved hover over <a>-elementer i
> #navigation, skal du altså også eksplicit definere en sådan
> egenskab. Udvid derfor #navigation a:hover, så der i alt kommer til
> at stå f.eks.:

Det virker=)

Tusind tak for hjælpen!!


Søg
Reklame
Statistik
Spørgsmål : 177552
Tips : 31968
Nyheder : 719565
Indlæg : 6408849
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste