• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 896
  • Last Modified:

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
0
Tezdread
Asked:
Tezdread
  • 2
1 Solution
 
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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now