keeping 'on' state active on page

[Nulrick]

Hi!

I hope this is an easy question

At the link below I've built the nav using CSS (see code below). How do I make the 'on' state stay active on each specific page? (i.e the 'about us' rollover image stays active on the 'about us' page)

http://www.nicnackpaddywack.com/nicn...y/aboutus.html


CSS:

/* -----------begin nav layout styles-------------- */

#navigation {
width: 455px;
height: 116px;
margin: 0;
padding: 0;
float:left;
}





#nav_aboutus, #nav_aboutus a{
width:95px;
height:116px;
float:left;
background:url(../images/nav_aboutus.jpg) top left no-repeat;
}


#nav_portfolio, #nav_portfolio a {
width:95px;
height:116px;
float:left;
background:url(../images/nav_portfolio.jpg) top left no-repeat;
}


#nav_contactus, #nav_contactus a {
width:107px;
height:116px;
float:left;
background:url(../images/nav_contactus.jpg) top left no-repeat;
}


#nav_jointeam, #nav_jointeam a {
width:158px;
height:116px;
float:left;
background:url(../images/nav_jointeam.jpg) top left no-repeat;
}







#nav_aboutus a:hover {
width:95px;
height:116px;
background:url(../images/nav_aboutus.jpg) no-repeat 0px -116px ;
}


#nav_portfolio a:hover {
width:95px;
height:116px;
background:url(../images/nav_portfolio.jpg) no-repeat 0px -116px;
}


#nav_contactus a:hover {
width:107px;
height:116px;
background:url(../images/nav_contactus.jpg) no-repeat 0px -116px;
}


#nav_jointeam a:hover {
width:158px;
height:116px;
background:url(../images/nav_jointeam.jpg) no-repeat 0px -116px;
}


/* -----------end nav layout styles-------------- */

[Fang]

http://www.456bereastreet.com/archiv...tate_with_css/

[Nulrick]

thanks for sending this link but it doesn't make sense to me. I didn't use a list when building my CSS navigation.. see my code above. I just dont know how to tell the page to activate the 'on' state of a particular nav

[Fang]

Add

#aboutus #nav_aboutus a { 
	background:url(../images/nav_aboutus.jpg) no-repeat 0px -116px ; 
}
#portfolio #nav_portfolio a { 
	background:url(../images/nav_portfolio.jpg) no-repeat 0px -116px;
}
#contactus #nav_contactus a { 
	background:url(../images/nav_contactus.jpg) no-repeat 0px -116px;
}
#jointeam #nav_jointeam a { 
	background:url(../images/nav_jointeam.jpg) no-repeat 0px -116px;
}

Give each document body it's relevant id

[Nulrick]

FANG! I love you!! THANK YOU SOOOO MUCH!

http://www.nicnackproductions.com/ni...portfolio.html
(see portfolio and about us pages)