PDA

View Full Version : Wierd??


Creative Insanity
02-08-2006, 08:16 PM
In CSS.. does active mean that the text colour will change to what is in that tag and stay while a page is active?
If so mine is not.
a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #e28895;
text-decoration: none;

anyone know why?

site
NZ Weddings (http://development.webthings.org/nzweddings/)

ranjan
02-08-2006, 08:27 PM
always order your pseudo links in the following order

1. link
2. visited
3. hover
4. active

else they wont work (remember LoVe HAte

Now to answer why so?

every selector has a specificity. If two selectors apply to the same element, the one with higher specificity wins

All the pseudo classes above have the same weight

All of them can apply to a hyperlink, and in some cases, more than one will apply. For example, an unvisited link can be hovered and active at the same time as it's an unvisited link. Since three of the above rules apply to the hyperlink, and the selectors all have the same specificity, then the last one listed wins. Therefore, the "active" style will never appear, because it will always be overridden by the "hover" style. Now consider a hyperlink which has been visited. It will always and forever be purple, because its "visited" style beats out any other state, including "active" and "hover."

This is why the recommended order is as above

The first two can be in either order, actually, because a link can't be both visited and unvisited at the same time.

Also use cascade to reduce your code like so:

a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
}
a:link {
color: #3f6ee2;
}
a:visited {
color: #3f6ee2;
}
a:hover {
color: #e28895;
}
a:active {
color: #e28895;
}

domedia
02-08-2006, 08:59 PM
In CSS.. does active mean that the text colour will change to what is in that tag and stay while a page is active?
active page? ;)

nope, it means active link. I's comparable with 'focus' in JS.
Ranjans tutorial on LoVeHAte is incredible important to understand though, because the status of the link combined with the right order of the pseudo elements both influence which style is applied.

Creative Insanity
02-08-2006, 09:02 PM
Yeah ta rj make complete sence.
Ta heaps for the tips.

Great stuff ;)

Is there anyway to make the active change the colour of the link when that page is active?

domedia
02-08-2006, 09:28 PM
If by 'active' page you mean a link to a page which happens to be the page you're on, the answer is no.

You would have to implement a server side solution that will write out an extra css classname to that link. PHPSELF comes to mind, but I'm not a programmer

Creative Insanity
02-08-2006, 10:02 PM
Hmm.. I wonder if a behaviour would do this as I was told in no certain terms NO GRAPHIC LINKS!

ranjan
02-09-2006, 12:55 AM
i had a tutorial for this using pure css or asp, principle remains same. i'll try and find if i still have it.

Edit:

i had to pull it off the way back machine (http:/archive.org/)

http://web.archive.org/web/20041026152459/dreamlettes.net/tutorials/activelinks/default.htm

Creative Insanity
02-09-2006, 03:45 AM
Ta heaps rj.. very much appreciated ;)