Correct way to do this? (div link replace with hover)

[liquinas]

I am trying to make a CSS replace menu that shows up as an image file that was chopped in 10 pieces. So far, it works peaches and cream and I even get the links working, I just need to do the rollover switch to another image which I can't seem to do.

Here's the base code:


<div id="left">
<div id="menu_content">
<div id="liquinas"><span>Liquinas</span></div>
<a href="http://liquinas.com"><div id="redprologue"><span>Prologue</span></div></a>
<a href="http://liquinas.com/design"><div id="design"><span>Design</span></div></a>
<a href="http://liquinas.com/development"><div id="development"><span>Development</span></div></a>
<a href="http://liquinas.com/photoshop"><div id="photoshop"><span>Photoshop</span></div></a>
<a href="http://liquinas.com/vector"><div id="vector"><span>Vector</span></div></a>
<a href="http://liquinas.com/media"><div id="media"><span>Media</span></div></a>
<a href="http://liquinas.com/blog"><div id="blog"><span>Blog</span></div></a>
<a href="http://liquinas.com/services"><div id="services"><span>Services</span></div></a>
<a href="http://liquinas.com/contact"><div id="contact"><span>Contact</span></div></a>
</div>
<div id="stats">
<span>74 Files</span><br />
<span>WD Rank #756,634</span><br />
<span>1,254 Served</span>
</div>
</div><!-- End left -->

Then I add this to make the placeholders go away:

#liquinas span {
display:none;
}
#prologue span {
display:none;
}
#design span {
display:none;
}
#development span {
display:none;
}
#photoshop span {
display:none;
}
#vector span {
display:none;
}
#media span {
display:none;
}
#blog span {
display:none;
}
#services span {
display:none;
}
#contact span {
display:none;
}

Then the code to replace it with my image menu which consists of 10 PNGs:

#liquinas
{
width:118px;
height:57px;
max-width:118;
background-color:#FFFFFF;
background:url(images/menu_unselected/1.png);
background-repeat:no-repeat;
}
#prologue
{
width:118px;
height:29px;
max-width:118;
background-color:#FFFFFF;
background:url(images/menu_unselected/2.png);
background-repeat:no-repeat;
}
#design
{
width:118px;
height:29px;
max-width:118;
background-color:#FFFFFF;
background:url(images/menu_unselected/3.png);
background-repeat:no-repeat;
}
#development
{
width:118px;
height:29px;
max-width:118;
background-color:#FFFFFF;
background:url(images/menu_unselected/4.png);
background-repeat:no-repeat;
}
#photoshop
{
width:118px;
height:29px;
max-width:118;
background-color:#FFFFFF;
background:url(images/menu_unselected/5.png);
background-repeat:no-repeat;
}
#vector
{
width:118px;
height:29px;
max-width:118;
background-color:#FFFFFF;
background:url(images/menu_unselected/6.png);
background-repeat:no-repeat;
}
#media
{
width:118px;
height:29px;
max-width:118;
background-color:#FFFFFF;
background:url(images/menu_unselected/7.png);
background-repeat:no-repeat;
}
#blog
{
width:118px;
height:29px;
max-width:118;
background-color:#FFFFFF;
background:url(images/menu_unselected/8.png);
background-repeat:no-repeat;
}
#services
{
width:118px;
height:29px;
max-width:118;
background-color:#FFFFFF;
background:url(images/menu_unselected/9.png);
background-repeat:no-repeat;
}
#contact
{
width:118px;
height:36px;
max-width:118;
background-color:#FFFFFF;
background:url(images/menu_unselected/10.png);
background-repeat:no-repeat;
}

At this point I have my full working menu, now I want to add a rollover by switching it to another img (I'm switching it to a side-by-side flip later, I just want to achieve a rollover change first).

So I try

#contact a:hover
{
width:118px !important;
height:36px !important;
max-width:118;
background-color:#FFFFFF;
background:url(images/menu_selected/10.png);
background-repeat:no-repeat;
}

Which doesn't seem to do anything at all. I'm pretty sure I'm doing this wrong, and I've tried swapping divs for spans and LIs but I can't seem to get it right.

Can anyone point me in the right direction with this?

Thanks in advance.

[Medyman]

You're in the right direction.

Just remember that CSS means cascading style sheet --> top to bottom, outside to inside.

Therefore, to change the div's background when you hover over the anchor in the following code:


<a href="http://liquinas.com/contact"><div id="contact"><span>Contact</span></div></a>


you would need the following CSS:



a:hover div#contact {
background-image:url(images/menu_selected/10.png);
}


You shouldn't even need the rest of that css.

Notice the order. First the a:hover then the #contact. Top to bottom , outside to inside ;)

[LadynRed]

The div inside an <a></a> is improper coding. The hover can be achieved with CSS and proper coding. You must also realize that the hover pseudo class ONLY works on the <a> tag in IE6.

Min/max width/height isn't supported in IE 6 either.