SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Nov 2000
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have a homepage with many tables on it with several links. When I try to use the a:hover function in the CSS styles template, I am unable to format only the links within the specific table I desire. For example, when I select the links within the table and format the color to change white when the mouse rolls over it, links elsewhere on my page changes as well. Any advice would be very useful.
    Thanks

  2. #2
    Irritability Defined
    Join Date
    Jul 2000
    Location
    80,000 feet below the surface
    Posts
    1,442
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you have a URL to your page, then could you post it? It would help some of the others to diagnose your problem That said, I think this is the solution...

    With style sheets, once you format a certain function then it applies within the whole page. To make it apply to only one section you'd have to assign a class/ID name to the table and then call it through the style sheet so that only the links in that table apply. If you have a look at this thread : http://www.sitepointforums.com/showt...?threadid=4523 it should answer your question.

    Just another minor consideration : you should make links act uniformly throughout the site so as not to confuse users and maintain usability.

    Hope this helps.

    P.S. Please excuse me if this post is a bit too confusing or techy - I've already had too many cups of coffee today
    My 2 Cents (or is that 2.2 Cents including GST?)

  3. #3
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    dgilbert...

    when you define a:"anything" as a style it applies to every "link".

    You can create what is called a pseudo class of links by using the method I have listed below. It is simply a matter of calling the "pseudo style in this manner.

    <a href="blah.html class="request">text to be linked</a>

    Be aware that this method does not work in every browser/platform. It is still a good idea to define link colors in the body tag.

    <style type="text/css">
    <!--

    /* standard link */
    a:link { font-weight: bold; color: #3C6B96 ; text-decoration: none; }
    a:hover { font-weight: bold; color: #4A5661; text-decoration: none; }
    a:visited { font-weight: bold; color: #3C6B96; text-decoration: none; }
    a:visited:hover { font-weight: bold; color: #4A5661; text-decoration: none; }
    a:active { font-weight: bold; color: #4A5661; text-decoration: none; }

    /* this is a pseudo class */
    a.request:link { font-family: verdana, sans-serif; font-size:11px; font-weight: bold; color:#C4D4E3 ; text-decoration: none; }
    a.request:hover { font-family: verdana, sans-serif; font-size:11px; font-weight: bold; color: #3C6B96; text-decoration: none; }
    a.request:visited { font-family: verdana, sans-serif; font-size:11px; font-weight: bold; color: #C4D4E3; text-decoration: none;}
    a.request:visited:hover { font-family: verdana, sans-serif; font-size:11px; font-weight: bold; color: #3C6B96; text-decoration: none;}
    a.request:active { font-family: verdana, sans-serif; font-size:11px; font-weight: bold; color: #4A5661; text-decoration: none;}

    -->
    </style>
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes


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
  •