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 5 of 5
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    94
    Thanks
    23
    Thanked 0 Times in 0 Posts

    a:active problem

    Hi guys I'm having a problem showing when the link is active, the highlight isn't working on my navigation.

    The link should turn red when on that page, but at the moment nothing happens.

    Any help appreciated.

    HTML -

    Code:
    <ul id="menu">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="index2.html">Flight Check</a></li>
                    <li><a href="index3.html">Holiday</a></li>
                    <li><a href="index4.html">Hotel</a></li>
                    <li><a href="index5.html">Car Rental</a></li>
                    <li><a href="index6.html">Insurance</a></li>
                    <li><a href="index7.html">Contact</a></li>
                </ul>
    CSS -

    Code:
    }
    #menu li {
    	float: left;
    	margin: 0;
    }
    #menu li a {
    	color: #fff;
    	text-decoration: none;
    	display: block;
    	padding: 0 20px;
    	line-height: 40px;
    }
    
    #menu li a:hover {
    	border-bottom-color: #2894d1;
    	color: #b7e3fa;
    	background: #c10e06;
    	border-bottom: 2px solid;
    }
    
    #menu li a:active {
    	border-bottom-color: #2894d1;
    	color: #b7e3fa;
    	background: #c10e06;
    	border-bottom: 2px solid;
    }
    Last edited by swiltch; 02-22-2011 at 03:46 PM. Reason: spelling

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    a:active applies when the link is actively being clicked. Once the link takes you to anohter page, it's no longer active. You need to define current page links. Take a look at:

    http://hicksdesign.co.uk/journal/hig...-page-with-css
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Regular Coder
    Join Date
    Jul 2002
    Location
    Kansas, USA
    Posts
    487
    Thanks
    0
    Thanked 54 Times in 53 Posts
    You may be confusing a declared class "active" with the pseudo-class :active. The pseudo-class :active only occurs during the instant the link is clicked. If you want the Home link in your example to be "active" while the page is displayed, then you will need to alter your CSS (change in blue):
    Code:
    #menu li {
    	float: left;
    	margin: 0;
    }
    #menu li a {
    	color: #fff;
    	text-decoration: none;
    	display: block;
    	padding: 0 20px;
    	line-height: 40px;
    }
    
    #menu li a:hover {
    	border-bottom-color: #2894d1;
    	color: #b7e3fa;
    	background: #c10e06;
    	border-bottom: 2px solid;
    }
    
    #menu li.active a {
    	border-bottom-color: #2894d1;
    	color: #b7e3fa;
    	background: #c10e06;
    	border-bottom: 2px solid;
    }

  • #4
    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 swiltch,
    Have a look at a demo of a little trick for indicating what page your user what page he's on - http://nopeople.com/CSS%20tips/h_ul_...ges/index.html

    That method saves you from having to add the extra class to each page your menu is on.
    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

  • #5
    New Coder
    Join Date
    Nov 2010
    Posts
    94
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Thankyou very much guys!


  •  

    Posting Permissions

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