How to highlight the current page Nav link ?

I want the the Nav link of the page that is showing to be defined.

Please provide link, proper search term to tutorial or code

Thanks again!!

Ok. You need to give the link which is active an id. Presuming you have used an unordered list, it would be:

Code: Select all

<ul>
<li><a href="#">Link</a>
<li id="active"><a href="#">Link</a>
</ul>

And then the CSS

Code: Select all

li #active {
...
}

HTH. Jack

__________________
Jack Franklin - Webforumz Moderator
(x)HTML | CSS | PHP | MySQL | JQuery (Javascript)
Contact: My Blog | Twitter | Delicious
Want Lessons? PM me.
If you think I've helped, please press the 'Thanks' Button.

so when someone is on a page of me website the page link will indicate that it is active, yes.

Do I have to add the id
<li id="active"><a href="#">mywebpage</a>

to each link?


<ul>
<li><a href="/">Welcome</a></li>
<li><a href="#" rel="dropmenu1">Classes</a></li>
<li><a href="capoeira-school-contact.php">Contact</a></li>
<li><a href="capoeira-school-images.php">Images</a></li>
<li><a href="capoeira-school-links.php">Links</a></li>
<li><a href="capoeira-events-up-coming.php">Events</a></li>
<li><a href="#" rel="dropmenu2">Capoeira FAQs</a></li>
<li class="end"><a href="capoeira-school-risadinha.php">The Teacher</a></li>
</ul>

You have to do it manually, yes.

__________________
Jack Franklin - Webforumz Moderator
(x)HTML | CSS | PHP | MySQL | JQuery (Javascript)
Contact: My Blog | Twitter | Delicious
Want Lessons? PM me.
If you think I've helped, please press the 'Thanks' Button.

The nav bar is not liking this.

example

<ul>
<li><a href="capoeira-school-links.php">Links</a></li>
<li id="active"><a href="#">Link</a>
</ul>

so I tried this !?

<li id="active"><a href="capoeira-school-links.php">Links</a></li>

This seems to do the job, though the back ground colour that I chose does not fill the nav tab.

You say that this code is not working?

Code: Select all

<ul>
<li><a href="capoeira-school-links.php">Links</a></li>
<li id="active"><a href="#">Link</a>
</ul>

You've missed out a </li>!

Code: Select all

<ul>
<li><a href="capoeira-school-links.php">Links</a></li>
<li id="active"><a href="#">Link</a></li>
</ul>

__________________
Jack Franklin - Webforumz Moderator
(x)HTML | CSS | PHP | MySQL | JQuery (Javascript)
Contact: My Blog | Twitter | Delicious
Want Lessons? PM me.
If you think I've helped, please press the 'Thanks' Button.

hmm.. this produces two link nav tabs?

Not necessarily.

You can use PHP or javascript to match the link HREF with the page URL, and apply a class (or remove the link entirely).

Yes, that code creates two nav tabs as it has two <li>'s

PHP: Select all

<ul>
<li><a href="capoeira-school-links.php">Links</a></li>
<li id="active"><a href="#">Link</a></li>
</ul> 

You can make a simple PHP script to detect which link is active and make the id="active"

For the colour not taking up the whole space, screenshot please?

~Dean

You might be able to make a simple PHP script by I am not! link to tutorial?

I don't think this code will work the color still appears when the page isn't active.

I would like to know how take a screen shot!

Cheers

Are you serious? :O

Ok, theres a Print Screen button on your keyboard, find it, push it.

Then open an image program (Paint usualy)
Push Ctrl+V (Paste) and your screenshot will appear.

Save it, then upload it to a free image host (www.imageshack.us ) or google one.

As for a Tut, im not sure..someone else will have to help you on that bit.

~Dean

Ok, ok!

should be a screen shot attached

but as I said not sure about the code.

Attached Images

scrshot.jpg (22.4 KB, 11 views)