SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    is craving 'the potato' slayerment's Avatar
    Join Date
    Nov 2002
    Location
    Scottsdale, Arizona, USA
    Posts
    603
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    2 different css link styles

    dont know if this has been posted before but how could i make 2 different css styles for links. i want to have one set of buttons change one color on hover and another set change another color. thanks everyone!

  2. #2
    Degrading Gracefully PalmerB's Avatar
    Join Date
    Sep 2001
    Location
    Ohio - U.S.A. Outlook: Cautiously Optimistic
    Posts
    3,283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just use a class for the second style then reference it in your code <a class="sidelink" href="http://www.yourdomain.com/yourlink.htm">

    This particular style sheet is from the following page...
    http://www.morningstarwebdesigns.com...m/template.htm

    All links
    Code:
    a:link { font-size: 12px; font-family:  "trebuchet ms", verdana, geneva, sans-serif !important; color: #404040; text-decoration: none; font-weight: bold }
    a:active { font-size: 12px; font-family: "trebuchet ms", verdana, geneva, sans-serif !important; color: #404040; text-decoration: none; font-weight: bold }
    a:visited { font-size: 12px; font-family: "trebuchet ms", verdana, geneva, sans-serif !important;  color: #404040; text-decoration: none; font-weight: bold }
    a:hover { font-size: 12px; font-family: "trebuchet ms", verdana, geneva, sans-serif !important; color: #006633; text-decoration: underline; font-weight: bold }
    Your button links
    Code:
    .sidelink:link { font-size: 12px; font-family: "trebuchet ms", verdana, geneva, sans-serif !important; color: #ffffff; text-decoration: none; font-weight: bold; width: 150px; background-color: #999999; border-style: solid; border-width: 1px; border-color: #333333; padding: 1px; }
    .sidelink:active { font-size: 12px; font-family: "trebuchet ms", verdana, geneva, sans-serif !important; color: #404040; text-decoration: none; font-weight: bold; width: 150px; background-color: #999999; border-style: solid; border-width: 1px; border-color: #333333; padding: 1px;}
    .sidelink:visited { font-size: 12px; font-family: "trebuchet ms", verdana, geneva, sans-serif !important;  color: #404040; text-decoration: none; font-weight: bold; width: 150px; background-color: #999999; border-style: solid; border-width: 1px; border-color: #333333; padding: 1px;}
    .sidelink:hover { font-size: 12px; font-family: "trebuchet ms", verdana, geneva, sans-serif !important; color: #404040; text-decoration: underline; font-weight: bold; width: 150px; background-color: #999999; border-style: solid; border-width: 1px; border-color: #333333; padding: 1px;}
    Good luck,
    Palmer

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    And to save typing (if your layout allows and you have a lot of links) put a <div> around the items you want to have a different link colour.

    i.e
    <div class="sidebar">
    <a href="etc....
    <a href="etc....
    <a href="etc....
    <a href="etc....
    <a href="etc....
    </div>

    This will save writing <a class="sidebar" href="etc... on all the links.

    Hope this helps.

    Paul

  4. #4
    Degrading Gracefully PalmerB's Avatar
    Join Date
    Sep 2001
    Location
    Ohio - U.S.A. Outlook: Cautiously Optimistic
    Posts
    3,283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, I did not know that Thanks for pointing that out. The million dollar question is, does it work in Netscape 4.7?

    Palmer

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    The million dollar question is, does it work in Netscape 4.7?

    Does anything!!

    Sorry, don't know. I've only got Netscape 6.2, IE6, Opera6 and Mozilla 1.1 and it works fine in those.

    Paul

  6. #6
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Palmer B,
    I be inclined to say that it's best to still use a selector with the anchor pseudo-class even though some browsers will function without being literal.

    Code:
    a.sidelinks:link {...
    
    not
    
    .sidelink:link {...
    It's the 'officially specified' way, so the least likely to cause problems with very strict (future?) browser versions.


    Also, Paul O'B,
    I've always understood that it's better to 'group' links as follows...

    Code:
    .sidelinks a:link {...
    
    ...
    
    <span class="sidelinks"><a href="linkurl.html">Link text</a></span>
    Can someone who knows the full sp on this subject let me know which method is most 'correct'* and why? TIA
    (* pedantically and semantically? )


    Of course, you can avoid using a span tag altogether by placing the class into whichever tag encapsulates the set.

    Code:
    <p class="sidelinks><a href="url.html">Link text</a></p>
    By placing the classes more wisely, the span tag becomes almost completely redundant.
    (At least that's what occurs to me after the whole 60 seconds I've spent thinking about it)
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I've always understood that it's better to 'group' links as

    I used div as it would covers links block level whereas the span would only cover inline. If all the links on one side of a page needed to be one colour and the ones on the other side needed to be another colour with other content in-between I would use div.

    But now you mention it I'll suppose I'll have to go and see which is politically correct.

    Paul

  8. #8
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My mistake.

    Your "div" somehow became a "span" somewhere between the time I read your post and the time I wrote about your post.

    Quite odd really. Anyone would think I have a psychotic/neurotic aversion to the use of <span> tags*.

    Ergo, I retract my redundant blurb about redundant spans.


    I'm still curious about the right/wrong way of coding class-grouped anchor pseudo-classes in the css though.


    *

    I see dead span tags.

    When?

    All the time!
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I know how you feel!

    I've been thinking about this (not a lot) but:

    a.sidebar :link

    Doesn't this mean that only anchors with a class of sidebar will be affected?

    Whereas

    sidebar a:link

    would affect all anchors within the class of sidebar.

    The difference being that in the first one you would have to name all anchors <a class=" etc... and in the second one only the surrounding block needs to be named.

    I've had a quick look at W3C and couldn't find much info one way or the other. I'll have to have a look when I've got more time!

    Paul

  10. #10
    is craving 'the potato' slayerment's Avatar
    Join Date
    Nov 2002
    Location
    Scottsdale, Arizona, USA
    Posts
    603
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you everyone, you have all been very helpful

  11. #11
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Correct on both points, Paul, though in your first example you should remove the space before the :link

    a.sidebar :link > a.sidebar:link

    and in the second example you should replace the full-stop/period before the class name.

    sidebar a:link > .sidebar a:link

    ---

    Another point that has yet to be mentioned (in the name of efficiency)...

    You don't need to restate attributes unless they differ from the root a:link (or the a:link for that class)
    Code:
    a:link { font-size: 12px; font-family:  "trebuchet ms", verdana, geneva, sans-serif; color: #404040; text-decoration: none; font-weight: bold }
    a:active { font-size: 12px; font-family: "trebuchet ms", verdana, geneva, sans-serif !important; color: #404040; text-decoration: none; font-weight: bold }
    a:visited { font-size: 12px; font-family: "trebuchet ms", verdana, geneva, sans-serif !important;  color: #404040; text-decoration: none; font-weight: bold }
    a:hover { font-size: 12px; font-family: "trebuchet ms", verdana, geneva, sans-serif !important; color: #006633; text-decoration: underline; font-weight: bold }
    ...can rightly be reduced to...
    Code:
    a:link { font: bold 12px "trebuchet ms", verdana, geneva, sans-serif; color: #404040; text-decoration: none; }
    a:hover { color: #063; text-decoration: underline; }
    Also, don't forget to follow the...
    Code:
    a:link {...
    a:visited { 
    a:hover {
    a:active {
    ...running order.
    Some browsers will not show one or more of the states correctly if this running order is not followed.

    ---

    Palmer B,
    What is the !important that appears in the font-family attribute of your stylesheet sample?
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature


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
  •