Link style help please

[Col]

Once my coding is all sorted out, I'll be changing my graphics to JPEGs and GIFs, but for now, I'm using the "beta" PNG images, so don't worry about that.

Here's the bit I'm having trouble with: I have a div which contains a table. Each cell of the table contains a single link. I want a simple CSS rollover using IDs which will changet he background image of the cell the mouse is hovering over.

The code is as follows.

In the stylesheet:
#divNav {
position: relative;
background-color: #000000;
background-repeat: repeat-x;
background-image: url(images/nav_background.jpg);
width: 1000px;
height: 22px;
top: 0px;
text-align: center;
cursor: default;
}

#divNav a:link, a:visited {
border: 0;
text-align: center;
vertical-align: top;
color: #ffffff;
background-color: transparent;
background-repeat: no-repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
width: 150px;
height: 22px;
}

#divNav a:hover, a:active {
border: 0;
text-align: center;
vertical-align: top;
color: #ffffff;
background-color: transparent;
background-repeat: no-repeat;
background-image: url(images/nav_over.png);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
width: 150px;
height: 22px;
cursor: pointer;
}

And on the page:

<table width="100%" border="0" cellpadding="0" cellspacing="0" height="22">
<tr>
<td id="divNav"><a href="#">Home</a></td>
<td id="divNav"><a href="#">Themes</a></td>
<td id="divNav"><a href="#">Wallpapers</a></td>
<td id="divNav"><a href="#">Sounds</a></td>
<td id="divNav"><a href="#">Software</a></td>
<td id="divNav"><a href="#">Support</a></td>
</tr>
</table>

I know it's wrong, but I've tried moving the id="divNav" to several different places knowing the the style is applied to the children of the object that you set it to, not the object itself, but it didn't work anyway.

Thoughts?

Edit: Also, the "noparse" BB tag on these forums doesn't work.

Edit edit: Nor does the [code] tag.

Edit edit edit: And placing code in [quote] tags won't show the code either.

[Audigex]

Might wanna place your code in [code] or
tags so we can see the code properly :s

One thing you need to change is the fact you have 6 tags with the same ID. Change it to class=divNav and use .divNav instead of #divNav to set them as the same class.

Each element should have a different ID.

a basic (non-tested!) way to do it

in script tags in the head
[quote]
function hover(num)
{
document.getElementById("nav"+num).setAttribute("class", "navDivHover");
}
function out(num)
{
document.getElementById("name"+num).setAttribute("class", "navDiv");
}
Make the two styles .divNav and .divNavHover

for each item (note, replaced < and > with ( and ) because this forum doesn't appear to have a code tag


(div blah=something id=nav1 class=navDiv onMouseOver="hover(1)" onMouseOut="out(1)")
stuff
(/div)
Just repeat, changing the number in nav# hover(#) and out(#)

[Col]

Okay, I've changed the id's to classes. The background changes as required, but the links appear as the default blue with an underline, when I want them white with no underline. The text worked before.

My new style:

.divNav {
position: relative;
background-color: #000000;
background-repeat: repeat-x;
background-image: url(images/nav_background.jpg);
width: 1000px;
height: 22px;
top: 0px;
text-align: center;
vertical-align: middle;
}

.divNav td:link, .divNav td:visited {
border: 0;
text-align: center;
vertical-align: middle;
color: #ffffff;
background-color: transparent;
background-repeat: no-repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
width: 150px;
height: 22px;
}

.divNav td:hover, .divNav td:active {
border: 0;
text-align: center;
vertical-align: middle;
color: #ffffff;
background-color: transparent;
background-repeat: no-repeat;
background-image: url(images/nav_over.png);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
width: 150px;
height: 22px;
cursor: pointer;
}