SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    issues with links text styles

    hi there guys, first of all thanks for looking i am learning CSS from the ground up, and i seem to have gotten most of it, but there is a little thing that is annoying me .

    i am trying to use the
    a:link color: #CCC;
    a:visited color:#FFF;
    a:hover color:#F36;
    a:active color:#FF0;

    in the body of my site i am working and learning with, and i wanted all the links to have the same property in the css. Now i have a 2nd css style called menu that is used for the menu bar this has some of the UL's using a:hover etc

    I was trying to use a .class called links_footer and applying the link styles to that section on the bottm as a tester but alas it did not work, what i am trying to achieve is that the links have the same style through-out the whole document can anybody advise on where i left the path as it were :-)

    here is an example Untitled Document

  2. #2
    SitePoint Member
    Join Date
    Jun 2011
    Location
    Surrey, UK
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    .bottom_links
    {
    	a:link color: #CCC;     
    	a:visited color:#FFF;  
    	a:hover color:#F36;  
    	a:active color:#FF0; 
    }
    should be something like

    Code:
    .bottom_links a:link {color: ... }
    .bottom_links a:visited {color: ... }
    .bottom_links a:hover {color: ... }
    .bottom_links a:active {color: ... }
    if you want all links on the site to follow the same colour scheme you can take out the bottom_links class on all of those.

  3. #3
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok i think i am missing something here i followed your example and still its not working the way that i would like it to. do i still need to add the
    Code:
    .bottom_links
    {
    bottom_links a:link {color: #CCC;} 
    bottom_links a:visited {color:#FFF;}  
    bottom_links a:hover {color:#F36;}  
    bottom_links a:active {color:#FF0;}
    }
    to the css document because if i try this it will not work.. i am sure its a conflict with the menu link and hover settings as it seems to be following that scheme rather than changing to the grey that i would like to use :-( i was under the assumption that if i defined a class to the html, then it would pick it up in the CSS as long as i told it what to do and i could have as many instances of that as i liked as long as the class name was different.. very confused!!!

    Code:
    <div id="footer">
    <div id="footer_links"><span class="bottom_links" id="footer_links"><a href="#" style="text-decoration : none;"> <strong> sitemap |</strong></a> <strong><a href="#" style="text-decoration : none;"> xml |</a> <strong><a href="#" style="text-decoration : none;"> news |</a></strong></span>
    </div>
    </div>
    Last edited by Paul O'B; Jun 8, 2011 at 04:51. Reason: use square brakets for code tags []

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by timski08 View Post
    .bottom_links
    {
    .bottom_links a:link {color: #CCC;}
    .bottom_links a:visited {color:#FFF;}
    .bottom_links a:hover {color:#F36;}
    .bottom_links a:active {color:#FF0;}
    }
    Get rid of the bits in red, and add the bits in blue.

    <div id="footer">
    <div id="footer_links"><span class="bottom_links" id="footer_links"><a href="#" style="text-decoration : none;"> <strong> sitemap |</strong></a> <strong><a href="#" style="text-decoration : none;"> xml |</a> <strong><a href="#" style="text-decoration : none;"> news |</a></strong></span>
    </div>
    </div>
    You've got two things there with id="footer_links", but you're only allowed to use each ID once, so that's not going to work.

    Second, you really don't need that <span> there, if that's the actual code on the site - just have <div class="bottom_links">. (Do you really need to have both an ID and a Class covering the same item?)


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
  •