Jump to content
Sign in to follow this  
Tha_Zaynt

hvorfor funker ikke css rolloveren min?

Recommended Posts

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>

Share this post


Link to post

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);
  }

Edited by Tha_Zaynt

Share this post


Link to post

Har funka før..

Som jeg har fostått det brukes id når klassen er definert slik:

div#meny{
masse rart...
}

Mulig jeg har misforstått..

Edited by Tha_Zaynt

Share this post


Link to post

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.

Share this post


Link to post

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.

Share this post


Link to post
Tror ikke du skal bruke "class" på div'er. Det gjør ihvertfall ikke jeg.

Prøv med "ID" som jeg skrev ovenfor.

En ID er unik og skal bare brukes en gang i dokumentet, en klasse kan brukes flere ganger. En klasse angis med "." i css, mens en id med "#".

 

#id {}

.klasse {}

 

Selvsagt kan man bruke klasse på div's.

Share this post


Link to post

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...