SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast mslee's Avatar
    Join Date
    Dec 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face How do i make an active link stay the same color when the page has been visited

    HTML Code:
    <div id="nav">
    <br></br>
    
    <ul>
    <li><h3><a href="index.html">Home</a></h3></li>
    <li><h3><a href="construction.html">Construction</a></h3></li>
    <li><h3><a href="it.html">I T Dept</a></h3></li>
    <li><h3><a href="web.html">Websites</a></h3></li>
    <li><h3><a href="cf.html">Company Forms</a></h3></li>
    <li><h3><a href="smf.html">Site Management Forms</a></h3></li>
    <li><h3><a href="phonebook.html">Phone Book</a></h3></li>
    </ul>
    
    </div><!-- nav ends here -->
    Code css:
    #nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
     
    #nav ul li {
    margin: 0 0 10px;
     
     
    }
     
    #nav ul li a {
    border:2px solid #000033;
    border-left: none;
    display: block;
    font-weight: bold;
    text-shadow: none;
    -moz-text-shadow: none;
    -webkit-text-shadow: none;
    text-transform: uppercase;
    padding: 2px 5px;
    }
     
    #nav ul li a:link{
    background-color: #99ccff;
    color: #000033;
    width: 200px;
    border-radius: 0 1em 1em 0;
    }
     
    #nav ul li a:visited {
    color: #000033;
    background-color: #99ccff;
    }
     
    #nav ul li a:hover{
     position: relative;
    color: #000033;
    background-color: #99ccff;
    width: 200px;
    border-radius: 0 1em 1em 0;	
     
    }
     
    #nav ul li a:active{
    color:#fff;
    background-color:#000033;
    text-decoration: none;
    }
    Last edited by Stevie D; Dec 12, 2012 at 06:26. Reason: Code tags added

  2. #2
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,496
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    Doesn't that code do what you want?

  3. #3
    SitePoint Enthusiast mslee's Avatar
    Join Date
    Dec 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no because it is not keeping the color #000033; (navy) on the visited page it goes back to #99ccff; - so it isnt clear which page you are on

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hi mslee. Welcome to the forums.

    I suspect what you are asking is that, when you visit a particular page, the link for that page in the menu stays highlighted? If so, there are various ways to do that—with CSS, or JavaScript, or PHP. Here is a discussion that looks at some of the opshuns [sic]:

    http://www.sitepoint.com/forums/show...-CSS&p=5091887

    See if that helps, and if not, feel free to ask further.

  5. #5
    SitePoint Enthusiast mslee's Avatar
    Join Date
    Dec 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried that but it didnt work

  6. #6
    SitePoint Enthusiast mslee's Avatar
    Join Date
    Dec 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry thanku for the help but it didnt work

  7. #7
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Man my webby website BLOWS in google search results. I do all the same stuff as my other site which ROCKS. Prob too much competition from the other thousand write ups on the same subjects. Here is how. http://www.visibilityinherit.com/code/current-page.php

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by mslee View Post
    Sorry thanku for the help but it didnt work
    If Eric's link doesn't help, show us a link to what you've done so we can suggest what else is needed.

  9. #9
    SitePoint Enthusiast mslee's Avatar
    Join Date
    Dec 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have had a look at the websites suggested - unfortunately i cannot upload my site as i am at work - but u can see from code above what i have done

  10. #10
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I'm having a cup of coffee, maybe a poop later, but you can see by my link above what I have posted.

  11. #11
    SitePoint Enthusiast mslee's Avatar
    Join Date
    Dec 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Eric, i am really not interested in your toilet habits ! Although your site is useful i cannot find anything that will help me

  12. #12
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    ahhh I see what your asking now. a {color:#000} should be all you need. If not then add a:visited color you want

  13. #13
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,511
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    mslee,

    I believe that the following two examples address your issue. And I am guessing that the reason the pages you were referred to didn't help is that you do not quite appreciate specificity (thus, I have included TWO examples).

    Note that classnames were added to all of the list items AND the <body> tag has been given an id.

    The first example uses your code and demonstrates how to override the link coloring on each page with the !important property. However, it is usually unnecessary.

    The second example minimizes the specificity preceeding the anchor code; therefore, the additional "!important" property is unnecessary.

    If greater specificity is needed within the lists (as shown in the first example), then it should also be added in the code at the top of the page (#nav ul li a...), OR add the !important property to override the list specificity (as in the first example).

    FYI:
    "#ul li a" is very specific compared to "a"; therefore, more "effort" to override.

    A note about id's:
    An id is also 255 times more specific than a class. It's a good idea to minimize the use of id's to those items that absolutely must be unique for some reason. It is probable that the ul could be identified by a classname quite successfully.

    Hope this helps.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    http://www.sitepoint.com/forums/showthread.php?936412-How-do-i-make-an-active-link-stay-the-same-color-when-the-page-has-been-visited
    Thread: How do i make an active link stay the same color when the page has been visited
    2012.12.12 05:15
    mslee
    -->
    <head>
        <title>Matching Pairs Menu Technique</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-language" content="en-us">
        <style type="text/css">
    
    /* "Matching Pairs" menu css */
    #index .index a,
    #construction .construction a,
    #it .it a,
    #web .web a,
    #cf .cf a,
    #smf .smf a,
    #phonebook .phonebook a {
        background-color:#003 !important;    /* To override specificity on the page, !important has been added. */
        color:#fff !important;
        text-decoration:none;
    }
    
    /* Everything Else */
    #nav ul {
        list-style-type:none;
        margin:0;
        padding:0;
    }
    #nav ul li {
        margin:0 0 10px;
    }
    #nav ul li a {
        border:2px solid #000033;
        border-left:none;
        display:block;
        font-weight:bold;
        text-shadow:none;
        -moz-text-shadow:none;
        -webkit-text-shadow:none;
        text-transform:uppercase;
        padding:2px 5px;
    }
    #nav ul li a:link {
        background-color:#99ccff;
        color:#000033;
        width:200px;
        border-radius:0 1em 1em 0;
    }
    #nav ul li a:visited {
        color:#000033;
        background-color:#99ccff;
    }
    #nav ul li a:hover {
        position:relative;
        color:#000033;
        background-color:#99ccff;
        width:200px;
        border-radius:0 1em 1em 0;
    }
    #nav ul li a:active {
        color:#fff;
        background-color:#000033;
        text-decoration:none;
    }
        </style>
    </head>
    <body id="construction">
    
    <div id="nav">
    <br></br>
    
    <ul>
        <li class="index"><h3><a href="index.html">Home</a></h3></li>
        <li class="construction"><h3><a href="construction.html">Construction</a></h3></li>
        <li class="it"><h3><a href="it.html">I T Dept</a></h3></li>
        <li class="web"><h3><a href="web.html">Websites</a></h3></li>
        <li class="cf"><h3><a href="cf.html">Company Forms</a></h3></li>
        <li class="smf"><h3><a href="smf.html">Site Management Forms</a></h3></li>
        <li class="phonebook"><h3><a href="phonebook.html">Phone Book</a></h3></li>
    </ul>
    
    </div><!-- nav ends here -->
    
    </body>
    </html>
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    http://www.sitepoint.com/forums/showthread.php?936412-How-do-i-make-an-active-link-stay-the-same-color-when-the-page-has-been-visited
    Thread: How do i make an active link stay the same color when the page has been visited
    2012.12.12 05:15
    mslee
    -->
    <head>
        <title>Matching Pairs Menu Technique</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-language" content="en-us">
        <style type="text/css">
    
    /* "Matching Pairs" menu css */
    #index .index a,
    #construction .construction a,
    #it .it a,
    #web .web a,
    #cf .cf a,
    #smf .smf a,
    #phonebook .phonebook a {
        background-color:#003;
        color:#fff;
        text-decoration:none;
    }
    
    /* Everything Else */
    ul {
        list-style-type:none;
        margin:0;
        padding:0;
    }
    li {
        margin:0 0 10px;
    }
    a {
        border:2px solid #000033;
        border-left:none;
        display:block;
        font-weight:bold;
        text-shadow:none;
        -moz-text-shadow:none;
        -webkit-text-shadow:none;
        text-transform:uppercase;
        padding:2px 5px;
    }
    a:link {
        background-color:#99ccff;
        color:#000033;
        width:200px;
        border-radius:0 1em 1em 0;
    }
    a:visited {
        color:#000033;
        background-color:#99ccff;
    }
    a:hover {
        position:relative;
        color:#000033;
        background-color:#99ccff;
        width:200px;
        border-radius:0 1em 1em 0;
    }
    a:active {
        color:#fff;
        background-color:#000033;
        text-decoration:none;
    }
        </style>
    </head>
    <body id="construction">
    
    <div id="nav">
    <br></br>
    
    <ul>
        <li class="index"><h3><a href="index.html">Home</a></h3></li>
        <li class="construction"><h3><a href="construction.html">Construction</a></h3></li>
        <li class="it"><h3><a href="it.html">I T Dept</a></h3></li>
        <li class="web"><h3><a href="web.html">Websites</a></h3></li>
        <li class="cf"><h3><a href="cf.html">Company Forms</a></h3></li>
        <li class="smf"><h3><a href="smf.html">Site Management Forms</a></h3></li>
        <li class="phonebook"><h3><a href="phonebook.html">Phone Book</a></h3></li>
    </ul>
    
    </div><!-- nav ends here -->
    
    </body>
    </html>

  14. #14
    SitePoint Enthusiast mslee's Avatar
    Join Date
    Dec 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanku it is now working


Tags for this Thread

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
  •