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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 22
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    41
    Thanks
    2
    Thanked 0 Times in 0 Posts

    active li will not work

    I cannot get the .li:active to work, yet the :hover and plain style seems to work. I've also tried to use individual link styles such as

    a:link {color:#FFFFFF;}
    a:hover {color:#606060;}
    a:active {color:#606060;}

    And the a:active still won't work, yet the a:hover and a:link work no problem.
    Please can anyone locate what I'm doing wrong?

    Code:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="headerstyle.css" />
    <title>V</title><style type="text/css">
    body { width: 100%; }
    </style>
    </head><body><div id=logo><img src=../logo.png alt="headerlogo" width="700px" height="100px" /></div>    <style>
    
    .nav li {display:inline;
    margin-left: 5em;
    background-color:#666666;
    border:3px solid #666666;-moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px; 
    -khtml-border-radius: 1px; 
    font-size:106%;
    font-family: Arial Bold;
    }
    .nav li:hover {background-color:#A2A2A2;
    border:3px solid #A2A2A2;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px; 
    -khtml-border-radius: 1px;
    font-size:106%;
    font family: Verdana, sans-serif;
    }
    .nav li:active {background-color:#A2A2A2;
    border:3px solid #A2A2A2;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px; 
    -khtml-border-radius: 1px;
    font-size:106%;
    font family: Verdana, sans-serif;
    }
    .nav
    {margin-left: auto;
        margin-right: auto;
    background-color:#031706 ;
    width:1100px;
    border:3px solid #031706;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px; 
    -khtml-border-radius: 7px;
    }
    #logo
    {
    text-align:center;
    }
    </style>
    <div class="nav">
    <ul id="nav"><ul style="">
    <li><a class="navon" href="http://google.com/">Home</a></li>
    <li><a href="http://google.com/">Web</a></li>
    <li><a href="http://google.com/">Reviews</a></li>
    <li><a href="http://google.com/">Fitness</a></li>
    <li><a href="http://google.com/">Gaming</a></li>
    <li><a href="http://google.com/">Links</a></li>
    
    </ul>
    </div></body></html>
    And yes this is for a navigation header.

  • #2
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    Change

    .nav li:active

    to

    .nav li.active

  • #3
    New Coder
    Join Date
    Nov 2011
    Posts
    41
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I gave that a try, but still no success.

  • #4
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    Here, works for me after a few lil changes

    HTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <link rel="stylesheet" href="main.css" type="text/css" media="screen" charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    <body>
    
    <div class="nav">
    <ul>
    <li class="active"><a href="http://google.com/">Home</a></li>
    <li><a href="http://google.com/">Web</a></li>
    <li><a href="http://google.com/">Reviews</a></li>
    <li><a href="http://google.com/">Fitness</a></li>
    <li><a href="http://google.com/">Gaming</a></li>
    <li><a href="http://google.com/">Links</a></li>
    
    </ul>
    </div>
    </body>
    </html>
    CSS
    Code:
    .nav li {display:inline;
    margin-left: 5em;
    background-color:#666666;
    border:3px solid #666666;-moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px; 
    -khtml-border-radius: 1px; 
    font-size:106%;
    font-family: Arial Bold;
    }
    .nav li:hover {background-color:#A2A2A2;
    border:3px solid #A2A2A2;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px; 
    -khtml-border-radius: 1px;
    font-size:106%;
    font family: Verdana, sans-serif;
    }
    .nav ul li.active {background-color:#A2A2A2;
    border:3px solid #A2A2A2;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px; 
    -khtml-border-radius: 1px;
    font-size:106%;
    font family: Verdana, sans-serif;
    }
    .nav
    {margin-left: auto;
        margin-right: auto;
    background-color:#031706 ;
    width:1100px;
    border:3px solid #031706;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px; 
    -khtml-border-radius: 7px;
    }
    #logo
    {
    text-align:center;
    }

  • #5
    New Coder
    Join Date
    Nov 2011
    Posts
    41
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Did you use a plain html extension for the html page?

  • #6
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    yes, did it not work for you ?

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Fix the errors in your mark up first and it will work.

    You dont declare a valid doctype, you have body elements inside your head tags and styles inside your body elements. Two open <ul> tags, but only one closed.
    Teed

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by johnnycabbage View Post
    a:link {color:#FFFFFF;}
    a:hover {color:#606060;}
    a:active {color:#606060;}
    That is setting hover and active colours the same.

    When using the mouse the hover will trigger when you move the mouse over the link. The active will then trigger while the mouse button is down. As they are both set to the same colour this will not change anything.

    When using the keyboard you don't have a a:focus value set so the colour will not change to show that the field has the focus. The active will then trigger while the enter key is depressed so that the person will be able to see which link they have activated after it is too late to prevent it.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #9
    New Coder
    Join Date
    Nov 2011
    Posts
    41
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by aaronhockey_09 View Post
    yes, did it not work for you ?
    I'm afraid not, you could try for yourself: http://silviafilms.ca/crap/crap.html the fitness link should be highlighted as it's active

    Quote Originally Posted by teedoff View Post
    Fix the errors in your mark up first and it will work.

    You dont declare a valid doctype, you have body elements inside your head tags and styles inside your body elements. Two open <ul> tags, but only one closed.
    Yes
    I understand i'll need a doctype now

  • #10
    New Coder
    Join Date
    Nov 2011
    Posts
    41
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    That is setting hover and active colours the same.

    When using the mouse the hover will trigger when you move the mouse over the link. The active will then trigger while the mouse button is down. As they are both set to the same colour this will not change anything.

    When using the keyboard you don't have a a:focus value set so the colour will not change to show that the field has the focus. The active will then trigger while the enter key is depressed so that the person will be able to see which link they have activated after it is too late to prevent it.
    That shouldn't be much of a concern, as the link should remain highlighted after it's been clicked. Regardless I've previously tried the links with different colours.

  • #11
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by johnnycabbage View Post
    That shouldn't be much of a concern, as the link should remain highlighted after it's been clicked.
    As soon as the mouse button or enter key is released the link will no longer be active and so will revert to its prior colour. It is only active while the button or key is depressed and so it will not remain highlighted after it has been clicked unless you have other code to do that.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #12
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    Went to the link and works fine

  • #13
    New Coder
    Join Date
    Nov 2011
    Posts
    41
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    As soon as the mouse button or enter key is released the link will no longer be active and so will revert to its prior colour. It is only active while the button or key is depressed and so it will not remain highlighted after it has been clicked unless you have other code to do that.
    Ahh I see, I've always thought that "active" meant that the link you're currently on will remain highlighted or some other effect.

    Quote Originally Posted by aaronhockey_09 View Post
    Went to the link and works fine
    Yea I think we're on different pages after what fegall said. I had the wrong impression of "active" styles.

  • #14
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    Ohh okay gotcha.
    Cheers.

  • #15
    New Coder
    Join Date
    Nov 2011
    Posts
    41
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Yea cheers for your help.
    But does anyone know the proper coding for my case?

    I may just have different headers for all my pages. Such as when you're on reviews, the header will have "reviews" highlighted, or when you're on games, the header will have "games" highlighted.

    It isn't feasible if I wanted to change the header though.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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