brayd
02-13-2009, 08: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?
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?