Active State

Lchad · #1 (**permalink**) Jan 26th, 2007, 11:09

Hi folks... I'm having a problem with my navigation. I can't seem to get the a:active to show it's styling.

ul.nav {
	list-style:none;
	padding-left: 0;
	margin-left: 0;
	padding-bottom: 5px;
	padding-top: 10px;
	}
	ul.nav li {
	display:inline;
	}
	ul.nav a{
	border: 1px solid #FAEE98;
	border-bottom: none;
	padding: 5px 15px 5px 15px;
	margin-right: 10px;
	background-color:#000000;
	text-decoration: none;
	color:#FAEE98;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	font-size: medium;
	}
	ul.nav a:link {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: medium;
	font-weight: bold;
	color: #FAEE98;
	}
	ul.nav a:active {
	border: 1px solid #333333;
	color: #333333;
	background-color: #FFFFFF;
	font: bold medium Georgia, "Times New Roman", Times, serif;
	}
	ul.nav a:hover {
	text-decoration: none;
	color: #000000;
	background-color: #FAEE98;
	border: 1px solid;

I'll work on the shorthand once I get the code working.
Anyone see what the problem is?
Thanks in advance!

karinne · #2 (**permalink**) Jan 26th, 2007, 12:52

Order matters

(see sig for latest blog entry ... I talk about that in there)

put a:active after a:hover.

Lchad · #3 (**permalink**) Jan 26th, 2007, 12:58

Ok.. changed the order but that didn't help. Still can't see the changes on active state!

karinne · #4 (**permalink**) Jan 26th, 2007, 13:02

The active state is when you click on the link. You're probably thinking of a "selected" state.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-CA" xml:lang="EN-CA">

<head>
    <title>Some title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <style type="text/css">
    ul.nav {
        list-style:none;
        padding-left: 0;
        margin-left: 0;
        padding-bottom: 5px;
        padding-top: 10px;
    }
    
    ul.nav li {
        display:inline;
    }
    
    ul.nav a {
        border: 1px solid #FAEE98;
        border-bottom: none;
        padding: 5px 15px 5px 15px;
        margin-right: 10px;
        background-color:#000000;
        text-decoration: none;
        color:#FAEE98;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-weight: bold;
        font-size: medium;
    }
    
    ul.nav a:link {
        font-family:Georgia, "Times New Roman", Times, serif;
        font-size: medium;
        font-weight: bold;
        color: #FAEE98;
    }
    
    ul.nav a:hover {
        text-decoration: none;
        color: #000000;
        background-color: #FAEE98;
        border: 1px solid;
    }
    
    ul.nav a:active, ul.nav a.selected {
        border: 1px solid #333333;
        color: #333333;
        background-color: #FFFFFF;
        font: bold medium Georgia, "Times New Roman", Times, serif;
    }
    
    </style>    
</head>

<body>

<div>
    <ul class="nav">
        <li><a href="/" class="selected">menu</a></li>
        <li><a href="/">menu</a></li>
        <li><a href="/">menu</a></li>
        <li><a href="/">menu</a></li>
        <li><a href="/">menu</a></li>
    </ul>
</div>

</body>
</html>

Lchad · #5 (**permalink**) Jan 26th, 2007, 13:03

I was just thinking that same thing. When you are one let's call it the Homepage, I want the homepage tab to be a different color. Is that "selected state"?

karinne · #6 (**permalink**) Jan 26th, 2007, 13:08

Yeppers

Lchad · #7 (**permalink**) Jan 26th, 2007, 13:10

Cool.. thanks for clearing that up.

Ok.. can you take a look at the code you typed in... I don't think the class="selected" is correct because it's not working.

Do I need <> these?

And do I put that line of code only on the list item for the homepage if it's the homepage link I want to change?

So many questions...

Lchad · #8 (**permalink**) Jan 26th, 2007, 13:21

Karianne, thanks.. I got it...

I needed to fix my code...Reputation point for ya!

karinne · #9 (**permalink**) Jan 26th, 2007, 13:45

Glad to see you figured it out. Thanks for the rep

Ryan Fait · #10 (**permalink**) Jan 26th, 2007, 20:19

The active state is when the mouse is actually down on the link

Lchad · #11 (**permalink**) Jan 27th, 2007, 01:29

I get it now!!! Thanks Ryan!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Greetings from the Sunshine state	Robert Skold	Introduce Yourself	5	Apr 10th, 2008 09:09
Hello, from the sunshine state	KATNET	Introduce Yourself	9	Jan 31st, 2008 22:39
[SOLVED] Movieclip button active state problem !! Help Please !!	alladeen	Flash & Multimedia Forum	6	Oct 25th, 2007 14:40
How do I get people active and keep them active?	TheSealPortalTeam	Webforumz Cafe	4	May 9th, 2007 10:17
Fixing of the chosen state on a map	Flashmap	Flash & Multimedia Forum	1	Apr 5th, 2007 10:48

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Active State