PDA

View Full Version : CSS Links


Coober
07-26-2005, 05:23 PM
I have a navbar styled with css.

I want to clearly identify the link to the current page.

I realise that I could manually change the HTML for the particular link on each page, for example:


<a href="index.htm">Home</a>
<strong>Products</strong> <!-- This is the current page -->
<a href="services.htm">Services</a>


but is there a way to do so using css?

Thanks in advance,

Coober

Coober
07-27-2005, 01:07 PM
Solved the problem myself (although not quite as 'automatic' as I'd originally hoped for):

I created a class called 'currentPage' gave it a bit of different styling to the other link classes, then simply applied this class to the relevant link on each page.

a.currentPage {
text-decoration: underline;
font-weight: bold;
color: #D1FFBB;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

OK, so I had to do a bit of manual work on each page, but at least it works.

Coober

Coober
07-27-2005, 01:44 PM
Ok, here's a link to a tutorial on the way I should have done it:

Current page link syling - CSS ('http://www.hicksdesign.co.uk/journal/highlighting-current-page-with-css')

Coober

The Shadow
08-04-2005, 05:36 PM
Ok, here's a link to a tutorial on the way I should have done it:

Current page link syling - CSS ('http://www.hicksdesign.co.uk/journal/highlighting-current-page-with-css')

Coober
Thanks for the link!

domedia
08-05-2005, 12:46 PM
You would still have to manually add 'class="currentPage"' to every page. Is this what you want?

Coober
08-05-2005, 01:02 PM
I don't really want to have any extra work. I agree that it's a bit of extra effort, whether you use either method, but for a small site that is ok. I can imagine for larger sites, it could become a bit of a chore. That's why I think the method shown in the tutorial (in the link) is a little better.

But if there is a simpler way...

Coober

domedia
08-05-2005, 02:40 PM
But if there is a simpler way...
Yes doing it server side would be much easier, in PHP you would check for PHP_SELF

The current Dreamweaver News article from the homepage seem to deal with highlighting current page in navigation as well:
http://www.macromedia.com/devnet/mx/dreamw..._macrochat.html ('http://www.macromedia.com/devnet/mx/dreamweaver/articles/navigation_macrochat.html')

Good Luck!