[thelist] simple css help

[ben morrison]

On 10/28/05, Casey <aspnet at thecrookstons.com> wrote:
> Ok this should be an easy one.  I have a <td> in which i want to swap bg
> colors and font colors on mouseover.  Everything works great until you try
> to make the text in the td a link.

Hi Casey,

I take it you are talking about navigation with blocks of colour.

Generally we use CSS and Lists for navigation, so we can achieve
similar but easier rollover effects with no javascript needed and
cleaner code.

example:

<ul class="nav">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
</ul>

CSS

.nav {
list-style:none;
margin:0;
padding:0;
}
.nav li {
list-style:none;
margin:0;
padding:0;
}
.nav li a {
background:red;
padding:10px;
width:100px;
color:white;
}
.nav li a:hover {
background:blue;
color:white;
}

That maybe a bit much for you to take in, but its really worth the jump.

There are some great tutorials online and even a ListBuilder

http://css.maxdesign.com.au/listamatic/

Hope that inspires you to change your code...

in answer to your question you could try:

forget using background colours on the td, instead apply them to the link.

<td class="nav"><a href="#">link 1</a></td>

CSS

.nav a {
display:block;
padding:10px;
backgrounr:red;
}

.nav a:hover {
background:blue;
}


ben