Jump to content

Need help w/CSS Rollovers


javierdl
 Share

Recommended Posts

I'm trying to use this CSS Rollovers tutorial. The problem is that I'm a total rookie on CSS, and I want to use just an image, without the overlaid HTML text. Can someone give me a hand figuring out how the code would look after necessary adjustments?This is what I've done so far: Example 1&Example 2Like I said, I just don't know enough of CSS to figure it out :) ...Thanks in advance guys,JDL

Link to comment
Share on other sites

You were doing fine in your CSS, you just needed a height of 26px. You don't need all that extra code in your CSS like "color" because you can't change the color of the images. Here's the fixed code:

<style type="text/css">#menu a {  display:block;  width: 114px;  height: 26px;  background: url(http://www.javierdl.com/temp/css_rollovers/3in1/signin.png) 0 0 no-repeat;  text-decoration: none;}#menu a:hover {  background-position: -113px 0;}#menu a:active {  background-position: -226px 0;}</style>

<div id="menu"><a href="#"></a></div>
Link to comment
Share on other sites

Thanks for your reply RahXephon : )But it's still not working :) - Have a look at Example 2 again (already updated it). The only thing diff from your code is that I added single quotation marks on each side of the URL and spaces. I did try it without them just as you had it but it didn't work either.J.

Link to comment
Share on other sites

You have 2 starting tags for CSS

 <style type="text/css"><style type="text/css">

You only need one.

 <style type="text/css">

Also, you don't need the period in your code

<div id="menu"><a href="#"></a></div>

Try it.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...