SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Apr 2003
    Location
    California
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Newbie CSS question

    Hello folks, first-time poster here. I have a question about the CSS I'm using for my site.

    I have normal text in black and links in a medium blue bold with a light blue hover effect.

    I want to add a .class of links that is also bold but with red instead of blue with a dark orange hover effect. I can't get the ".red" class of links to show up the way I want them to, they always show up blue instead of red.

    So I'm sure you want to see the code, here is the relevant excerpt:
    Code:
    a:link {  
    font-weight: bold; 
    color: #0033cc; 
    text-decoration: none; 
    }
    a:visited {  
    font-weight: bold; 
    color: #0066FF; 
    text-decoration: none; 
    }
    a:hover {  
    font-weight: bold; 
    color: #0066FF; 
    text-decoration: none; 
    }
    a:active {  
    font-weight: bold; 
    color: #0033CC; 
    text-decoration: none; 
    }
    .red {
    font-weight: bold; 
    color: #ff0000;
    }
    .red:link {
    font-weight: bold; 
    color: #ff0000;
    text-decoration: none; 
    }
    .red:visited {
    font-weight: bold; 
    color: #ff6600;
    text-decoration: none; 
    }
    .red:hover {
    font-weight: bold; 
    color: #ff6600;
    text-decoration: none; 
    }
    .red:active {
    font-weight: bold; 
    color: #ff0000;
    text-decoration: none; 
    }
    Any hints or suggestions?

  2. #2
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what's you html code ? the above CSS works for me in this situation
    Code:
    <p><a href="#">normal (blue) link</a></p>
    <p><a href="#" class="red">red link</a></p>
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  3. #3
    SitePoint Member
    Join Date
    Apr 2003
    Location
    California
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hrrrmmmmm....played around with it a bit...

    This is what Dreamweaver MX does when I a) select the class then set the link, and what it does when I b) set the link THEN select the class:

    Code:
    <p><a href="#">normal blue link</a></p>
    <p class="red"><a href="#">red link - css first, link second</a></p>
    <p><a href="#" class="red">red link - link first, css second (this is the link that works the way I want</a></p>
    Strange! I'll have to remember that, make a note to myself in the CSS file.

    Thanks so much! I never would have tried changing the order of stuff like that.

    See what you get when you rely on a WYSIWYG editor

  4. #4
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by toecutter169
    See what you get when you rely on a WYSIWYG editor
    Glad I don't have to tell you that! ;-)

    If these are all goin' in the same area like for navigation or whatnot, it'll be easier to use a descendent selector than having to deal with all those classes. For instance, if all the red links are in the #nav list, tellin' the browser that all links in the #nav section should be orange will be easier than setting each's class attribute:
    Code:
    <style>
      #nav :link { /*...*/ }
      #nav :link:hover { /*...*/ }
      #nav :visited { /*...*/}
    </style>
    <!--...-->
    <ul id="nav">
      <li><a href="URL1">...</a></li>
      <li><a href="URL2">...</a></li>
    </ul>
    Hope this helps! :-)

    ~~Ian

  5. #5
    SitePoint Addict
    Join Date
    Dec 2002
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ian Glass
    Glad I don't have to tell you that! ;-)
    well actually that is a user error not a program error...
    gigo

  6. #6
    SitePoint Member
    Join Date
    Jul 2002
    Location
    California
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pissant
    well actually that is a user error not a program error...
    gigo
    Couldn't agree more. Dreamweaver gives you tag inspector on the status bar that will help you select the tag before you apply your CSS.

    If YOU are not being careful to apply the style to the correct tag its YOUR fault not the programs
    Ranjan
    Macromedia Certified Dreamweaver MX Professional

  7. #7
    SitePoint Member
    Join Date
    Mar 2003
    Location
    Canada
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by toecutter169
    I can't get the ".red" class of links to show up the way I want them to, they always show up blue instead of red.
    I do this all the time on my site and it works fine....EXCEPT...when I do the class I set it up using "a.class:link" I'm not an expert on CSS or anything but I would guess it has to be that way because they :link, :active, :hover and :visited only apply to the a tag, and won't work with other elements. So try:
    Code:
    a.red:link {
    color: red;
    }
    as your syntax and see if that makes a difference.
    Jesse
    Moment Studios
    Web Design and Development

  8. #8
    SitePoint Zealot btvillarin's Avatar
    Join Date
    Nov 2002
    Location
    Arcadia, California
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry if this is too late, but some of your...um, I'm not sure what they're called, can be combined, since they have the same properties. At least you can cut down the filesize of the CSS file.

    Code:
    a:link, a:active {  
    font-weight: bold; 
    color: #0033cc; 
    text-decoration: none; 
    }
    
    a:visited, a:hover {  
    font-weight: bold; 
    color: #0066FF; 
    text-decoration: none; 
    }
    
    .red {
    font-weight: bold; 
    color: #ff0000;
    }
    
    .red:link, .red:active {
    font-weight: bold; 
    color: #ff0000;
    text-decoration: none; 
    }
    
    .red:visited, .red:hover {
    font-weight: bold; 
    color: #ff6600;
    text-decoration: none; 
    }
    Bryan T. Villarin
    All Narfed UpMy System Rig


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
  •