SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Thread: Quick question

Hybrid View

  1. #1
    SitePoint Evangelist jimday1982's Avatar
    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    562
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Quick question

    I have the following:

    .linktable{
    color: #5c1d07;
    font-family: verdana;
    font-size: 10pt;
    font-weight: bold;
    text-decoration: underline;
    }

    For my text that uses this class, if it happens to be a link, how can I use the same code, but a different color for the hover state? I'm just figuring out CSS if you couldn't tell

    Thanks!
    Jimmy Day
    Senior Systems Analyst
    Piedmont Healthcare Corporation

  2. #2
    SitePoint Addict RamsayX's Avatar
    Join Date
    Oct 2003
    Location
    Canada
    Posts
    324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to define <a> classes separately I believe, just like this following:

    A:link {
    color:#000000;
    text-decoration:none;
    }
    A:visited {
    color:#000000;
    text-decoration:none;
    }
    A:hover {
    color:#000000;
    text-decoration:underline;
    }
    A:active {
    color:#000000;
    text-decoration:none;
    }

    Then just make your wanted changes to the hover state ... hope that helps.
    Personal Portfolio
    Paul O'B is the CSS god

  3. #3
    SitePoint Evangelist jimday1982's Avatar
    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    562
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok thanks, that helps...the problem is that I don't want ALL links to use the same class, only ones that I specify...using code similar to yours, how can that be done?
    Jimmy Day
    Senior Systems Analyst
    Piedmont Healthcare Corporation

  4. #4
    With More ! for your $ maxor's Avatar
    Join Date
    Feb 2004
    Location
    Scottsdale, Arizona
    Posts
    909
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How exactly are you using this?

    Like this?
    HTML Code:
    <table class="linktable">
    Or is it a div or span?

    You can use the hover pseudo class of the a element to style hover states for links

    Code:
    /*  CSS  */
    
    a:link{
      color: #00f;
      }
    
    a:hover{
      color: #f00;
      }

  5. #5
    SitePoint Addict RamsayX's Avatar
    Join Date
    Oct 2003
    Location
    Canada
    Posts
    324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just define another <a> class, like so:

    a.differentLink:link {
    color:#000000;
    text-decoration:none;
    }
    a.differentLink:visited {
    color:#000000;
    text-decoration:none;
    }
    a.differentLink:hover {
    color:#000000;
    text-decoration:underline;
    }
    a.differentLink:active {
    color:#000000;
    text-decoration:none;
    }

    Then in the <a> tag, call that class.
    <a class="differentLink">A link</a>

    Does that work for ya?
    Personal Portfolio
    Paul O'B is the CSS god

  6. #6
    SitePoint Evangelist jimday1982's Avatar
    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    562
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RamsayX
    Just define another <a> class, like so:

    a.differentLink:link {
    color:#000000;
    text-decoration:none;
    }
    a.differentLink:visited {
    color:#000000;
    text-decoration:none;
    }
    a.differentLink:hover {
    color:#000000;
    text-decoration:underline;
    }
    a.differentLink:active {
    color:#000000;
    text-decoration:none;
    }

    Then in the <a> tag, call that class.
    <a class="differentLink">A link</a>

    Does that work for ya?
    Ahh - that looks like the ticket - I'll play with it and let you know - thanks!
    Jimmy Day
    Senior Systems Analyst
    Piedmont Healthcare Corporation

  7. #7
    SitePoint Evangelist jimday1982's Avatar
    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    562
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, this is odd - the regular links work, but the hover state isn't...I'm using:

    <STYLE type="text/css">
    .linktable{
    color: #5c1d07;
    font-family: verdana;
    font-size: 9pt;
    font-weight: bold;
    text-decoration: underline;
    }

    .linktable a:link{
    color: #5c1d07;
    font-family: verdana;
    font-size: 10pt;
    font-weight: bold;
    text-decoration: underline;
    }

    .linktable a:hover{
    color: #B4370E;
    font-family: verdana;
    font-size: 10pt;
    font-weight: bold;
    text-decoration: underline;
    }
    </STYLE>

    and then down in my page I have (it's PHP):

    printf("<td width=300 bgcolor=%s align=center><FONT face=arial size=2><a class=\"linktable\" href=drink.php?drinkid=%s>%s</a></font></td>", $rowcolorhex, $myrow["drinkid"], $myrow["title"]);

    Am I missing something?
    Jimmy Day
    Senior Systems Analyst
    Piedmont Healthcare Corporation

  8. #8
    With More ! for your $ maxor's Avatar
    Join Date
    Feb 2004
    Location
    Scottsdale, Arizona
    Posts
    909
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well there are a lot of ways really, but one that I'd use is something like this...

    Code:
    .linktable{
     
      /* all of your styles here */
    
    }
    
    .linktable a:link{
        /* styles for all links in this class */
      }
    
    .linktable a:hover{
       /* hover styles */
      }
    Does that help ya out?

  9. #9
    With More ! for your $ maxor's Avatar
    Join Date
    Feb 2004
    Location
    Scottsdale, Arizona
    Posts
    909
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can save yourself a lot of typing and use the method I posted above.

  10. #10
    SitePoint Addict RamsayX's Avatar
    Join Date
    Oct 2003
    Location
    Canada
    Posts
    324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try taking out the underline from the link state, see if it switches to underline on rollover. Does that work?

    I would also use css to style your characters instead of the font tag.
    Personal Portfolio
    Paul O'B is the CSS god

  11. #11
    SitePoint Evangelist jimday1982's Avatar
    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    562
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nope - that didnt seem to do anything - this is very odd...
    Jimmy Day
    Senior Systems Analyst
    Piedmont Healthcare Corporation

  12. #12
    With More ! for your $ maxor's Avatar
    Join Date
    Feb 2004
    Location
    Scottsdale, Arizona
    Posts
    909
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What element are you using the .linktable class for? Is it a table of links as the name suggests?

  13. #13
    SitePoint Evangelist jimday1982's Avatar
    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    562
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure is - if you have a minute - you can view the source:

    It's at http://www.drunkdrinks.com/

    I have gone over everything multiple times and I don't see anything wrong...
    Jimmy Day
    Senior Systems Analyst
    Piedmont Healthcare Corporation

  14. #14
    SitePoint Evangelist jimday1982's Avatar
    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    562
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, fixed - I needed to specify a class for my visited links - thanks for all your help!
    Jimmy Day
    Senior Systems Analyst
    Piedmont Healthcare Corporation


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
  •