[thelist] simple css help
ben morrison
morrison.ben at gmail.com
Fri Oct 28 11:35:45 CDT 2005
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
More information about the thelist
mailing list