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
    Sep 2005
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    css menu - current page state

    hi

    I've adapted a horizontal css menu which is working fine - ccs / html below.

    But I'd like to have a hover / over state on pages that individual links relate to (so the home button on a hoover / over state on the home page etc).

    The css has a 'current' state, which I assume can be applied somehow to the button for a page - persumably applied to the button li in the html?

    Any ideas on how this can be done - or is a different class for the relavant button on the css on each page - which in theory should overrule the main style sheet - be the way forward.

    Grateful for any advice

    Thanx

    the css:

    Code:
    #navlist
    {
    margin: 0;
    padding: 9px 0 20px 10px;
    border-bottom: 0px;
    }
    
    #navlist ul, #navlist li
    {
    margin: 0;
    padding: 0;
    display: inline;
    list-style-type: none;
    }
    
    #navlist a:link, #navlist a:visited
    {
    float: left;
    line-height: 14px;
    font-weight: normal;
    margin: 0 10px 4px 10px;
    text-decoration: none;
    color:#006666;
    }
    
    #navlist a:link#current, #navlist a:visited#current, #navlist a:hover
    {
    border-bottom: 2px solid #006666;
    padding-bottom: 0px;
    background: transparent;
    color:#006666;
    }
    
    #navlist a:hover { color:#006666; }
    the html

    Code:
    <div id="navcontainer">
          <ul id="navlist">
            <li><a href="/index.htm" title="Home">Home</a></li>
            <li><a href="/treatments.htm" title="Treatments">Treatments</a></li>
            <li><a href="/aboutme.htm" title="About me">About me</a></li>
            <li><a href="/testimonials.htm" title="Testimonials">Testimonials</a></li>
            <li><a href="/press.htm" title="Press">Press</a></li>
            <li><a href="/prices.htm" title="Prices">Prices</a></li>
            <li><a href="/accomodation.htm" title="Local hotels">Accomodation</a></li>
            <li><a href="/local_area.htm" title="Local attractions">Local area</a></li>
            <li><a href="/contact.htm" title="Contact me">Contact</a></li>
            <li><a href="/find_me" title="Locate me">Find me</a></li>
          </ul>
        </div>

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Just add id="current" to the link for the page you are on.

  • #3
    New Coder
    Join Date
    Sep 2005
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    thanx - what tags?

    Thanx for that - what tags would u use for the id - just tried div - as below - but not working.

    Any ideas?

    Thanx

    <div id="menubox">
    <div id="navcontainer">
    <ul id="navlist">
    <div id="current"><li><a href="/index.htm" title="Home">Home</a></li></div>
    <li><a href="/treatments.htm" title="Treatments">Treatments</a></li>
    <li><a href="/aboutme.htm" title="About me">About me</a></li>
    <li><a href="/testimonials.htm" title="Testimonials">Testimonials</a></li>
    <li><a href="/press.htm" title="Press">Press</a></li>
    <li><a href="/prices.htm" title="Prices">Prices</a></li>
    <li><a href="/accomodation.htm" title="Local hotels">Accomodation</a></li>
    <li><a href="/local_area.htm" title="Local attractions">Local area</a></li>
    <li><a href="/contact.htm" title="Contact me">Contact</a></li>
    <li><a href="/find_me" title="Locate me">Find me</a></li>
    </ul>
    </div>

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    	<div id="navcontainer">
          <ul id="navlist">
            <li><a href="/index.htm" title="Home" id="current">Home</a></li>
            <li><a href="/treatments.htm" title="Treatments">Treatments</a></li>
            <li><a href="/aboutme.htm" title="About me">About me</a></li>
            <li><a href="/testimonials.htm" title="Testimonials">Testimonials</a></li>
            <li><a href="/press.htm" title="Press">Press</a></li>
            <li><a href="/prices.htm" title="Prices">Prices</a></li>
            <li><a href="/accomodation.htm" title="Local hotels">Accomodation</a></li>
            <li><a href="/local_area.htm" title="Local attractions">Local area</a></li>
            <li><a href="/contact.htm" title="Contact me">Contact</a></li>
            <li><a href="/find_me" title="Locate me">Find me</a></li>
          </ul>
        </div>

  • #5
    New Coder
    Join Date
    Sep 2005
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    thanx

    thanx for that - works perfectly!


  •  

    Posting Permissions

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