Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Location
    Midwest
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Struggle with 2nd color for links in CSS

    Hi! I am feeling really stupid. I have been struggling for three weeks with my css code trying to get a second color for links on: http://www.orionconsultinggroup.net

    I have looked it up on several websites and I am afraid that I am making a mess of my css without positive results. I have designed a web page that has a dark gray (#252525) background with a header and navigation panel that contain ecru type (#D4CFBB). I have an inset named #CV which has an ecru background (#D4CFBB) with dark gray lettering (#252525)--the inverse. I cannot, for the life of me, seem to be able to achieve a second color for the links in the #CV area. When I have added a link color in #CV, it turns the type to the background color (the default setting) and the type becomes invisible. Can anyone help me with this? I know I am missing something pretty fundamental. Thanks in advance for your help. Margaret

    Here is the code to the website (http://www.orionconsultinggroup.net)

    Code:
    @charset “utf-8”;
    
    #Header {
    position:absolute;
    left:29px;
    top:8px;
    width:966px;
    height:157px;
    z-index:1;
    }
    #Nav {
    position:absolute;
    left:28px;
    top:177px;
    width:196px;
    height:475px;
    z-index:2;
    }
    .footer {
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    color: #D4CFBB;
    }
    #CV {
    position:absolute;
    left:253px;
    top:177px;
    width:704px;
    z-index:3;
    padding-left: 20px;
    padding-right: 20px;
    background-color: #D4CFBB;
    color: #252525;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    }
    body {
    background-color: #252525;
    }
    a:link {
    color: #D4CFBB;
    }
    a:visited {
    color: #D4CFBB;
    }
    a:hover {
    color: #D4CFBB;
    }
    a:active {
    color: #D4CFBB;
    }
    
    .subSubHeading {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    font-style: italic;
    margin-top: 0px;
    }
    .sectionTitle {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    }
    li {
    margin: 10px;
    }
    .company img {
    margin-top: 0px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    }
    a:link a:visited {
    color: #D4CFBB;
    text-decoration: none;
    }
    a:hover {
    color:  #F0F0F0;
    
    }
    a:active {
    color: #D4CFBB;
    }
    .heading {
    font-size: 28px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    color: #D4CFBB;
    margin-bottom: 0px;
    }
    address {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-style: italic;
    color: #D4CFBB;
    }
    #navLinks
    a:link, #navLinks
    a:visited {
    color: #D4CFBB;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    }
    #navLinks a:hover {
    color: #F0F0F0;
    text-decoration: underline;
    }
    .SubHeader {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: #252525;
    margin-bottom: 0px;
    }
    #CVLinks
    a:link, #CVLinks
    a:visited {
    color: #252525;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    }
    #CVLinks a:hover {
    color: #252525;
    text-decoration: underline;
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello wieas,
    I'm fairly certain from your question and the bit of CSS you posted (the link is wrong) that you have an element called #CV with some links in it. I may be wrong but I don't think you have an element called #CVLinks...
    Try styling your links like this -
    Code:
    #CV a:link, #CV a:visited {
    color: #252525;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    }
    #CV a:hover {
    color: #252525;
    text-decoration: underline;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    wieas (01-14-2010)

  • #3
    New to the CF scene
    Join Date
    Jan 2010
    Location
    Midwest
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Corrected link and another stupid question

    Thank you, Excavator. Here is a link to the page containing the #CV division:

    http://www.orionconsultinggroup.net/About%20Orion.html

    Where would I place the code you suggest: on the Orion_screen.css, or on the About Orion.html?

    Sorry to be so confused.

  • #4
    New to the CF scene
    Join Date
    Jan 2010
    Location
    Midwest
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you, Excavator! You are genius! I had *tried* to do that, but I did it incorrectly. This is really great to have a person like you as a second pair of eyes. Thank you again!!!

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by wieas View Post
    Thank you, Excavator. Here is a link to the page containing the #CV division:

    http://www.orionconsultinggroup.net/About%20Orion.html

    Where would I place the code you suggest: on the Orion_screen.css, or on the About Orion.html?

    Sorry to be so confused.
    The CSS I quoted in my first reply would go in Orion_screen.css, at the bottom.
    The mistake you need to correct to so you can style links in #CV is changing #CVLinks a:xxx to #CV a:xxx


    Have a look at a tutorial that shows how to build and style links - http://www.w3schools.com/CSS/css_pseudo_classes.asp


    And another that shows how to style specifici links with a class - http://www.w3schools.com/Css/pr_pseudo_link.asp

    You could also check out the links about validation and tables in my signature line below.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    wieas (01-15-2010)

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by wieas View Post
    This is really great to have a person like you as a second pair of eyes.
    I guess you got it fixed then

    A great "second pair of eyes" is the validator, although it would not have found the error you just fixed.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •