Jump to content

Styling divs and links on a current page


socrates

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...