Active page link color just doesn't work
I've tried every bit of code people have suggested to change link colors and characteristics to achieve a really simple look: no underlining, visited pages black, hover red, active page red.
This code in this header does everything I want except make the active page link red:
<style type="text/css">
<!--
#container a:link {color: #000000; text-decoration: none; }
#container a:visited {color: #000000; text-decoration: none; }
#container a:hover {color: #FF0000; text-decoration: none; }
#container a:active {color: #FF0000; text-decoration: none; }
-->
</style>
Any tips would be really appreciated.
This code in this header does everything I want except make the active page link red:
<style type="text/css">
<!--
#container a:link {color: #000000; text-decoration: none; }
#container a:visited {color: #000000; text-decoration: none; }
#container a:hover {color: #FF0000; text-decoration: none; }
#container a:active {color: #FF0000; text-decoration: none; }
-->
</style>
Any tips would be really appreciated.
Hi Terence,
Are you using the current version of VSD?
Are you using the current version of VSD?
Bruzer,
It's Version 6.0 Build 6. Thanks.
Terry
It's Version 6.0 Build 6. Thanks.
Terry
Just to be sure, you are saying the link doesn't turn red when you are clicking down on it? This is what the active link styling is for. It doesn't set the color of a link pointing to the same page you are viewing.
Guess I've been on the wrong track. The link does turn the specified color when I click on it. What I'd like it to do is to stay that color when the new page is active so that the viewer can tell which menu item they're at.
In that case, you could use code like this:
Then you would need to inert the link using the html tool, so that you can give the link the class of "current".
<style type="text/css">
#container a:link {color: #000000; text-decoration: none; }
#container a:visited {color: #000000; text-decoration: none; }
#container a.current:link {color: #FF0000; text-decoration: none; }
#container a:hover {color: #FF0000; text-decoration: none; }
#container a:active {color: #FF0000; text-decoration: none; }
</style>
#container a:link {color: #000000; text-decoration: none; }
#container a:visited {color: #000000; text-decoration: none; }
#container a.current:link {color: #FF0000; text-decoration: none; }
#container a:hover {color: #FF0000; text-decoration: none; }
#container a:active {color: #FF0000; text-decoration: none; }
</style>
Then you would need to inert the link using the html tool, so that you can give the link the class of "current".
<a href="whateverthispageis.html" class="current">The current page</a>
Cary's got it. You have to add the current class into the specific link on the specific page as he explains. I seem to recall that it won't shift by itself but needs to be set up manually.
Makes sense! Thanks to all.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.