Styling divs and links on a current page

[socrates]

Hello!

 

I have a nav menu located in a footer file so that it is easily edited, rather than ever having to change the menu individually on each page. The links are all in divs of the same class. What I am trying to do is somehow make the div background black on whichever page is current, and have the link within that div display in bold. Here is the menu code:

 

<div class="leftnav"><a href="index.htm">home</a></div>
<div class="leftnav"><a href="history.htm">history</a></div>
<div class="leftnav"><a href="membership.htm">membership</a></div>
<div class="leftnav"><a href="artwork.htm">artwork</a></div>
<div class="leftnav"><a href="gallery.htm">members' gallery</a></div>
<div class="leftnav"><a href="shop.htm">club shop</a></div>
<div class="leftnav"><a href="affiliates.htm">affiliated clubs</a></div>
<div class="leftnav"><a href="clubs.htm">clubs</a></div>
<div class="leftnav"><a href="dealers.htm">dealers</a></div>
<div class="leftnav"><a href="events.htm">events</a></div>
<div class="leftnav"><a href="forum.php">forum</a></div>
<div class="leftnav"><a href="email.htm">contact</a></div>

 

So how would I do that if, say, history.htm was the current page?

 

Thanks

[Wickham]

The best way is to put all menu links in a separate "include" file and use PHP code to insert the same menu into every main page, so you only have one file to edit if you want to change something.

 

Then you can use item 2 on this page:-

http://www.wickham43.net/highlighthome.php

which uses matched pairs in the styles so that if the link id or class matches the page id or class, only that linl will have a different style. Item 3 is the same principle but uses image buttons.

There is a PHP method in item 4 which uses image buttons but that could be edited to use text links.

 

Item 1 on the page above is the basic method that would have to be edited on every page, so the PHP "include" method is preferred. For the "include" method see http://www.wickham43.net/serversideincludes.shtml

 

Your menu uses divs. It would be better to use ul and li list code.

[socrates]

Thank you very much for that. I'll give it a go now.

[socrates]

I am reporting back to say that it works a treat. I switched to an unordered list and used a php include and everything came up roses. Thank you very much indeed for giving me the appropriate link to your site.