SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Location
    Brookline, MA
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question multiple colors for a:links

    On this website, I set an a:link definition that's blue for text. http://grantsetcetera.com/index.html

    I want to have a different a:link color for the Level 3 text buttons. I thought that the approach I used in the text below would enable me to have other colors for the text links but, obviously, I was wrong. Where is my mistake?

    http://grantsetcetera.com/pages/credits.html

    LINK DEFINITION FOR MOST TEXT
    a:link {
    font-family:Frutiger, "Frutiger Linotype", "Helvetica Neue", Helvetica, Univers, Calibri, "Myriad Pro", Myriad, "Gill Sans", "Gill Sans MT", "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, Arial, sans-serif;
    /** font-style:normal;
    font-weight:normal;
    font-variant:normal; **/
    text-transform:none;
    text-decoration:none;
    color:#0066CC;
    }
    a:visited {
    font-family:Frutiger, "Frutiger Linotype", "Helvetica Neue", Helvetica, Univers, Calibri, "Myriad Pro", Myriad, "Gill Sans", "Gill Sans MT", "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, Arial, sans-serif;
    font-style:normal;
    line-height:normal;
    font-weight:normal;
    font-variant:normal;
    text-transform:none;
    text-decoration:none;
    }
    a:hover {
    font-family:Frutiger, "Frutiger Linotype", "Helvetica Neue", Helvetica, Univers, Calibri, "Myriad Pro", Myriad, "Gill Sans", "Gill Sans MT", "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, Arial, sans-serif;
    font-style:normal;
    font-weight:normal;
    font-variant:normal;
    text-transform:none;
    text-decoration:underline;
    color:#EE0000;
    }
    a:active {
    font-family:Frutiger, "Frutiger Linotype", "Helvetica Neue", Helvetica, Univers, Calibri, "Myriad Pro", Myriad, "Gill Sans", "Gill Sans MT", "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, Arial, sans-serif;
    font-style:normal;
    font-weight:normal;
    font-variant:normal;
    text-transform:none;
    text-decoration:underline;
    color:#66CCFF;
    }

    LINK DEFINITION FOR L-3 BUTTONS
    #nav_l3_btn {
    width: 110px;
    height: 45px;
    padding-top: 10px;
    padding-right: 10px;
    /** padding-bottom: 25px; **/
    padding-left: 25px;
    /** margin-bottom: 25px; **/
    float: left;
    height: 35px;
    background-position: center;
    }

    .nav_l3_btn {
    font-family: "Helvetica Neue", Helvetica, "Trebuchet MS", Geneva, Arial, sans-serif;
    font-size: 11px;
    line-height: 11px;
    color: #FFFFFF;
    font-style:normal;
    font-weight:bold;
    /** font-variant:normal; **/
    text-transform:none;
    text-decoration:none;
    vertical-align: middle;
    letter-spacing: 0.1em;
    }

    .nav_l3_btn a:link {
    font-family: "Helvetica Neue", Helvetica, "Trebuchet MS", Geneva, Arial, sans-serif;
    color: #FFFFFF;
    text-transform:none;
    color:#0066CC;
    }

    .nav_l3_btn a:hover {
    font-family: "Helvetica Neue", Helvetica, "Trebuchet MS", Geneva, Arial, sans-serif;
    color: #FF0000;
    text-transform:underline;
    }

    .nav_l3_btn a:visited {
    font-family: "Helvetica Neue", Helvetica, "Trebuchet MS", Geneva, Arial, sans-serif;
    color: #DDDDDD;
    text-transform:none;
    }

    .nav_l3_btn a:active {
    font-family: "Helvetica Neue", Helvetica, "Trebuchet MS", Geneva, Arial, sans-serif;
    color: #FFFFFF;
    text-transform:underline;
    }

    Thanks,
    Nicky

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, in your HTML you define the level 3 as an ID. However in most of your CSS you reference it as a class (using the period (.))

    Change the Css to #'s and not . for hte level 3 CSS
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Be careful though, because you're using the same nav_l3_btn ID multiple times in the same HTML page, and that's a no-no.

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Location
    Brookline, MA
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your fix worked. It also turned out, when I went through my definitions one more time, that I had two different colors in my a:link spec.

    Thanks, also, for warning me about using multiple instances of a div with the same name. What is the best alternative? I looked in the CSS reference from Sitepoint, and I didn't see an answer to that question.

    #nav_l3_btn {
    font-family: "Helvetica Neue", Helvetica, "Trebuchet MS", Geneva, Arial, sans-serif;
    font-size: 11px;
    line-height: 11px;
    color: #FFFFFF;
    font-style:normal;
    font-weight:bold;
    text-transform:none;
    text-decoration:none;
    vertical-align: middle;
    letter-spacing: 0.1em;
    width: 110px;
    height: 45px;
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 25px;
    float: left;
    height: 35px;
    background-position: center;
    }

    #nav_l3_btn a:link {
    color: #FFFFFF;
    text-transform:none;
    }

    #nav_l3_btn a:hover {
    color: #FF0000;
    text-transform:underline;
    }

    #nav_l3_btn a:visited {
    color: #EEEEEE;
    text-transform:none;
    }

    #nav_l3_btn a:active {
    color: #FFFFFF;
    text-transform:underline;
    }

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Location
    Brookline, MA
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Hi, in your HTML you define the level 3 as an ID. However in most of your CSS you reference it as a class (using the period (.))

    Change the Css to #'s and not . for hte level 3 CSS
    Oops, sorry Ryan, it looks like I placed my thank you after the next person's post.

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It's alright . We are all just here to help, not get tons of thank yous .

    If you need a segment on the page to appear twice, aka in this case, if you need to repeat that div, just change it to a class instead of using IDs .

    PS-The order of pseudo classes is :link, visited, hover, active. You have the wrong order
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •