Joseph asked,
> In a previous message I mentioned how I was attempting to find a way
> to use CSS to highlight the navigation of my current. Zoe gave me the
> following tutorials to do that:
>
> http://www.hicksdesign.co.uk/journal/highlighting-current-page-with-css
> http://www.456bereastreet.com/archive/200503/
> setting_the_current_menu_state_with_css/
>
> Unfortunately, I have one major problem attempting to implement this
> code. In both tutorials they require the html to have a body id tag.
> This doesn't work for my site since the body is part of an uneditable
> region in my template. In other words, I can only set the id in the
> template and that will propagate to every page, which would defeat the
> purpose of the ID tag.
>
> I'd like to use server side script but that's not an option at this
> point in time. Does anyone have further suggestions using CSS that I
> could highlight the navigation?
Joseph,
The version that I use is from "Bulletproof Web Design" by Dan
Cederholm. He just makes a change on each page as needed.
Starting with the first (home) page he adds an id thusly:
<ul id="navlist">
<li id="current"><a href="index.html" >Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">contact us</a></li>
</ul>
Then the next page would be:
<ul id="navlist">
<li><a href="index.html" >Home</a></li>
<li id="current"><a href="products.html">Products</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">contact us</a></li>
</ul>
and so on down the line. All pages would have the following CSS:
#navlist ul #current a{
background: your choice;
color: your choice;
}
That's how I implemented it, and it works without the #body problems.
Dave Pierce
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
