Solved

How to I get this a:active working?

Posted on 2009-05-13
8
611 Views
Last Modified: 2012-05-06
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
Comment
Question by:wingcat
8 Comments
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 250 total points
ID: 24378832
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
 
LVL 6

Assisted Solution

by:0791882310
0791882310 earned 250 total points
ID: 24378934
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
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 24378996
Also, if you want the menu bar to always reflect the last link chosen, you are now moving into scripting territory...
0
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 

Author Comment

by:wingcat
ID: 24379029
So the a:active is just when it's clicked and does not reflect the last clicked link?
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 24379035
Correct.
0
 

Author Comment

by:wingcat
ID: 24379056
is there a quick way to do what 0791882310 suggested? Have an override colour? Of is that complicated coding?
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 24379166
>> 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
 
LVL 1

Expert Comment

by:sealview
ID: 24385279
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Add box and text color changing for everything 1 35
How to position loader with CSS 3 55
Customizing jQuery UI Accordion CSS 3 28
really easy css change help please 4 19
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question