• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 639
  • Last Modified:

How to I get this a:active working?

I have a navbar where  the links are normally white. I applied a hover css which makes them turn pink when I hover and it works.

My problem is the a:active; when I click on the link, it momentarily changes to pink, but as soon as my mouse leaves the text, it does back to white and not to the pink as stipulated in my a:active css.

Why is my a:active not working?
#navBar ul li {
	display: inline;
}
#navBar ul {
	list-style-type: none;
	padding: 0px;
	margin-top: 10px;
	margin-left: 5px;
}
#navBar a   {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #FFF;
	text-decoration: none;
	font-weight: bold;
	margin-right: 16px;
	margin-left: 16px;
}
#navBar ul li a:link {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #FFF;
	text-decoration: none;
	font-weight: bold;
	margin-right: 16px;
	margin-left: 16px;
}
#navBar ul li a:visited {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #FFF;
	text-decoration: none;
	font-weight: bold;
	margin-right: 16px;
	margin-left: 16px;
}
#navBar ul li a:hover {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #DAAFE4;
	margin-left: 16px;
	text-decoration: underline;
	font-weight: bold;
	margin-right: 16px;
}
#navBar ul li a:active {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #DAAFE4;
	margin-left: 16px;
	text-decoration: underline;
	font-weight: bold;
	margin-right: 16px;
}

Open in new window

0
wingcat
Asked:
wingcat
2 Solutions
 
Jason C. LevineNo oneCommented:
Because a:active is only for when the link is active (being clicked).

If you want it to stay a certain color, you have to also change a:visited
0
 
0791882310Commented:
yeah a:active doesn't really mean the link that you've clicked on last i guess is what your thinking... like jason1178 said it's only when the link is being clicked... you would have to have some css dedicated to each page the link goes to to override the color of the link... like you click on contacts... the contacts page is loaded and it has code to override the color value of the css sheet for the contacts link
0
 
Jason C. LevineNo oneCommented:
Also, if you want the menu bar to always reflect the last link chosen, you are now moving into scripting territory...
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
wingcatAuthor Commented:
So the a:active is just when it's clicked and does not reflect the last clicked link?
0
 
Jason C. LevineNo oneCommented:
Correct.
0
 
wingcatAuthor Commented:
is there a quick way to do what 0791882310 suggested? Have an override colour? Of is that complicated coding?
0
 
Jason C. LevineNo oneCommented:
>> is there a quick way to do what 0791882310 suggested? Have an override colour?

Depends on your definition of "quick"

What you can do is create a style specific to each category on your menu bar.  For argument's sake, let's say your bar has the following:

Home
About Us
Contact Us
Help

Create a class called .theactiveitem {color:#000000} (obviously change as needed) and apply that class to the appropriate menu bar item manually for each page that relates to the topic.  That will give your users the illusion that the site menu is "remembering" what the clicked.

The downside of the above is that if you have a ton of pages this gets pretty unwieldy.
0
 
sealviewCommented:
Hi,
The most primitive way is to make the CSS this way.

But there are many, more intelligent ways to do it, my choice is server-side scripting PHP, where you can make a function to stylish the navbar according to the location.

Hope this code helps
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
a{
width:150px;
display:block;
font:bold 12px/30px Arial, Helvetica, sans-serif;
color:#333;
background:#fff;
border:1px solid #ddd;
text-decoration:none;
padding:0;
margin:3px;
text-align:center;
}
a:active{
width:150px;
display:block;
font:bold 12px/30px Arial, Helvetica, sans-serif;
color:#333;
background:#fff;
border:1px solid #ddd;
text-decoration:none;
padding:0;
margin:3px;
text-align:center;
}
a:hover{
color:#ccc;
background:#333;
border:1px solid #000;
text-decoration:none;
}
a:visited{
color:#ccc;
background:#666;
border:1px solid #036;
text-decoration:none;
}
a:visited:hover{
color:#ccc;
background:#333;
border:1px solid #000;
text-decoration:none;
}
</style>
</head>
 
<body>
<a href="http://www.google.com" target="_blank">www.google.com</a>
<a href="http://www.euronom.ro" target="_blank">www.euronom.ro</a>
<a href="http://www.sublirom.com" target="_blank">www.sublirom.com</a>
<a href="http://www.alphamd.ro" target="_blank">www.alphamd.ro</a>
 
</body>
</html>

Open in new window

0

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now