Welcome to WebmasterWorld Guest from 54.196.232.162

Forum Moderators: not2easy

Message Too Old, No Replies

Css rollovers

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

New User

10+ Year Member

joined:Sept 3, 2003
posts:21
votes: 0


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 Sept 8, 2003 (gmt 0)

Senior Member

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

joined:Feb 4, 2002
posts:5044
votes: 0


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 Sept 8, 2003 (gmt 0)

New User

10+ Year Member

joined:Aug 14, 2002
posts:39
votes: 0


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 Sept 8, 2003 (gmt 0)

New User

10+ Year Member

joined:Sept 3, 2003
posts:21
votes: 0


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 Sept 8, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 9, 2003
posts:2072
votes: 2


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

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members