PDA

View Full Version : How do make a current page navigation link a different colour



Totallyc
Sep 21st, 2009, 10:51 PM
I am designing a website using a vertical navigation menu. How do I make the page that is current have a different coloured link in the menu using CSS. So whichever page you are on it has a different coloured link to the others?

ckeyrouz
Sep 22nd, 2009, 01:51 AM
check this:

http://www.w3schools.com/CSS/css_pseudo_classes.asp

abduraooft
Sep 22nd, 2009, 09:52 AM
I'd recommend to check http://www.codingforums.com/showpost.php?p=605564&postcount=3

jegan2k9
Sep 22nd, 2009, 12:56 PM
Hi

Please give a class to the anchor tag.
.sel:active
{
color:red;
}

This code will helps you.

Totallyc
Sep 22nd, 2009, 09:28 PM
I have added this class to my CSS and placed it in the anchor tag but it still does not seem to work. I know 'Active' can change the colour of my link when you hover and then mouse click, but I want it to stay that colour when it navigates to that page. Any other ideas would be very much appreciated.

VIPStephan
Sep 22nd, 2009, 09:49 PM
Two ways: One is described in the link abduraooft gave you above. Another one is to give each “current” link (or link’s parent) a class or ID called “current” on each page and style that accordingly. It’s pretty simple.

Totallyc
Sep 24th, 2009, 09:30 PM
This is the CSS I use for creating the navigation. If I add a class to the relevant anchor tag in the HTML on the current page to change it's colour it has no effect. Any ideas please.

#subnav a {
display: block;
background-color: #999999;
padding: 7px;
width: 186px;
text-decoration: none;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
font-weight: bold;
color: #FFFFFF;
}

Scriptet
Sep 24th, 2009, 09:32 PM
The HTML for the current page takes the following format:

<a class="current" href="#">Link Text</a>

Obviously with # replaced with link location and link text replaced with well the link text.

Then the CSS for this would be

#subnav a.current{
color: red;
}

Change the colour to whatever you like.

Totallyc
Sep 24th, 2009, 09:52 PM
Thank you very much. I knew it would be a simple solution, but could I work it out!! I try and tackle most things but this stumped me. Thank you, I can get on with rest of the site now.

Scriptet
Sep 24th, 2009, 10:02 PM
Nice one glad it worked :)