[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