+ Reply to Thread
Results 1 to 3 of 3

Thread: Need help with html/css menu

  1. #1
    Man! I know enough! kevin will become famous soon enough kevin's Avatar
    Join Date
    Mar 2010
    Posts
    57

    Need help with html/css menu

    I have a menu that looks like this:

    <div id="nav">
    <ul>[*] Home [*] About [*] FAQsr [*] Contact [/list]</div>

    The default menu is Grey and when I hover over each one it turns blue. I want at least the "Home" to be selected (active) with the blue by default, or even better, I would like each page the user is on to default to the blue color so the user knows what page he is on.

    Here is my CSS code (the nav-hover.jpg) is the blue color that I want:

    #nav {
    height: 31px;
    margin-right: 0px;
    margin-left: 0px;
    color: #FFFFFF;
    background-color: #CCCCCC;
    background-image: url(images/nav-bg.jpg);
    background-repeat: repeat-x;
    background-position: top;
    padding-top: 0;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    font-weight: bold;
    }
    #nav ul {
    margin: 0px;
    padding: 0px;
    }
    #nav ul li {
    margin: 0px;
    display: block;
    float: left;
    list-style: none;
    clear: right;
    }
    #nav ul li a {
    display: block;
    padding-right: 20px;
    padding-left: 20px;
    text-align: center;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    line-height: 31px;
    background-image: url(images/nav-border.jpg);
    background-repeat: no-repeat;
    background-position: right top;
    }
    #nav ul li a:hover {
    background: url(images/nav-hover.jpg) repeat-x top;
    text-decoration: none;
    color: #FFFFFF;
    }
    #nav ul li#active {
    background: url(images/nav-hover.jpg) repeat-x top;
    text-decoration: none;
    }
    #nav ul li#active a {
    color: #FFFFFF;
    }


    Any help would be appreciated.

  2.    Sponsored Content


  3. #2
    Administrator joshu has a reputation beyond repute joshu has a reputation beyond repute joshu has a reputation beyond repute joshu has a reputation beyond repute joshu has a reputation beyond repute joshu has a reputation beyond repute joshu has a reputation beyond repute joshu has a reputation beyond repute joshu has a reputation beyond repute joshu has a reputation beyond repute joshu has a reputation beyond repute joshu's Avatar
    Join Date
    Feb 2010
    Location
    Cochin, Kerala, India
    Age
    29
    Posts
    424

    Re: Need help with html/css menu

    Hi there,

    All you need to do is add id="active" to the item you want selected on each page.

    For example on the home page have your menu as:

    Code:
    <div id="nav">
    <ul>[*] Home [*] About [*] FAQsr [*] Contact [/list]</div>
    
    on your FAQsr page you would have:
    
    <div id="nav">
    <ul>[*] Home [*] About [*] FAQsr [*] Contact [/list]</div>
    
    etc
    
    Make sure your CSS attributes for
    
    #nav ul li#active {
    background: url(images/nav-hover.jpg) repeat-x top;
    text-decoration: none;
    }
    #nav ul li#active a {
    color: #FFFFFF;
    }
    are correct though.

  4. #3
    Man! I know enough! kevin will become famous soon enough kevin's Avatar
    Join Date
    Mar 2010
    Posts
    57

    Re: Need help with html/css menu

    Thankssss Josh!!!!!!!!!! youve made my daY again !!

+ Reply to Thread

Similar Threads

  1. How to Validate HTML Or CSS Code online?
    By eric in forum Coding & Development
    Replies: 1
    Last Post: 03-18-2010, 04:08 AM
  2. The HTML Designer you use?
    By eric in forum Web Design & Development
    Replies: 3
    Last Post: 03-15-2010, 10:48 PM

Posting Permissions

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