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 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2006
    Posts
    40
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Highlighting Current Page In Navigation Bar Problem

    I'm can't seem to get the Feature Tour link in my top navigation bar to highlight as the current page. You can view the problem by visiting the following URL:

    http://www.elvioweb2.com/featuretour.html

    The code I'm using for the main navigation bar is listed below:

    #main-navigation {
    padding:20px 15px 0 15px;
    background:#3e2f11;
    }

    ul#simple-menu {
    list-style-type:none;
    width:100%;
    position:relative;
    height:27px;
    font-family: Arial, Helvetica, sans-serif;
    font-size:13px;
    font-weight:normal;
    margin:0;
    padding:11px 0 0 0;
    }

    ul#simple-menu li {
    display:block;
    float:left;
    margin:0 0 0 4px;
    height:27px;
    }

    ul#simple-menu li.left {
    margin:0;
    }

    ul#simple-menu li a {
    display:block;
    float:left;
    color:#fff;
    background:#2075b9;
    line-height:27px;
    text-decoration:none;
    padding:0 17px 0 18px;
    height:27px;
    }

    ul#simple-menu li a.right {
    padding-right:19px;
    }

    ul#simple-menu li a:hover {
    background: #3e2f11;
    }

    To help target the Feature Tour page as the current page I've used an ID of featuretour in the body tag. I've used a list for the main navigation bar and given a class name based on the name of the page in the list i.e. the Feature Tour link has a class name of featuretour. I can't seem to target the Feature Tour page with my combination of ID's and class names so the Feature Tour link is highlighted. Below is the code I'm using to target the Feature Tour page:

    #featuretour #simple-menu .featuretour a {
    color:#3a3a3a;
    background-color: #fff;
    }

    The Feature Tour page validates XHTML Strict 1.0 and CSS Level 2.1.

    You can view my stylesheet using the following URL:

    http://www.elvioweb2.com/css/layoutandstyle.css

    How can I target the Feature Tour link so that it displays as the current page?
    Last edited by brayd; 02-13-2009 at 10:38 PM.

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    I haven't copied and manipulated your code to check it out yet, but have a try by removing "a" from your .featuretour css like so:
    Code:
    /*use this:*/
    #featuretour #simple-menu .featuretour {
      	color:#3a3a3a;
      	background-color: #fff; 
    }
    /*instead of this:*/
    #featuretour #simple-menu .featuretour a {
      	color:#3a3a3a;
      	background-color: #fff; 
    }
    Since your .featuretour is applied to an <a> you won't have a ".featuretour a"

    Seems like that ought to do it. Let me know if it doesn't work.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    New Coder
    Join Date
    Oct 2006
    Posts
    40
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks Rowsdower. My Feature Link now displays as the current page.

    Cheers!

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,678
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello brayd,
    You should have a look at my menu demo that uses the body tag to highlight the button of the current page your on.
    See it at http://nopeople.com/CSS/h_ul_menu-wi...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


  •  

    Posting Permissions

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