Gå til innhold

hvorfor funker ikke css rolloveren min?


Anbefalte innlegg

Jeg har sikkert gjort dette på en helt ekstremt vanskelig måte men men...

 

style.css

.link1{
   background: url(images/aboutme.png) top left no-repeat;
height:32px;
width:127px;
}
.link1 a {
   background: url(images/aboutme.png) top left no-repeat;
}
.link1 a:hover {
  background-image: url(images/aboutmehover.png);
  }
.link2{
background: url(images/webdesign.png) top left no-repeat;
height:32px;
width:118px;
left: 127px;

}
.link2 a {
   background: url(images/webdesign.png) top left no-repeat;
}
.link2 a:hover {
  background-image: url(images/webdesignhover.png);
  }
.link3{
   background: url(images/friends.png) top left no-repeat;
height:32px;
width:114px;
}
.link3 a {
   background: url(images/friends.png) top left no-repeat;
}
.link3 a:hover {
  background-image: url(images/friendshover.png);
  }
.link4{
   background: url(images/guestbook.png) top left no-repeat;
height:32px;
width:119px;
}
.link4 a {
   background: url(images/guestbook.png) top left no-repeat;
}
.link4 a:hover {
  background-image: url(images/guestbookhover.png);
  }
.link5{
   background: url(images/gallery.png) top left no-repeat;
height:32px;
width:122px;
}
.link5 a {
   background: url(images/gallery.png) top left no-repeat;
}

.link5 a:hover {
  background-image: url(images/galleryhover.png);
  }
.link6{
   background: url(images/links.png) top left no-repeat;
height:32px;
width:122px;
}
.link6 a {
   background: url(images/links.png) top left no-repeat;
}
.link6 a:hover {
  background-image: url(images/linkshover.png);
  }

 

	<div class="link1"><a href="#"><span></span></a></div>
<div class="link2"><a href="#"><span></span></a></div>
<div class="link3"><a href="#"><span></span></a></div>
<div class="link4"><a href="#"><span></span></a></div>
<div class="link5"><a href="#"><span></span></a></div>
<div class="link6"><a href="#"><span></span></a></div>

Lenke til kommentar
Videoannonse
Annonse

Dette funka heller ikke:

 

<div class="links1"><a class="link1" href="#"><span></span></a></div>
<div class="links2"><a class="link2" href="#"><span></span></a></div>	
<div class="links3"><a class="link3" href="#"><span></span></a></div>	
<div class="links4"><a class="link4" href="#"><span></span></a></div>	
<div class="links5"><a class="link5" href="#"><span></span></a></div>
<div class="links6"><a class="link6" href="#"><span></span></a></div>

 

style.css

.links1{
   background: url(images/aboutme.png) top left no-repeat;
height:32px;
width:127px;
}
.link1 a {
   background: url(images/aboutme.png) top left no-repeat;
}
.link1 a:hover {
  background-image: url(images/aboutmehover.png);
  }
.link1 a:active{
  background-image: url(images/aboutmehover.png);
  }
  .link1 a:visited{
  background-image: none;
  }
.links2{
background: url(images/webdesign.png) top left no-repeat;
height:32px;
width:118px;
left: 135px;
position: absolute;
top: 8px;


}
.link2 a {
   background: url(images/webdesign.png) top left no-repeat;
}
.link2 a:hover {
  background-image: url(images/webdesignhover.png);
  }
.links3{
background: url(images/friends.png) top left no-repeat;
height:32px;
width:114px;
position: absolute;
left: 253px;
top: 8px;

}
.link3 a {
   background: url(images/friends.png) top left no-repeat;
}
.link3 a:hover {
  background-image: url(images/friendshover.png);
  }
.links4{
background: url(images/guestbook.png) top left no-repeat;
height:32px;
width:119px;
position: absolute;
left: 367px;
top: 8px;

}
.link4 a {
   background: url(images/guestbook.png) top left no-repeat;
}
.link4 a:hover {
  background-image: url(images/guestbookhover.png);
  }
.links5{
background: url(images/gallery.png) top left no-repeat;
height:32px;
width:122px;
position: absolute;
left: 486px;
top: 8px;

}
.link5 a {
   background: url(images/gallery.png) top left no-repeat;
}

.link5 a:hover {
  background-image: url(images/galleryhover.png);
  }
.links6{
background: url(images/links.png) top left no-repeat;
height:32px;
width:122px;
left: 608px;
top: 8px;
position: absolute;

}
.link6 a {
   background: url(images/links.png) top left no-repeat;
}
.link6 a:hover {
  background-image: url(images/linkshover.png);
  }

Endret av Tha_Zaynt
Lenke til kommentar

Tror du må bruke id ja. Her er koden som jeg bruker,:

 

<li><a href="#"  id="test"><span class="hidden">Test</span></a></li>

 

 

#test {

height:Xpx;

width:Xpx;

background-image: url(tilbilde.jpg);

display:block;

}

#test:hover {

background-image: url(hover.jpg);

}

 

 

Men det kan jo være en idé å benytte seg av background position istedenfor å preloade alle bildene som trengs. Kan lese mer om det her.

Lenke til kommentar

Dere som opererer med tomme a-elementer her, slutt med det, det er helt på trynet!

 

:)

 

div#menu ul {
 list-style: none;
 position: absolute;
 height: 19px;
 overflow: hidden;
 width: 241px;
}

div#menu ul li {
 display: inline;
 float: left;
}

div#menu li a {
 display: block;
 overflow: hidden;
 padding: 19px 0 0 0;
 height: 0 !important;
 height: 19px;
 background-repeat: no-repeat;
}

div#menu li a:hover {
 background-position: 0 -19px;
}

.home {
 background-image: url("gfx/menu/home.gif");
 width: 48px;
}

.portfolio {
 background-image: url("gfx/menu/portfolio.gif");
 width: 72px;
}

.profile {
 background-image: url("gfx/menu/profile.gif");
 width: 59px;
}

.contact {
 background-image: url("gfx/menu/contact.gif");
 width: 62px;
}

 

<div id="menu">
    <ul>
         <li><a class="home" href="index.php">Home</a></li>
         <li><a class="portfolio" href="index.php?page=portfolio">Portfolio/showroom</a></li>
         <li><a class="profile" href="index.php?page=profile">Personal profile</a></li>
         <li><a class="contact" href="index.php?page=contact">Contact information</a></li>
       </ul>
 </div>
</div>

 

Eksempelet over er hvordan jeg har gjort den på siden min.

Lenke til kommentar

Bli med i samtalen

Du kan publisere innhold nå og registrere deg senere. Hvis du har en konto, logg inn nå for å poste med kontoen din.

Gjest
Skriv svar til emnet...

×   Du har limt inn tekst med formatering.   Lim inn uten formatering i stedet

  Du kan kun bruke opp til 75 smilefjes.

×   Lenken din har blitt bygget inn på siden automatisk.   Vis som en ordinær lenke i stedet

×   Tidligere tekst har blitt gjenopprettet.   Tøm tekstverktøy

×   Du kan ikke lime inn bilder direkte. Last opp eller legg inn bilder fra URL.

Laster...
×
×
  • Opprett ny...