a:link...reagerer ikke på endring

a:link...reagerer ikke på endring

Innleggav srb » tir 19.08.2008 20:39

Jeg får ikke endret utseende til linkene jeg har. Noen som ser om det er feil i css`en tro
css:
Kode: Merk alt
@charset "UTF-8";
/* CSS Document */

html{
   margin:0;
   padding:0;
   height:100%;
   margin-bottom:1px;
}

body{
   margin:0;
   padding:0;
   background-color:#FFFFFF;
}

a:link{
   text-decoration:none;
   color:#CCCCCC;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:9px;
}
a:visited{
   text-decoration:none;
   color:#000000;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:9px;
}
a:active{
   text-decoration:none;
   color:#333333;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:9px;
}
a:hover{
   text-decoration:underline;
   color:#FFFFFF;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:9px;
}

p{
   font-family:Arial, Helvetica, sans-serif;
   color:#FFFFFF;
   font-size:small;
}

h3{
color:#CCCCCC;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

#belte{
   position:relative;
   top:300px;
   background-color:#006699;
   height:50px;
   width:100%;
}

#hovedside{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(hjem.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

   
#meny{
   position:absolute;
   left: 40px;
   list-style: none;
   top:160px;
   width: 63px;
   height: 421px;
}

#meny li, #meny li a{
   display:block;
   width: 65px;
   height: 60px;
   margin-top:20px;
}

#meny li a span{
  display:none;
}

#meny-hjem   { background:url(bildeknapp1.png) no-repeat;
}

#meny-studio { background:url(bildeknapp2.png) no-repeat;
}

#meny-utstyr { background:url(bildeknapp3.png) no-repeat;
}

#meny-erfaring { background:url(bildeknapp4.png) no-repeat;
}

#meny-kontakt { background:url(bildeknapp5.png) no-repeat;
}

#navcontainer{
   display:inline;
   position:absolute;
   width:370px;
   padding-left: 0;
   list-style: none;
   top:370px;
   left:370px;
   padding:0px;
   z-index:1;
}
 
#navlist li{
   display:inline;
   list-style-type:none;
   padding-right:20px;
   left:20px;
   
   
}#tekstholder{
   display:inline;
   position:absolute;
   width:370px;
   padding-left: 0;
   list-style: none;
   top:360px;
   left:370px;
   padding:0px;
   z-index:1;
}

#textbox{
   overflow:auto;
   position:absolute;
   width:490px;
   height:190px;
   left:-130px;
   top:50px;
   padding:5px 5px 5px 5px;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:12px;
   color:#CCCCCC;
   text-align:left;
   }


#bakScenen{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(hjembakscenen.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#nyheter{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(hjemnyheter.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#demo{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(hjemsenddemo.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#arrangement{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(hjemarrangement.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#studioogpris{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(studioogpris.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#studio{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(studio.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#utstyr{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(utstyr.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#erfaring{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(erfaring.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#kontakt{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(kontakt.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#studioFotostudioa{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(studiofotostudioa.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#studioFotostudiob{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(studiofotostudiob.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#studioFotostudioc{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(studiofotostudioc.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#pris{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(studiopriser.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#studioPriserprisa{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(studiopriserprisa.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#studioPriserprisb{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(studiopriserprisb.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#studioPriserprisc{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(studiopriserprisc.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#mixepultermicrofoneroglydrom{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(mixepultermicrofoglydrom.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#utstyrlydrom{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(utstyrlydrom.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}
   
#utstyrlydroma{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(utstyrlydroma.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}   
   
#utstyrlydromb{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(utstyrlydromb.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}
   
#utstyrlydromc{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(utstyrlydromc.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#utstyrmicrofoner{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(utstyrmicrofoner.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}


#utstyrmica{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(utstyrmicrofonera.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}   
   
#utstyrmicb{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(utstyrmicrofonerb.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}
   
#utstyrmicc{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(utstyrmicrofonerc.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#utstyrmixepulter{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(utstyrmixepulter.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#utstyrmixa{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(utstyrmixa.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#utstyrmixb{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(utstyrmixb.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#utstyrmixc{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(utstyrmixc.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#relasjoner{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(relasjoner.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}
   
#relasjonerartister{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(relasjonerartister.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#electronic{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(electronic.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#electronicart1{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(electronicart1.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#electronicart2{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(electronicart2.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}   


#electronicart3{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(electronicart3.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#electronicart4{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(electronicart4.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#gospel{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(gospel.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#gospelart1{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(gospelart1.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#gospelart2{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(gospelart2.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#gospelart3{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(gospelart3.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#gospelart4{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(gospelart4.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#jazz{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(jazz.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#jazzart1{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(jazzart1.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#jazzart2{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(jazzart2.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#jazzart3{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(jazzart3.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#jazzart4{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(jazzart4.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#norsk{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(norsk.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#norskart1{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(norskart1.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#norskart2{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(norskart2.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#norskart3{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(norskart3.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#norskart4{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(norskart4.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#tv{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(tv.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}
   
#tv1{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(tv1.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#tv2{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(tv2.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#film{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(film.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}


#film1{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(film1.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}

#film2{
   position:relative;
   top:0px;
   margin:0 auto;
   background-image:url(film2.png);
   background-repeat:no-repeat;
   width:850px;
   height:650px;
}            

   
medlem i 140 måneder
 

Re: a:link...reagerer ikke på endring

Innleggav Polymorph » tir 19.08.2008 21:28

Prøv å bruke kun "a" istedenfor "a:link".

Usikker på om det har noen forskjell, men jeg bruker bare "a" for lenker, og så a:hover for de effektene de skal ha.

Verdt et forsøk?

Men kanskje dette har noe med saken å gjøre?

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!

Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!


Sitat: http://www.w3schools.com/CSS/css_pseudo_classes.asp

Syntes for øvrig det hørtes litt gammeldags ut at de må være i riktig rekkefølge.

Brukerens avatar
medlem i 174 måneder
 

Re: a:link...reagerer ikke på endring

Innleggav srb » tir 19.08.2008 21:36

Takk. Ja, kan vel være enig i det at det virke "någet" gammeldags - men det virker jammen meg tror jeg:)
medlem i 140 måneder
 

Re: a:link...reagerer ikke på endring

Innleggav jankristian.tollefsen » man 03.11.2008 16:13

hvis du i html'en har laget en div til f.eks. menyen, lignende dette

<div class="meny">
<a href="foto.html">Foto</a>
</div>

så kan du i css'en gjøre slik

.meny a:link
{
text-decoration: underline;
color: #ffffff
}

dette er sånn jeg har gjort det. :-)
medlem i 153 måneder
 

Re: a:link...reagerer ikke på endring

Innleggav tjodolv » man 03.11.2008 16:46

Jeg tror feilen er som Polymorph sier at du har satt de forskjellige pseudo-elementene i gal rekkefølge. De må komme slik:
a:link
a:visited
a:hover
a:active


Du har byttet rundt på a:hover og a:active, slik at a:hover kommer til slutt, og da går alt i grøfta, av en eller annen merkelig grunn.

Brukerens avatar
medlem i 156 måneder
 

Re: a:link...reagerer ikke på endring

Innleggav decodex » tir 04.11.2008 15:22

Blir litt feil å si at det er gammeldags at de må listes i en gitt rekkefølge ;) Årsaken er at alle pseudo-klassene for lenker har samme «viktighet», samtidig som flere av de kan treffe for en lenke samtidig og da vil den siste definisjonen trumfe resten. F.eks. kan en lenke både være tidligere besøkt (:visited) og ha musepekeren over seg (:hover). Om :visited er definert etter :hover da vil ikke :hover ha noe effekt på besøkte lenker.

CSS-guruen Eric Meyer har en mer detaljert forklaring.

Det er i bunn og grunn noe av det som gjør CSS så nyttig, men jeg kan være enig i at det ikke er altfor lett å skjønne intuitivt i dette tilfellet :)

Brukerens avatar
medlem i 165 måneder
 


Returner til CSS



Hvem er i Forumene

Registrerte brukere: Google [Bot]



cron