...

View Full Version : Resolved Highlighting Current Page In Navigation Bar Problem



brayd
02-13-2009, 09:56 PM
I'm can't seem to get the Feature Tour link in my top navigation bar to highlight as the current page. You can view the problem by visiting the following URL:

http://www.elvioweb2.com/featuretour.html

The code I'm using for the main navigation bar is listed below:

#main-navigation {
padding:20px 15px 0 15px;
background:#3e2f11;
}

ul#simple-menu {
list-style-type:none;
width:100%;
position:relative;
height:27px;
font-family: Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:normal;
margin:0;
padding:11px 0 0 0;
}

ul#simple-menu li {
display:block;
float:left;
margin:0 0 0 4px;
height:27px;
}

ul#simple-menu li.left {
margin:0;
}

ul#simple-menu li a {
display:block;
float:left;
color:#fff;
background:#2075b9;
line-height:27px;
text-decoration:none;
padding:0 17px 0 18px;
height:27px;
}

ul#simple-menu li a.right {
padding-right:19px;
}

ul#simple-menu li a:hover {
background: #3e2f11;
}

To help target the Feature Tour page as the current page I've used an ID of featuretour in the body tag. I've used a list for the main navigation bar and given a class name based on the name of the page in the list i.e. the Feature Tour link has a class name of featuretour. I can't seem to target the Feature Tour page with my combination of ID's and class names so the Feature Tour link is highlighted. Below is the code I'm using to target the Feature Tour page:

#featuretour #simple-menu .featuretour a {
color:#3a3a3a;
background-color: #fff;
}

The Feature Tour page validates XHTML Strict 1.0 and CSS Level 2.1.

You can view my stylesheet using the following URL:

http://www.elvioweb2.com/css/layoutandstyle.css

How can I target the Feature Tour link so that it displays as the current page?

Rowsdower!
02-13-2009, 10:17 PM
I haven't copied and manipulated your code to check it out yet, but have a try by removing "a" from your .featuretour css like so:

/*use this:*/
#featuretour #simple-menu .featuretour {
color:#3a3a3a;
background-color: #fff;
}
/*instead of this:*/
#featuretour #simple-menu .featuretour a {
color:#3a3a3a;
background-color: #fff;
}

Since your .featuretour is applied to an <a> you won't have a ".featuretour a"

Seems like that ought to do it. Let me know if it doesn't work.

brayd
02-13-2009, 10:37 PM
Thanks Rowsdower. My Feature Link now displays as the current page.

Cheers!

Excavator
02-13-2009, 10:47 PM
Hello brayd,
You should have a look at my menu demo that uses the body tag to highlight the button of the current page your on.
See it at http://nopeople.com/CSS/h_ul_menu-with_images/index.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum