...

View Full Version : css menu - current page state



dirksmith
11-27-2005, 08:13 PM
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:


#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


<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>

_Aerospace_Eng_
11-27-2005, 08:33 PM
Just add id="current" to the link for the page you are on.

dirksmith
11-27-2005, 09:15 PM
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>

_Aerospace_Eng_
11-27-2005, 10:02 PM
<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>

dirksmith
11-27-2005, 10:53 PM
thanx for that - works perfectly!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum