Avatar billede larserik Nybegynder
07. februar 2006 - 22:18 Der er 9 kommentarer og
1 løsning

Spørsmål om CSS

Hva er galt med denne koden:

<title>Untitled Document</title>
<style type="text/css">
<!--
.test {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
}
.test a {
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
}
.test a:hover {
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #CCCCCC;
}
body {
background-color: #000000;
}
-->
</style>
</head>

<body>
<p><a href="test" class="test">Testing</a></p>
</body>


Linken fornandrer ikke farge når jeg hoverer over den. Hva har jeg gjort feil?

:)
Avatar billede udvikler Nybegynder
07. februar 2006 - 22:29 #1
Fordi at du også skal huske de andre: link,visited og active

<title>Untitled Document</title>
<style type="text/css">
<!--
.test {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
}
.test a {
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
}
a:link {
}
a:visited {
}
a:active {
}
a:hover {
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #CCCCCC;
}

body {
background-color: #000000;
}
-->
</style>
</head>

<body>
<p><a href="test" class="test">Testing</a></p>
</body>
Avatar billede udvikler Nybegynder
07. februar 2006 - 22:29 #2
Forresten er det testet og det virker :-)
Avatar billede amews_aj Nybegynder
07. februar 2006 - 22:33 #3
Ehm.. -aco- i dit eksempel vil alle links få den samme hover effekt. Du bruger jo ikke test classen...

Skal nok se sådan her ud:



<head>
<title>Untitled Document</title>
<style type="text/css">
<!--
.test {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
}
a.test {
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
}
a.test:hover {
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #CCCCCC;
}
body {
background-color: #000000;
}
-->
</style>
</head>

<body>
<p><a href="test" class="test">Testing</a></p>
</body>


Også testet...
Avatar billede udvikler Nybegynder
07. februar 2006 - 22:37 #4
Aaah ja...

Det har du jo så fuldstændig ret i, tænkte mig slet ikke om. Er søvnighed den bedste undskyldning? :-)
Avatar billede amews_aj Nybegynder
07. februar 2006 - 22:41 #5
:D Jah, jeg kender det skam godt... :P
Avatar billede larserik Nybegynder
07. februar 2006 - 22:42 #6
Takk! :))
Avatar billede amews_aj Nybegynder
07. februar 2006 - 22:48 #7
Hmm, var det -aco- der løste det ^-/
Husk at tjekke at den/de rigtige er markeret inden du giver accepterer...
Avatar billede amews_aj Nybegynder
07. februar 2006 - 22:50 #8
Der kan du bare se -aco- jeg kan heller ikke skrive nu.. :P

Husk at tjekke at den/de rigtige er markeret inden du giver accepterer...
> skulle være >
Husk at tjekke at den/de rigtige er markeret inden du accepterer...
Avatar billede larserik Nybegynder
07. februar 2006 - 23:18 #9
du registrerte en kommentar og ikke svar, men jeg kan gi deg 30 poeng også.

Legger det ut her: http://www.eksperten.dk/spm/Programmering/DHTML/
Avatar billede roenving Novice
08. februar 2006 - 14:31 #10
-- og en bedre metode kan være at mn sætter klassen p det omkranssende element, for så kan man også på en simpel måde sætte forskel på de forskellige:

<style type="text/css">
body{background-color:#333;color:yellow;}
a,a:visited{color:white;text-decoration:none;}
a:hover,a:active{color:red;text-decoration:overline underline;}
.menu a,.menu a:visited{color:green;text-decoration:underline;}
.menu a:hover,.menu a:active{color:blue;text-decoration:none;font-weight:bold;}
.menu{background-color:white;width:200px;}
</style>

<div class="menu">
  <a href="noget">Punkt 1</a><br>
  <a href="noget">Punkt 2</a><br>
  <a href="noget">Punkt 3</a><br>
</div>
<br>
Og et link udenfor menuen: <a href="nogetAndet">Andet</a>
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