Welcome to WebmasterWorld Guest from 54.158.228.55

Forum Moderators: not2easy

Message Too Old, No Replies

Css rollovers

     
3:45 pm on Sep 8, 2003 (gmt 0)

10+ Year Member



I have a table with one row and five cells each containing a link. I would like the background to reverse on rollover. When I try this with the hover: selector, only the center part of the cell changes the background. I would like the entire cell to change the background color. Is there a way to do this with CSS? I understand that one can do this with javascript but I would rather use CSS.

This is part of the html

<table>
<Tr>
<TD class="toplinks" WIDTH="20%" ALIGN="CENTER">
<A HREF="Whats.html">What's New</A>
</TD>
<TD class="toplinks" WIDTH="20%" ALIGN="CENTER">
<A HREF="contact.html">Contact Us</A>
</TD>
<TD class="toplinks" WIDTH="20%" ALIGN="CENTER">
<A HREF="FAQ.html">FAQ</A>
</TD>
<TD class="toplinks" WIDTH="20%" ALIGN="CENTER">
<A HREF="links.html">Links</A>
</td>
</TR>
</TABLE>

Here is the CSS

td.toplinks a{
background-color: #ff9966;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .85em;
padding: 0;
}
A:link{
color: #006666;
text-decoration: none;
}
A:visited{
color: #003333;
text-decoration: none;
}
A:hover{
display:block;
color: yellow;
text-decoration: none;
background: #006666;
}
A:active{
color: purple;
text-decoration: none;
}

3:59 pm on Sep 8, 2003 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



The way to do it Jerry is to set the anchors as block level elements instead of inline as they naturally are.

You might need to play with the way you select them of course but the general idea would be:

td a { display: block; }

That'll make them as wide as the container (the td), you may even need to adjust their height to work with your table cells.

Of course, no post like that can go without a slight reprimand from the clean coding police though ;) --- Use a list, instead: it makes more sense!

hehe, hope that helps

Nick

4:02 pm on Sep 8, 2003 (gmt 0)

10+ Year Member



Why donīt you want to do it without <td>s and stuff?

<a href="foo.html" class="bgrollover">Link one</a>
<a href="bar.html" class="bgrollover">Link two</a>
<a href="foobar.html" class="bgrollover">Link three</a>

a.bgrollover {
background-color: #f00;
color: #fff;
display: block;
margin: 1px;
padding: 3px;
}

a.bgrollover:hover {
background-color: #00f;
}

Should do it more effectively.

Best regards,

Lars

6:02 pm on Sep 8, 2003 (gmt 0)

10+ Year Member



Thanks everyone for the helpful advice. I will try using the display:block; first as that seems the simplest to try first. The reason I am using tds for the links is mainly for NS4x. It took a long time the get the page to look somewhat decent in NS4x.
8:30 pm on Sep 8, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



ahem... I don't want to be the one to tell you what happened to NS4.x in that 'long time' >;->
 

Featured Threads

Hot Threads This Week

Hot Threads This Month