homepage Welcome to WebmasterWorld Guest from 54.234.0.85
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Css rollovers
jerrynyc

10+ Year Member



 
Msg#: 1797 posted 3:45 pm on Sep 8, 2003 (gmt 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;
}

 

Nick_W

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



 
Msg#: 1797 posted 3:59 pm on Sep 8, 2003 (gmt 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

ProfMoriarty

10+ Year Member



 
Msg#: 1797 posted 4:02 pm on Sep 8, 2003 (gmt 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

jerrynyc

10+ Year Member



 
Msg#: 1797 posted 6:02 pm on Sep 8, 2003 (gmt 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.

ronin

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 1797 posted 8:30 pm on Sep 8, 2003 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved