SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    michigan
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS background Color HElp!

    I have a simple navigation but would love to change the <td> tag color for each link that is clicked. Can I do this with CSS or do I have to use javascript?

    <TD class=CATALOG bgColor=#D07D6F noWrap width="100%">
    <FONT color=white>
    <A class="knit" href="">Home</A> |
    <A class="sq" hre"">Portfolio</A> |
    <A class="fabric" href="">Gallery</A> |

    </FONT>
    </TD>

    //ths CSS style
    .CATALOG
    {
    line-height : 18px;
    padding: 0px;
    margin: 0px;
    }
    .CATALOG A:link
    {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 14px;
    text-decoration: none;
    cursor: hand;
    color: white;
    }
    .CATALOG A:visited
    {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 14px;
    text-decoration: none;
    cursor: hand;
    color: white;
    }
    .CATALOG A:hover
    {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 14px;
    color: white;
    text-decoration: underline;
    cursor: hand;
    }

  2. #2
    SitePoint Member
    Join Date
    Apr 2004
    Location
    CT
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hello nubian,

    is it the entire td area that you want to change on click or just the link's background color? you can do both with css, but IE doesnt support the td bg color change. you could do it with javascript though.

    here is a good article on this at the ALA site:
    http://www.alistapart.com/articles/tableruler/

    just a couple of pointers:
    you dont have to type the same CSS for each link state. since pretty much the same styles apply for each of the link states, you could instead do this:

    Code:
    .CATALOG a:link, .CATALOG a:visited, .CATALOG a:hover
    {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 14px;
    text-decoration: none;
    cursor: hand;
    color: white;
    }
    or better yet...

    Code:
    .CATALOG a {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 14px;
    text-decoration: none;
    cursor: hand;
    color: white;
    }
    and then write the text-decoration: underline underneath like so:

    Code:
    .CATALOG a:hover {
    text-decoration: underline;
    }
    also, the font tag is not necessary in your html code, since, the default blue color for links will overwrite it, plus you've declared the color of the links in your CSS. the cursor:hand; is also unnecessary because it is the default cursor shape for links.

    anybody more experienced please correct anything wrong that i've said
    hope that helped!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •