...

View Full Version : active li will not work



johnnycabbage
01-26-2012, 06:18 AM
I cannot get the .li:active to work, yet the :hover and plain style seems to work. I've also tried to use individual link styles such as

a:link {color:#FFFFFF;}
a:hover {color:#606060;}
a:active {color:#606060;}

And the a:active still won't work, yet the a:hover and a:link work no problem.
Please can anyone locate what I'm doing wrong?


<html>
<head>
<link rel="stylesheet" type="text/css" href="headerstyle.css" />
<title>V</title><style type="text/css">
body { width: 100%; }
</style>
</head><body><div id=logo><img src=../logo.png alt="headerlogo" width="700px" height="100px" /></div> <style>

.nav li {display:inline;
margin-left: 5em;
background-color:#666666;
border:3px solid #666666;-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
-khtml-border-radius: 1px;
font-size:106%;
font-family: Arial Bold;
}
.nav li:hover {background-color:#A2A2A2;
border:3px solid #A2A2A2;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
-khtml-border-radius: 1px;
font-size:106%;
font family: Verdana, sans-serif;
}
.nav li:active {background-color:#A2A2A2;
border:3px solid #A2A2A2;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
-khtml-border-radius: 1px;
font-size:106%;
font family: Verdana, sans-serif;
}
.nav
{margin-left: auto;
margin-right: auto;
background-color:#031706 ;
width:1100px;
border:3px solid #031706;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
-khtml-border-radius: 7px;
}
#logo
{
text-align:center;
}
</style>
<div class="nav">
<ul id="nav"><ul style="">
<li><a class="navon" href="http://google.com/">Home</a></li>
<li><a href="http://google.com/">Web</a></li>
<li><a href="http://google.com/">Reviews</a></li>
<li><a href="http://google.com/">Fitness</a></li>
<li><a href="http://google.com/">Gaming</a></li>
<li><a href="http://google.com/">Links</a></li>

</ul>
</div></body></html>
And yes this is for a navigation header.

aaronhockey_09
01-26-2012, 06:25 AM
Change

.nav li:active

to

.nav li.active

johnnycabbage
01-26-2012, 06:28 AM
I gave that a try, but still no success.

aaronhockey_09
01-26-2012, 06:57 AM
Here, works for me after a few lil changes

HTML

<!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>
<link rel="stylesheet" href="main.css" type="text/css" media="screen" charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>

<div class="nav">
<ul>
<li class="active"><a href="http://google.com/">Home</a></li>
<li><a href="http://google.com/">Web</a></li>
<li><a href="http://google.com/">Reviews</a></li>
<li><a href="http://google.com/">Fitness</a></li>
<li><a href="http://google.com/">Gaming</a></li>
<li><a href="http://google.com/">Links</a></li>

</ul>
</div>
</body>
</html>


CSS

.nav li {display:inline;
margin-left: 5em;
background-color:#666666;
border:3px solid #666666;-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
-khtml-border-radius: 1px;
font-size:106%;
font-family: Arial Bold;
}
.nav li:hover {background-color:#A2A2A2;
border:3px solid #A2A2A2;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
-khtml-border-radius: 1px;
font-size:106%;
font family: Verdana, sans-serif;
}
.nav ul li.active {background-color:#A2A2A2;
border:3px solid #A2A2A2;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
-khtml-border-radius: 1px;
font-size:106%;
font family: Verdana, sans-serif;
}
.nav
{margin-left: auto;
margin-right: auto;
background-color:#031706 ;
width:1100px;
border:3px solid #031706;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
-khtml-border-radius: 7px;
}
#logo
{
text-align:center;
}

johnnycabbage
01-26-2012, 07:58 AM
Did you use a plain html extension for the html page?

aaronhockey_09
01-26-2012, 01:52 PM
yes, did it not work for you ?

teedoff
01-26-2012, 02:43 PM
Fix the errors in your mark up first and it will work.

You dont declare a valid doctype, you have body elements inside your head tags and styles inside your body elements. Two open <ul> tags, but only one closed.

felgall
01-26-2012, 07:40 PM
a:link {color:#FFFFFF;}
a:hover {color:#606060;}
a:active {color:#606060;}

That is setting hover and active colours the same.

When using the mouse the hover will trigger when you move the mouse over the link. The active will then trigger while the mouse button is down. As they are both set to the same colour this will not change anything.

When using the keyboard you don't have a a:focus value set so the colour will not change to show that the field has the focus. The active will then trigger while the enter key is depressed so that the person will be able to see which link they have activated after it is too late to prevent it.

johnnycabbage
01-26-2012, 07:47 PM
yes, did it not work for you ?I'm afraid not, you could try for yourself: http://silviafilms.ca/crap/crap.html the fitness link should be highlighted as it's active


Fix the errors in your mark up first and it will work.

You dont declare a valid doctype, you have body elements inside your head tags and styles inside your body elements. Two open <ul> tags, but only one closed.
Yes
I understand i'll need a doctype now

johnnycabbage
01-26-2012, 07:55 PM
That is setting hover and active colours the same.

When using the mouse the hover will trigger when you move the mouse over the link. The active will then trigger while the mouse button is down. As they are both set to the same colour this will not change anything.

When using the keyboard you don't have a a:focus value set so the colour will not change to show that the field has the focus. The active will then trigger while the enter key is depressed so that the person will be able to see which link they have activated after it is too late to prevent it.That shouldn't be much of a concern, as the link should remain highlighted after it's been clicked. Regardless I've previously tried the links with different colours.

felgall
01-26-2012, 07:58 PM
That shouldn't be much of a concern, as the link should remain highlighted after it's been clicked.

As soon as the mouse button or enter key is released the link will no longer be active and so will revert to its prior colour. It is only active while the button or key is depressed and so it will not remain highlighted after it has been clicked unless you have other code to do that.

aaronhockey_09
01-26-2012, 07:59 PM
Went to the link and works fine

johnnycabbage
01-26-2012, 08:07 PM
As soon as the mouse button or enter key is released the link will no longer be active and so will revert to its prior colour. It is only active while the button or key is depressed and so it will not remain highlighted after it has been clicked unless you have other code to do that.
Ahh I see, I've always thought that "active" meant that the link you're currently on will remain highlighted or some other effect.


Went to the link and works fineYea I think we're on different pages after what fegall said. I had the wrong impression of "active" styles.

aaronhockey_09
01-26-2012, 08:12 PM
Ohh okay gotcha.
Cheers.

johnnycabbage
01-26-2012, 08:22 PM
Yea cheers for your help.
But does anyone know the proper coding for my case?

I may just have different headers for all my pages. Such as when you're on reviews, the header will have "reviews" highlighted, or when you're on games, the header will have "games" highlighted.

It isn't feasible if I wanted to change the header though.

Excavator
01-26-2012, 08:36 PM
Hello johnnycabbage,
Have a look at this demo (http://nopeople.com/CSS%20tips/h_ul_menu-with_images/index.html). That is a pretty simple way of highlighting the menu li of the page you are on.

aaronhockey_09
01-26-2012, 08:40 PM
Yes, you will just have to change the active state for each LI for each html page

so on the reviews page, the LI will have the class active. like so
<li class="active"><a href="http://google.com/">Reviews</a></li>

and on the game page, that LI would have the class, like so
<li class="active"><a href="http://google.com/">Gaming</a></li>

Let me know if this is what you mean.

johnnycabbage
01-26-2012, 09:09 PM
Hello johnnycabbage,
Have a look at this demo (http://nopeople.com/CSS%20tips/h_ul_menu-with_images/index.html). That is a pretty simple way of highlighting the menu li of the page you are on.That is a good method, I could possibly use it. It would be better if it didn't rely on images though.


Yes, you will just have to change the active state for each LI for each html page

so on the reviews page, the LI will have the class active. like so
<li class="active"><a href="http://google.com/">Reviews</a></li>

and on the game page, that LI would have the class, like so
<li class="active"><a href="http://google.com/">Gaming</a></li>

Let me know if this is what you mean.Yes that's what I mean. I doubt that I'll be updating the header much, so I may just use that method.

felgall
01-26-2012, 09:21 PM
The usual way to make the link for the current page a different colour is to set up a class called 'current' which you attach to the <a> tag that points to the current page. You can then style .current to make it a different colour.

If you have static pages then you'll need to hard code the class="current" into the appropriate <a> on each page.

If you are using a server side language to generate that part of the code then you can add an if statement to compare the link destination with the current page in order to determine whether to add it or not.

You are better off using current rather than active as the class name so as to make it easier to tell which is which in your CSS.

a.active and a:active look similar enough to confuse them whereas a.current looks nothing like a:active

aaronhockey_09
01-26-2012, 09:29 PM
The usual way to make the link for the current page a different colour is to set up a class called 'current' which you attach to the <a> tag that points to the current page. You can then style .current to make it a different colour.

ya i just like to use it on the li so i can change the bg and stuff
and normally just have my css like .header ul li.active a { blah; blah; blah; }
to change my colours

aaronhockey_09
01-26-2012, 09:31 PM
By the way, how do i quote somebody and have it include the original poster at the top.
cheers.

Excavator
01-26-2012, 10:44 PM
That is a good method, I could possibly use it. It would be better if it didn't rely on images though.



That demo just happens to have an image based menu. It doesn't have be though, the part that highlights the page your on doesn't have anything to do with images.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum