hyperlink colors (Full Version)

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]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625