hyperlink colors

All Forums >> [Web Development] >> Cascading Style Sheets

Message

barking mad -> hyperlink colors (8/21/2006 9:37:41)
I have some text based links which when using css are shown in bold when hovering over. I want to show the link to the current page in bold at al times (whatver that page might be) is this possible using css? if so how please?

jaybee -> RE: hyperlink colors (8/21/2006 9:45:47)
If you look in your styles you should see a line for the hover which has font-weight:bold; in it. You need to put that in the style for the normal state. Look for a link { if you can't find it can you post a link to your site so I can see the code.

barking mad -> RE: hyperlink colors (8/21/2006 10:08:46)

A:link
{
    FONT-SIZE: 10pt;
    COLOR: #cccccc;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    TEXT-DECORATION: none;
	
}

A:visited
{
    FONT-SIZE: 10pt;
    COLOR: #cccccc;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    TEXT-DECORATION: none
}

a:hover
 {
    FONT-SIZE: 10pt;
    COLOR: #003399;
    font-family:Verdana, Arial, Helvetica, sans-serif;
	TEXT-DECORATION: none
	
	
}

A:active
{
    FONT-SIZE: 10pt;
    COLOR: #cccccc;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    TEXT-DECORATION: none;
	
}

The hover works no problem but I want the "current page" to remain either in bold or different colour. When i move to another page, the new page remains highlighted when on that one and the first page returns to a normal state.

Tailslide -> RE: hyperlink colors (8/21/2006 10:25:23)
You can either give the current menu item a specific class on each page and then add a rule into your stylesheet specifically for that "current" menu item OR, (and this is an easier way if you can manage it) give each page a specific id like this: <body id="home"> for instance on your homepage. Then give every menu item a specific id too like this: <ul> <li><a href="whatever.html" id="nav-home">Home</a></li> <li><a href="apage.html" id="nav-contact">Contact</a></li> </ul> Then in your stylesheet you add in a specific rule for your current page like this: #home #nav-home, #contact #nav-contact (etc etc) {your rule goes here} The advantage of doing it this way is that you can have exactly the same menu list on every page - you could have it in an included file. You don't need to worry about adding a class to a specific menu item on each page. Having it in an include ensures that it's very easy to add new pages into the navigation structure.

barking mad -> RE: hyperlink colors (8/21/2006 10:49:54)
Thanks for your help ... but, I have to say I think you've lost me now!! I give each page an id & include it in the body tag. OK I then give each link an id & include in the a href tag. OK Then you lose me ... #home #nav-home, #contact #nav-contact (etc etc) {your rule goes here} if I wanted the current page to be in bold what would the css code be? what's the '#' mean/for?

barking mad -> RE: hyperlink colors (8/21/2006 11:40:41)
a little bit of tweaking and I got it to work! thanks very much!

Tailslide -> RE: hyperlink colors (8/21/2006 12:09:01)
Sorry BM - popped away for a few minutes and didn't see your post. Glad you got it working. (for others - the "#" refers to an id - in this case ids for the body and for the various nav items. e.g. #nav-home refers to the id given to the homepage link in the menu - nav-home. You can only use IDs once on each page btw).

Page: [1]

0.0625