PDA

View Full Version : Keeping the active link highlighted


LarDiDah
03-12-2010, 11:25 PM
Hey,

New to Dreamweaver but been searching and trying to have the link to the page that I am on stay highlighted.

I am using a template and this seems to not allow me to do it across a number of pages. Also I don't know html. Here is what I have so far. Any help appreciated.

<table width="800" border="0" cellpadding="4">
<tr>
<td bgcolor="#FFFFFF" class="RidgedGrey2pxCss"><blockquote>
<h5 class="InPageLink" id="navigation"><a class= "current" href= "../HTML/index.html">Home</a> | <a class= "current" href="../HTML/About Us.html">About Us</a> | <a class= "current" href="../HTML/Training Centre.html">Training Centre</a> | <a class= "current" href="../HTML/Maintenance Centre.html">Maintenance Centre</a> | <a class= "current" href="../HTML/Partners.html">Partners</a> | <a class= "current" href="../HTML/Links.html">Links</a> | <a class= "current" href="../HTML/Contact Us.html">Contact Us</a></h5>
</blockquote></td>
</tr>
</table>

DWcourse
03-13-2010, 04:42 AM
I'm assuming your menu is in a non-editable region of your template. In that case it takes a little work. Below I've outlined the basics but you'll need to do a little searching on your own to understand editable attributes and the CSS involved.


You need to add an editable attribute (the ID property) to the <body> tag of your template (select the body tag in the status bar at the bottom of the document window and then select menu: Modify>Templates>Make Attribute Editable…

Then on each page you need to set the ID property of the <body> to a unique value (menu: Modify>Template Properties). So assuming you had two pages (home=index.html and an about page=about.html) you would set the ID of the body tag for index.html to home and the about.html page to about.

Create a style rule for the current page link along the lines of:
#home .home, #about .about {insert style rules for current page link}

Finally apply the appropriate style class to each link in your menu (i.e. apply the home class to the home or index.html link and the about class to the about.html link).


That way the .home style rule will be applied to the index.html link only on the home page (where it is inside the body object with ID=home) and not on other pages. And the .about style rule will apply to the about.html link only on the about.html page (where it is inside the body object with ID=about).

You might also want to define home .home:visited, #about .about:visited and home .home;hover, #about .about:hover rules to cover those situations as well.

LarDiDah
03-16-2010, 05:00 PM
Hey JC,

Thanks for your help. I have had to go back and rebuild a lot of the site using an elastic layout so haven't had a chance to use this yet (have learned a lot more CSS though).

I'll let you know my progress.

Corrosive
03-16-2010, 05:49 PM
have learned a lot more CSS though

Good to hear. Tables are not meant for layout.