Avatar billede pnr Nybegynder
01. maj 2006 - 21:00 Der er 6 kommentarer og
1 løsning

Den rigtige måde at style links

Jeg har følgende kode hvor med jeg styler mine links:

.genveje
{
    padding-right:20px;
    padding-left: 11px; 
    background-image:url(../images/genvej.gif);
    background-repeat:no-repeat;
    text-decoration:none;
    font-size:10px;
    color:#000000; 
}

.genveje a,
.genveje a:link,
.genveje a:visited,
.genveje a:activ
{
    padding-right:20px;
    padding-left: 11px; 
    background-image:url(../images/genvej.gif);
    background-repeat:no-repeat;
    text-decoration:none;
    font-size:10px;
    color:#000000; 
}

.genveje a:hover
{
    text-decoration:underline;
    background-image:url(../images/genvej_hover.gif);
    background-repeat:no-repeat;

}

Men er det den korekte måde at gøre det på?
Avatar billede roenving Novice
02. maj 2006 - 01:18 #1
Ikke helt, for :active findes kun, når der også er hover, hvilket betyder at :active-definitionen aldrig vil benyttes ...

-- men det ser også mærkeligt ud, at du har en klasse-definition, som indeholder det samme som dine links-definitioner inde i klassen ...

-- ovenstående ville måske kunne give mening, hvis det blev brugt sådan:

<span class="genveje"><a href="#">link</a></span>

-- mens mit gæt er, at du egentlig har tænkt det sådan:

<a class="genveje" href="#">link</a>

-- og det effektiveste ser sådan ud:

<div class="genveje">
  <a href="#">link1</a><br>
  <a href="#">link2</a><br>
  <a href="#">link3</a><br>
</div>

-- med følgende css:

.genveje a,
.genveje a:link,
.genveje a:visited{
    padding-right:20px;
    padding-left: 11px; 
    background-image:url(../images/genvej.gif);
    background-repeat:no-repeat;
    text-decoration:none;
    font-size:10px;
    color:#000; 
}

.genveje a:hover{
    text-decoration:underline;
    background-image:url(../images/genvej_hover.gif);
}
.genveje a:active{
    background-image:url(../images/genvej.gif);
    text-decoration:none;
}
Avatar billede pnr Nybegynder
02. maj 2006 - 06:33 #2
Jeg takker mange gange for hjælpen :-) Smid et svar så er der point på vej.

Lige et hurtigt spørgsmål tilsidst, bør man hvis det er muligt kun angive sine farver med 3 tegn? og hvorfor?
Avatar billede doggy82 Praktikant
04. maj 2006 - 13:10 #3
Ikke nødvendigvis, men jeg synes det er lettere.
Altså det er lettere at "se" (læse) hvad det er for en farve.
Og simplere, da der er færre farver at vælge imellem - og man kan altid gøre det mere præcist senere i udviklingen.

Feks er det lettere at læse #fc3 end #EFC23A - og de er jo næsten ens.

Man kan nemmere se at det er en orange. 100% rød, lidt mindre grøn, og mindst blå. Og kender man bare lidt til farvecirklen ser man hurtigt at det er en form for orange.

...anyway.. sådan foregår det i mit hoved når jeg sidder og hakker der ud af i tastaturet :)
Avatar billede doggy82 Praktikant
04. maj 2006 - 13:16 #4
Bonus: Holder man sig til at bruge 0,3,6,9,c,f er farven web-sikker.
Og starter man ud med dem er der os' endnu færre mulighedder at bekymre sig om :)
Avatar billede doggy82 Praktikant
04. maj 2006 - 13:18 #5
OG hvorfor taste 0 seks gange når man kan nøjes med tre gange.
Det gælder jo også altid om at få sin kode til at fylde så lidt som muligt...
Avatar billede roenving Novice
05. maj 2006 - 12:46 #6
-- og jeg er enig i doggy82s betragtninger !-)

Velbekomme '-)
Avatar billede roenving Novice
25. juli 2006 - 02:42 #7
-- og tak for point ;~}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester