CSS Rollover nav question

Soldato
Joined
1 Dec 2004
Posts
23,082
Location
S.Wales
If you have a look at this page

www.dmoranda.ukfsn.org

Instead of having the page header listed in the Body div, i want to implement the css nav so that when a particular link is clicked, it will load the page but the link will stay a darker grey, ideally so that the user will know what page they are on.

I can put the header at the top of the body div on each page, but it looks abit dull.

Any ideas on what i can do to spruce it up?
 
That is abit confusing:

Here is my nav css below:

Code:
#menu {
		margin: 2px;
		height:24px;
		background-color:#666666;
		border:1px solid #000;
}


Code:
/*//////Start Of Navigation//////*/

#nav ul{
		padding : 1px 0;
		margin : 0;
		text-align: center;
		width: 100%;
		
}

#nav li{
   		display : inline;
		list-style-type: none;
		
}


#nav ul li a{
		background-color: #666666;
   		color: #cccccc;
   		font-weight : bold;
   		text-decoration : none;
   		padding-left : 5%;
   		padding-right : 5%;
   		border:1px solid #000;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px;
}

#nav ul li a:hover{
		background-color:#333333;
		color:#ffffff;
}
/*//////End Of Navigation/////*/

Im guessing all i have to do is add the additional objects in my css. i.e.

Code:
#siteNav li.current a { margin-bottom: -1px; }

#siteNav li.current a:link ,#siteNav li.current a:hover { background-color: #ffffff; background-image: none; cursor: default; color: #37454e; border-bottom: 1px solid #fff; }
 
Yep thats right, i want it exactly as it is now, i.e keep the roll overs so that when the link is rolled over with a mouse, it goes dark grey, the only addition i want is that if your on a particular page, i want that link to stay dark grey.
 
Back
Top Bottom