CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

suverenia Nybegynder

21. juli 2009 - 18:00 Der er 7 kommentarer og
1 løsning

Forskellige linksfarver på ens hjemmeside

Hej, jeg er løbet ind i et irriterende problem. Jeg benytter linksfarver, som defineres ud fra følgende:

a:link {
color: #E7F6F7;
text-decoration:none;
}
a:visited {
color: #E7F6F7;
text-decoration:none;
}
a:hover {
color:#403232;
text-decoration:underline;
}

Mit problem er så, at der er visse steder på hjemmesiden (eksempelvis i menuen), hvor jeg ikke ønsker at linksene skal have samme farve som resten af hjemmesiden, men en helt anden farve. Dette skyldes baggrundsfarven - bliver standardfarven til links brugt i menuen, bliver linksene ret utydelige.

Hvad kan jeg gøre, for at løse dette problem og tillade min hjemmeside at benytte flere linksfarver, selvom der er defineret en fælles linkfarve?

Jeg fandt ud af at jeg kunne ændre farven efter jeg har defineret linket:

<a href="blabla"><font color="#000000">Link</font></a>

Dette virker dog kun i Firefox, mens IE ignorerer det og giver alle links samme farve. Er der ikke en anden løsning?

Synes godt om

kpdk Nybegynder

21. juli 2009 - 18:12 #1

Må jeg foreslå at du vha. CSS laver forskellige typer links, om man så må sige?

Her er et eksempel på noget CSS og dernæst på noget simpel HTML som laver et link med udfra disse definitioner. Du kan selv lave det ønskede setup og se nærmere på det:

a {
... standard link
}

a:hover {
... standard link hover
}

.menu_link {
... eksempel på menu link
}

.menu_link:hover {
... eksempel på menu link hover
}

.submenu_link {
... eksempel på submenu link
}

.submenu_link:hover {
... eksempel på submenu link hover
}

I HTML'en kan du så definere dem som

<a href="test.html">link</a>
<a href="test.html" class="menu_link">link</a>
<a href="test.html" class="submenu_link">link</a>

På den måde slipper du for at bruge <font> som er deprecated, og det ville meget sandssynligt give problemer med konsistens imellem browserne :)

/kpdk

Synes godt om

Mik2000 Professor

21. juli 2009 - 18:38 #2

Den rigtige måde vil være at lave standard links:
a:link {
... standard link
}

a:visited {
... standard besøgt link
}

a:active{
...standard link mens der klikkes
}

a:hover {
...standard link mens musen er over
}

Og har du så f.eks. en top hvor linket skal være en anden farve, og en klasse til den kaldet top gøres det sådan (Kan også gøres med id dvs # foran):
.top{
... normale ting til top
}

.top a:link {
... alt der vedr links inden for top clas
}

.top a:visited {
... alt der vedr besøgte links inden fo top class
}

.top a:active{
... alt der vedr links mens man klikker inden for top class
}

.top a:hover {
... alt der vedr links når musen er over inden for top
}

Synes godt om

Mik2000 Professor

21. juli 2009 - 18:40 #3

Dvs har du f.eks. en top

<div class="top">
Så vil alle links heri laves som valgt
</div>

Det kunne selvfølgelig også være i en tabel eller andet

<table>
<tr>
<td class="top">Så vil alle links heri laves som valgt</td>
</tr>
</table>

Synes godt om

suverenia Nybegynder

21. juli 2009 - 18:53 #4

Jamen det ligner jo en fantastisk løsning :)

Jeg har afprøvet det, og der er et problem:

.menu_link {
color: white;
text-decoration:none;
}

.menu_link:hover {
color: red;
text-decoration:underline;
}

hover virker, men den øverste gider den sgu ikke helt reagere på, der får jeg bare standard farven på links frem. Men holder jeg musen over dem, bliver de røde.

Hvad kan der være galt?

Synes godt om

suverenia Nybegynder

21. juli 2009 - 19:15 #5

Jeg fandt fejlen :)

.menu_link:link {
color: white;
text-decoration:none;
}

Det var ikke nok med .menu_link {, det skulle være .menu_link:link {

Fantastisk.

Synes godt om

azerty Juniormester

21. juli 2009 - 20:02 #6

Man kunne også være lidt mere "manuel", hvis det ikke handler om en million links:

<a href="http://www.bla.html" STYLE="color:#CC0000">Bla</a>

STYLE overtrumfer her den tidligere definerede linkfarve.

Synes godt om

olebole Juniormester

21. juli 2009 - 22:32 #7

<ole>

Det er en god idé, hvis du styler dine alm. links, som mik2000 viser i kommentar #2. Anden del er rigtig, hvis du har et element (f.eks. et div) med links i - og divet har klassen top.

Hvis nogle links selv har klassen top, bør syntaksen være:

.top a:link {
... alt der vedr links med klassen top
}

.top a:visited {
... alt der vedr besøgte links med klassen top
}

.top a:active{
... alt der vedr links med klassen top, mens der klikkes på dem
}

.top a:hover {
... alt der vedr links med klassen top, mens musen er over dem
}

/mvh
</bole>

Synes godt om

olebole Juniormester

21. juli 2009 - 22:33 #8

Doohhhh ... sådan:

a.top:link {
... alt der vedr links med klassen top
}

a.top:visited {
... alt der vedr besøgte links med klassen top
}

a.top:active{
... alt der vedr links med klassen top, mens der klikkes på dem
}

a.top:hover {
... alt der vedr links med klassen top, mens musen er over dem
}

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS