Hi,

 

I've adapted a tutorial to do a CSS menu using an image and positioning. I'm really confused as to why it isn't working.

 

Initially - why do people use a selected class? Surely active is the same thing?

 

My HTML is as follows:

 

<ul id="navigation">

<li class="home"><a href="index_new.html" class="selected" title="Home">Home</a></li>

<li class="aboutus"><a href="aboutus.html" class="selected" title="About Us">About Us</a></li>

<li class="services"><a href="services.html" class="selected" title="Services">Services</a></li>

<li class="information"><a href="information.html" class="selected" title="Information">Information</a></li>

<li class="introducers"><a href="introducers.html" class="selected" title="Introducers">Introducers</a></li>

<li class="contactus"><a href="contactus.html" class="selected" title="Contact Us">Contact Us</a></li>

</ul>

 

My CSS code is as follows:

 

ul#navigation {margin: 0; padding: 0; list-style: none; float: right; position: relative; }

ul#navigation li {float: left; }

ul#navigation a {display: block; background: url(menunav.png) no-repeat; text-indent: -9999px; height: 51px; }

ul#navigation li.home a {background-position: 0 0px; width: 58px; }

ul#navigation li.aboutus a {background-position: -58px 0; width: 96px; }

ul#navigation li.services a {background-position: -154px 0; width: 92px; }

ul#navigation li.information a {background-position: -246px 0; width: 124px; }

ul#navigation li.introducers a {background-position: -370px 0; width: 124px; }

ul#navigation li.contactus a {background-position: -494px 0; width: 98px; }

ul#navigation li.home a:hover, ul#navigation li.home a:active, ul#navigation li.home a.selected {background-position: 0 -51px; }

ul#navigation li.aboutus a:hover, ul#navigation li.aboutus a:active,ul#navigation li.aboutus a.selected{background-position: -58px -51px; }

ul#navigation li.services a:hover, ul#navigation li.services a:active,ul#navigation li.services a.selected {background-position: -154px -51px; }

ul#navigation li.information a:hover, ul#navigation li.information a:active,ul#navigation li.information a.selected {background-position: -246px -51px; }

ul#navigation li.introducers a:hover, ul#navigation li.introducers a:active, ul#navigation li.introducers a.selected {background-position: -370px -51px; }

ul#navigation li.contactus a:hover, ul#navigation li.contactus a:active, ul#navigation li.contactus a.selected {background-position: -494px -51px; }

 

I've wasted most of my afternoon trying to figure this out including removing sections of the code to try to find the offending part.

 

I don't understand how just applying a class will result in an active state. Surely it needs to be defined somewhere?

 

Many thanks

Just found something that mentioned applying a body tag to each page so that it knows which one it's on. It hasn't helped!

You would need to apply a class to each body tag, and then put a section in your CSS to define the active state like this:

body.home li.home, body.aboutus li aboutus, body.services li.services {<-- insert style here -->}

and so on

 

Hope that helps

It's all sorted.

 

Where I was going wrong was I had a class=selected after each menu item on each page. I removed the classes from all except the home page and hey presto it's working.

 

I'm going to remove the classes from each page and see if it's working....

It's all sorted.

 

Where I was going wrong was I had a class=selected after each menu item on each page. I removed the classes from all except the home page and hey presto it's working.

 

I'm going to remove the classes from each page and see if it's working....

 

NOT all sorted - 3 are working, 3 aren't.