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 11 of 11
  1. #1
    Regular Coder
    Join Date
    Aug 2008
    Posts
    127
    Thanks
    2
    Thanked 0 Times in 0 Posts

    CSS Horizontal Menu Help

    I am trying to make a horizontal menu and have a couple of problems:

    1) When home is selected I want it to highlight it the same color i.e: #b2b2b2
    however at the minute I cannot figure out how to do this. I also want it to do the same for the about us page etc (but havent added this to the code at the minute).

    2) I want the menu to be horizontal at the minute it keeps going on top of each other and the spacing is really tight.

    I want it like:

    Home | About | Products | Contact Us | Special Offers


    My code:

    <div id="main-nav"><div id="altnavhead">
    <a href="index.php?page=home">Home</a><a href="index.php?page=aboutus">About</a> <a href="index.php?page=contactus">Contact Us</a> <a href="index.php?page=retailproducts">Retail Products</a> <a href="index.php?page=specialoffers">Special Offers</a>
    </div>
    </div>


    #main-nav {
    height: 50px;
    background-color: #ebecf0;
    margin-left: 160px;
    }

    #main-nav a {
    color: #ff75ba;
    weight: bold;
    text-decoration: none;
    }

    #main-nav a:hover {
    color: #b2b2b2;
    }

    #main-nav #altnavhead {
    padding-top: 20px;
    padding-left: 30px;
    }

    body.home main-nav#home,
    body.home main-nav#home a,
    body.home main-nav#home a:hover,
    color: #b2b2b2;
    }


    I do set in my include page the page class: <body class="home">

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    1) When home is selected I want it to highlight it the same color i.e: #b2b2b2
    however at the minute I cannot figure out how to do this. I also want it to do the same for the about us page etc (but havent added this to the code at the minute).
    I do set in my include page the page class: <body class="home">
    Code:
    .home #main-nav a{
     color: #b2b2b2;
    }
    2) I want the menu to be horizontal at the minute it keeps going on top of each other and the spacing is really tight.
    By default, anchors are inline elements, so they should sit in line with other. You may have some other CSS rule than the above which might be affecting them.

    You may override it by adding either display:inline; or float:left; to your #main-nav a (though there will some difference in the behavior of the items for these two)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Aug 2008
    Posts
    127
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I have added:
    .home #main-nav a{
    color: #b2b2b2;
    }
    into my code but that just turns my whole menu, b2b2b2 and nothing happens on selection or hover?

    I used your code to replace: body.home main-nav#home,
    body.home main-nav#home a,
    body.home main-nav#home a:hover,
    color: #b2b2b2;
    }

    which I know is wrong.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    I have added:
    .home #main-nav a{
    color: #b2b2b2;
    } into my code but that just turns my whole menu, b2b2b2 and nothing happens on selection or hover?
    I missed one point.
    Code:
    <body id="home">
    .....
    <div id="main-nav"><div id="altnavhead">
    <a href="index.php?page=home" class="home">Home</a><a href="index.php?page=aboutus">About</a> <a href="index.php?page=contactus">Contact Us</a> <a href="index.php?page=retailproducts">Retail Products</a> <a href="index.php?page=specialoffers">Special Offers</a>
    </div>
    Code:
    #home #main-nav a.home{
     color: #b2b2b2;
    }
    should do it.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Aug 2008
    Posts
    127
    Thanks
    2
    Thanked 0 Times in 0 Posts
    added this but the only problem is home is always highlighted now? When I click about home still stays highlighted?

    I want to go through and repeat it with about, contact us etc... so when they are selected they are in the font #b2b2b2 but as I say above home is always highlighted.

    Thanks for your help so far its been great..

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    When I click about home still stays highlighted?
    In the about page, your body tag should have a different id, say id="about"
    Refer Change link text style for current page.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Regular Coder
    Join Date
    Aug 2008
    Posts
    127
    Thanks
    2
    Thanked 0 Times in 0 Posts
    nope when I add in the id for about they both stay highlighted home and about.

  • #8
    Regular Coder
    Join Date
    Aug 2008
    Posts
    127
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Just so you know where I am at:#.css code
    #main-nav {
    height: 50px;
    background-color: #ebecf0;
    margin-left: 160px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 11px;
    }

    #main-nav a {
    color: #ff75ba;
    text-decoration: none;
    }

    #main-nav a:hover {
    color: #b2b2b2;
    }

    #main-nav #altnavhead {
    padding-top: 20px;
    padding-left: 30px;
    }

    #main-nav a.home{
    color: #b2b2b2;
    }
    #main-nav a.about{
    color: #b2b2b2;
    }


    and my menu code:

    <div id="main-nav"><div id="altnavhead">
    <a href="index.php?page=home" class="home">Home</a><b>|</b><a href="index.php?page=aboutus" class="about">About</a><b>|</b><a href="index.php?page=contactus">Contact Us</a><b>|</b><a href="index.php?page=retailproducts">Retail Products</a><b>|</b><a href="index.php?page=specialoffers">Special Offers</a>
    </div>
    </div>

  • #9
    Regular Coder
    Join Date
    Aug 2008
    Posts
    127
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Can anyone see why the home and now about buttons are remaining highlighted even when not on that page.

    I am using the body tag <body class="home"> to indicate what page it is.

  • #10
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Can anyone see why the home and now about buttons are remaining highlighted even when not on that page.
    I'm pretty sure about the working of the method explained in the above given link. Have you followed it correctly?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #11
    New to the CF scene
    Join Date
    May 2009
    Location
    New York City
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Apply styles to a:visited as well.


  •  

    Posting Permissions

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