Hi guys,

 

I am having a small problem with some CSS scripts that I have been working on for around a week. I am designing a site using PHP and HTML. The menu bar is located near the top and what I am trying to do is get the page that you are currently on in the site highlighted with a green background. So if you are on the home page the home page option will be highlighted on the menu bar.

 

Does anyone have the scripts?

 

Thanks

just put css code, mouse-over, then change the background color of your desire (green).

just put css code, mouse-over, then change the background color of your desire (green).

 

Sorry man, I don't quite follow you, du have the codes?

Try something like this....

 

THE CSS

 

.current{

background-color: green;

text-colour: black;

}

 

Then, in the code for the navbar, just add class="current" to the current page link.

Try something like this....

 

THE CSS

 

.current{

background-color: green;

text-colour: black;

}

 

Then, in the code for the navbar, just add class="current" to the current page link.

 

Yeh thanks for the help, but I already know how to do that, I need somthing which will change the color of the menu bar when you are on that page, if you get what I mean

can you make it an image then sliced it, then make it a mouse over property in adobe dreamweaver.

well Scott S solution will do that.

 

 

I think it would be best if you post a link so that we understand what you are talking about, do you want a background image to change colour, a CSS defined colour or just some text? its hard to know exactly what you want when we can't see it.

Ahh I've found an example - http://www.cssplay.co.uk/menus/ if you click on a page on the top menu it will change color as you mouse over it. But when you are on a page - eg. Demos the page doesn't mousover but instead it is different to the other pages in the menu bar. How would I get that?

with a class...Here is an example as I am guessing that your navigation is an unordered list I will show you with one...

 

 

CSS:

li a {
color: #000099;
}
li a:hover {
color: #33FF00;
}

.example a {
color: #CC66CC;
}

.example a:hover{
color: #CC66CC;}

 

 

HTML:

 

<ul>
<li><a href="#">hdhd</a></li>
<li><a href="#">hdhd</a></li>
<li><a href="#">hdhd</a></li>
<li><a href="#">hdhd</a></li>
<li class="example"><a href="#">hdhd</a></li>
</ul>

 

 

so the default li is to be blue and hover green in this example...and then the li with the class attached is pink and will stay pink when hovered over.

 

 

All you need to do is make a class that has a link state and a link hover state, and attach it to the <li> if you are not using a li however you can just as easily attach the class to the link itself but your css for the class would be like this instead:

 

.example {
color: #CC66CC;
}

.example a:hover {
color: #CC66CC;
}

 

 

 

 

 

hope this makes sense

Thanks so much, you're a legend!