[thelist] simple css help

Casey aspnet at thecrookstons.com
Fri Oct 28 11:44:55 CDT 2005


Thanks Ben.  I'm aware that this would be the preferred way of doing this. 
I should have explained more.  I've taken over a site that is 99% complete 
and ready to go into production, save this one small problem.

Here's the site: http://site5.dev.completeconsulting.com/contentdisplay.asp

Among other tweaks, I've been asked to fix this problem.  Had I coded the 
site from ground up, I would have done it just the way you described.  I 
also asked the client if I could re-code their navigation the "right" way - 
request denied.  They think it should be a simple fix, and they don't want 
to pay me to re-do it.

In the example I pasted below, I extracted all the actual CSS and HTML code 
from the miles and miles of ugly javascript to make it easier for everyone 
on this list to digest.

So, back to my original question.  Given what I have to work with, what's 
the best solution?

A thousand thank you's!!!!


----- Original Message ----- 
From: "ben morrison" <morrison.ben at gmail.com>
To: "Casey" <aspnet at thecrookstons.com>; <thelist at lists.evolt.org>
Sent: Friday, October 28, 2005 11:35 AM
Subject: Re: [thelist] simple css help


> 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