Link to home
Create AccountLog in
Avatar of Panos
PanosFlag for Germany

asked on

Highlight current page with css

hallo experts.
I cannot highlight the current page.I have followed the instruction on this site:http://snipplr.com/view/3666/highlight-selected-item-in-menu-css-only/
But i don't know what i'm doing wrong.
I give you the css and the list coe.
Any help?
<!--- CSS file--->
#navcontainer{
	position:relative;
	display:block;
	height:39px;
	font-size:11px;
	font-weight:bold;
	font-family:Arial,Verdana,Helvitica,sans-serif;
	background-color: transparent;
	background-image: url(../img/imagesSt4/bgOFF.gif);
	background-repeat: repeat-x;
	background-position: left top;
	border-top-width: 4px;
	border-top-style: solid;
	border-top-color: #81383A;
}
#navcontainer ul{margin:0;padding:0;list-style-type:none;width:auto;}
#navcontainer ul li{display:block;float:left;margin:0;}
#navcontainer ul li a{display:block;float:left;color:#666;text-decoration:none;padding:11px 20px 0 20px;height:23px;background:transparent url(../img/imagesSt4/bgDIVIDER.gif) no-repeat top right;}
#navcontainer ul li a:hover{
	color:#81383A;
	background-color: #fff;
	background-image: url(../img/imagesSt4/bgON.gif);
	background-repeat: no-repeat;
	background-position: right top;
}
 
#Detail #navcontainer .detail a,
#Bigphoto #navcontainer .Bigphoto a,
#Anbieter #navcontainer .Anbieter a,
#Fahrzeugdetail #navcontainer .Fahrzeugdetail a{
	color:#81383A;
	background-color: #fff;
	background-image: url(../img/imagesSt4/bgON.gif);
	background-repeat: no-repeat;
	background-position: right top;
}
<!--- List --->
<div id="navcontainer">
	<ul>
		<li><a  href="../Detailansicht.cfm?Art_ID=<cfoutput>#URL.Art_ID#</cfoutput>" class="Detail"id="Detail" >Detail&uuml;bersicht</a></li>
		<li><a href="../BigPhoto.cfm?Art_ID=<cfoutput>#URL.Art_ID#</cfoutput>" class="BigPhoto"id="Bigphoto">Bigphoto</a></li>
		<li><a href="../Anbieter.cfm?Art_ID=<cfoutput>#URL.Art_ID#</cfoutput>" class="Anbieter" id="Anbieter">Anbieter</a></li>
		<li><a href="../InseratDetail.cfm?Art_ID=<cfoutput>#URL.Art_ID#</cfoutput>" class="Fahrzeugdetail" id="Fahrzeugdetail">Fahrzeugdetail</a></li>
	</ul>
</div>

Open in new window

Avatar of alex4544
alex4544

Try these simpler CSS menu's they will all highlight the page
http://www.dynamicdrive.com/style/csslibrary/category/C1/
Avatar of Panos

ASKER

Hallo alex4544.
The problem is that i get highlited on hover but not when the page is active(the current page)
ASKER CERTIFIED SOLUTION
Avatar of dij8
dij8
Flag of New Zealand image

Link to home
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
See answer
Avatar of Panos

ASKER

Hallo dij8.
For the links i did follow the instruction on this site http://www.hicksdesign.co.uk/journal/highlighting-current-page-with-css.
I have copied your code in my template.
Than i try to make the body id editable.
I go Modify>Templates>Make Attribute Editable
I think there i do not put the right settings.Any help?