CSS rollovers help

Soldato
Joined
16 Dec 2003
Posts
2,697
Hey :)

I'm having some trouble with my CSS rollovers, here's my code in XHTML:

Code:
<a href="index.html"><img src="menu_home.jpg" width="150" height="30" border="0" alt="Home"></img></a>
To convert this into using rollovers, I assumed it would be like this:

Code:
<a class="menus" href="index.html"></a>
Along with the following code is a seperate CSS file:

Code:
a.menus { background: url(menu_home_rollover.jpg); }
a.menus:link { background: url(menu_home.jpg); }
a.menus:hover,
a.menus:focus { background: url(menu_home_rollover.jpg); }

Why doesn't this work? :confused:, my image doesn't show up either :(. Do I have to use .gif format?

Please help a newbie in CSS please! :)
 
Thanks! :)

It's almost there, it looks like this at the moment:

home5oq.jpg


The size of the image is 150 X 30, but it appears like that? :confused:

I'm using a table column for the menus :)
 
I managed to fix it by adding float:left;

menu7gr.jpg
menu15ql.jpg


Ignoring my n00b effort :o

On the left is what the menu looks like, on the right is what it looks like when I hover my mouse pointer onto a URL that has CSS code for highlighting the link. It happens when I hover over it twice :confused:

Is there a fix for this?

Here's the code I'm using for highlighting the URL and an email address:

Code:
a.links:visited  {color: purple;
                 text-decoration: underline;}
a.links:link     {color: #0000FF;
                 text-decoration: underline;}
a.links:active   {color: #FFFFFF;
                 text-decoration: underline;}
a.links:hover    {color: #FFFFFF;
                 background-color: lightslategray;
                 text-decoration: underline;}

Please help :o
 
Back
Top Bottom