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 8 of 8
  1. #1
    New Coder
    Join Date
    Jun 2010
    Posts
    46
    Thanks
    10
    Thanked 0 Times in 0 Posts

    How to show the current active link

    Hi,

    I was wondering how to show the current active link on the navigation?

    I also have a few tables that I need to show the active link on as well.

    Thanks

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello kimmi_baby,
    Have a look at this example - http://nopeople.com/CSS%20tips/h_ul_...ges/index.html
    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

  • #3
    New Coder
    Join Date
    Jun 2010
    Posts
    46
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Thank you for your reply

    Now I'm a little bit confused on a few thing...

    What if at the moment my CSS looks like this:

    Code:
    #nav li#nav-home a {
    width:101px;
    height:20px;
    background:url(../images/main%20menu%20tabs/nav_home.png) no-repeat;/* X and Y position at 0 */
    }
    
    
    #nav li#nav-home a:hover {
    width:101px;
    height:20px;
    background:url(../images/main%20menu%20tabs/nav_home.png) no-repeat;
    background-position: 0 -20px;
    
    }

    Do I need to rewrite all of it for the ID to work?

  • #4
    New Coder
    Join Date
    Jun 2010
    Posts
    46
    Thanks
    10
    Thanked 0 Times in 0 Posts
    What if I have more than one stylesheet?

  • #5
    New to the CF scene
    Join Date
    Nov 2011
    Location
    Milton Keynes, UK
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I managed this by giving the body an ID (page name such as home, contact-us etc.). Then in my nav I gave the "a href" a class which matched the body ID.

    My CSS then looked like this:-
    Code:
    #home .home, #contact-us .contact-us {
    	background-color: #000;
    	background-repeat: no-repeat;
    	background-position: left top;
    }
    The only thing you need to change on a page by page basis is the Body ID as all your nav links are classed up. I also run multiple stylesheets and it's no problem.

  • #6
    New to the CF scene
    Join Date
    Nov 2011
    Location
    Milton Keynes, UK
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry forgot to include code for the HTML
    Code:
    <body id=brighton>
    ... a little bit later...
    <ul>
    <li><a href="../birmingham/index.html" class="birmingham" accesskey="1" title="">Birmingham</a></li>
    <li><a href="../brighton/index.html" class="brighton" accesskey="2" title="">Brighton</a></li>
    <li><a href="../bristol/index.html" class="bristol" accesskey="3" title="">Bristol</a></li>

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by kimmi_baby View Post

    Do I need to rewrite all of it for the ID to work?
    Each page will need a unique id. That should be the only change needed to your markup for this to work.

    The beauty of this is there is no change made to the menu itself from page to page, you target the anchor from body id.
    That makes it possible to use an include for your menu, something that you'll really appreciate later!
    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

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I whipped out an example for you on your other thread since that's where the link to your page was.
    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

  • Users who have thanked Excavator for this post:

    kimmi_baby (11-30-2011)


  •  

    Tags for this Thread

    Posting Permissions

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