yet another CSS question, active link

[tyme]

I would to be able to set the look of the link currently being viewed to look different that all other links. That is, if I'm on index.html the link on the page for index.html looks different than the link for otherpage.html

 

everyone understand? any ideas? i tried using the a:active stuff, but that didn't work.

 

here's the code I currently have (this is inside a table with it's own class):

	.linkstable
{	
 background-color: white;
 border-left: .1em white solid;
 border-right: .1em white solid;
}
.linkstable a
{
 border-style: none solid none solid;
 border-color: white;
 border-right-width: 1px; 
 border-left-width: 1px;

}
.linkstable a:hover
{
 border-style: none solid none solid;
 border-color: black;
 background-color: #e2e0e0;
 border-right-width: 1px; 
 border-left-width: 1px;
 border-bottom-width: 1px;
 border-top-width: 1px;
}
.linkstable a:active
{
 border-style: none solid none solid;
 border-color: black;
 background-color: #e2e0e0;
 border-right-width: 1px; 
 border-left-width: 1px;
 border-bottom-width: 1px;
 border-top-width: 1px;
}

and yes i know my CSS is a bit messy w/all the different border implementations, right now I'm just trying to get a basic layout.

 

oh, and let's assume the links will be done in the php format suggested by paul right here.

Edited June 29, 2004 by tyme

[Qchem]

Its a dirty way of doing it, but you could just create a new class for the current link (enabling you to change it how you please). Of course you'd then have to change which link belonged to this class for each page - much less than ideal!!!!

[tyme]

that's actually the trick used here but I wasn't sure that'd work with the php style links, plus i didn't really understand it anyways :)

[Guest Adriano]

Hello

The active link is the one being clicked on. I almost never use this CSS property. But the effect you want I have used. Check moranar.com.ar or citycentreconcepts.co.uk to see it.

 

But basically, what you want is the following: let's assume a list of links. Add an id="something" to each (each id _must_ be unique for each page). Now style all links in css as normal, using the a:link, a:visited, a:hover, and a:active (by the way: you can omit any of them, but the order must be this one to avoid strange behaviors. The mnemotecnic rule is "LoVe? HA!" for link, visited, hover, active). This styling should be on another file, or be general enough that we can then style our id'ed links.

 

Now, in each page, use the following:

<style type="text/css" media="screen">
<!--
a:link#idsomething, a:visited#idsomething {
here: selectors you wish to modify;
}
//-->
</style>

 

The comment around the css, and the // C++ comment are all to avoid triggering various bugs. If you ask me, I really add them religiously, not consciously.

[tyme]

thanks for the tips!

 

i think i might actually do this with php, sort of, not sure if it's possible, but I'll figure it out.

[Guest Adriano]

Sure it is possible. Just make php add dinamically the id to each page. I actually do this on my website. In my script, php parses the urls passed (something like "moranar.com.ar/?sec=hom&txt=something") and uses the "sec" value to do this trick.