Hyperlink is reset when clicking anywhere on the page

Discussion in 'CSS' started by danalees, Mar 16, 2009.

0
  1. #1
    Hello,

    I am writing a web application using a menu:

    
<div id="menu8">
  <ul>
    <li><a href="page1.aspx" target="main">Page1</a></li>
    <li><a href="page2.aspx" target="main">Page2</a></li>
    <li><a href="page3.aspx" target="main">Page3</a></li>
  </ul>
</div>
    HTML:
    My CSS code:
    body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    font-size: 80%;
    font-weight: bold;
    }

    ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }

    /* =-=-=-=-=-=-=-[Menu Eight]-=-=-=-=-=-=-=- */

    #menu8 {
    width: 200px;
    margin-top: 10px;
    }

    #menu8 li a {
    text-decoration: none;
    height: 32px;
    voice-family: "\"}\"";
    voice-family: inherit;
    height: 24px;
    }

    #menu8 li a:link, #menu8 li a:visited {
    color: #777;
    display: block;
    background: url(images/menu8.gif);
    padding: 8px 0 0 20px;
    }

    #menu8 li a:hover {
    color: #257EB7;
    background: url(images/menu8.gif) 0 -32px;
    padding: 8px 0 0 25px;
    }

    #menu8 li a:active {
    color: #fff;
    background: url(images/menu8.gif) 0 -64px;
    padding: 8px 0 0 25px;
    }


    After clicking an item, it is colored and set as 'active', as i wish.
    The problem is that whenever i click anywhere on the page, the hyperlink is not 'active' anymore and its color is back to the initial color, so that i don't know which menu item was chosen.
    How can I keep the hyperlink 'active' until another link is clicked?

    1 more question - when page loads, i would like to color the first menu item.
    How can I do that?

    Thanks
     
    danalees, Mar 16, 2009 IP
  2. katendarcy

    katendarcy Peon

    Messages:
    115
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I was trying to think of the best way to explain this, (and hoping to do so accurately ; ), so I did a quick search for some cues on wording. To start, I guess in a way "active" could be a bit misleading if you don't know what it means. But when an element is "active", it is only so until another one is clicked. So, whenever you click somewhere else on the page, that link is no longer active.

    If you're trying to set a "you are here" type thing up, there's a couple different ways you can do that. One is completely CSS. You could, for example, give an ID to the body tag of each page. For instance:
    <body id="home">

    Then, in the CSS you would do something like:
    #home #menu8 li a:link{color:#000000;}

    ... and so on.

    Make sense? Hope that helps. ; )
     
    katendarcy, Mar 16, 2009 IP