Setting Current Page Properties to CSS Navigation

Hey,

I'm slowly developing a page in Dreamweaver that will become a Wordpress theme and it's my first time trying to do this so I'm running into a few problems.

This time I want to be able to set the properties of the Navigation so that the page the visitor is currently on will have different properties from the other links.

This is my CSS so far and it's working okay, what I want is for the bottom-border to be the same as Active but static to highlight the current page.

#navigation {
	padding-top:70px;
	padding-right:30px;
	float: right;
}
#navigation a {
	display:block;
	width:90px;
	height:30px;
	padding-top:4px;
	color: #FFF;
	text-align: center;
	text-decoration:none;
}
#navigation a:hover {
	background-color:#216c9b;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #66bc29;
}
#navigation a:active {
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #66bc29;
}
#header_top {
	background-image: url(images/header_bg.png);
	background-repeat: repeat-x;
	height: 107px;
}
.logo {
    float: left;
	clear:left;
    padding-top: 27px;
    padding-left: 18px;
}
ul {
	list-style-type:none;
	margin:0;
	padding:0;
}
li {
float:left;
padding-left:10;
padding-right:10;
}

Open in new window


This never used to be a problem when I used to create new HTML pages but now I'm only building one page to be used a template I don't know the best way to do it.

Thanks in advance
LVL 1
TezdreadAsked:
Who is Participating?
 
Jason C. LevineNo oneCommented:
This time I want to be able to set the properties of the Navigation so that the page the visitor is currently on will have different properties from the other links.

You're having trouble with this because it is not a pure CSS issue.  You need to use some form of scripting to check to see which page you are on and change the class dynamically.

WordPress builds this function into its internal menu generator.  I would suggest that you not spend a whole lot of time trying to figure this out this way.  Instead, build Custom Menu support into the theme and after the menu is generated, alter the CSS so that items display the way you want them to.
0
 
TezdreadAuthor Commented:
Ah okay that sounds like it should make it easier.

Thank you, I'm sure I'll have more questions about getting my current HTML & CSS into a workable theme :)
0
 
Jason C. LevineNo oneCommented:
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.