View Full Version : CSS Active Image State

Jul 15th, 2009, 09:59 PM
I need some help with CSS and HTML. Currently I have CSS working for my navigation; using one image that has the inactive/active state. It slides back and forth when it needs to show the over state.

What I would like to do is have the active state show permanently if they're on that page. I know it probably have something to do with using a <body id=x> but Im not a coder so I'm not sure how to set that up. Could someone please help?



Here is the current CSS:

a.nav_home { display: block; width: 192px; height: 44px; text-decoration: none; background: url("images/nav_home_all.jpg"); }
a.nav_home:hover { background-position: -192px 0; }
.displace { position: absolute; left: -5000px; }

Here is the HTML:

<td width="192"><a href="index.html" class="nav_home" title="home"><span class="displace">home</span></a></td>

Jul 15th, 2009, 11:42 PM
If I understand your question, you are talking about anchor pseudo classes

These are the four different "states"

a:link {color:#FF0000} /* unvisited link */
a:visited {color:#00FF00} /* visited link */
a:hover {color:#FF00FF} /* mouse over link */
a:active {color:#0000FF} /* selected link */They must be in this order to work.

In your code you should have something like this

a.nav_home:link { display: block; width: 192px; height: 44px; text-decoration: none; background: url("images/nav_home_all.jpg"); } /* unvisited link */
a.nav_home:visited {background: url("images/nav_home_visited.jpg"); } /* visited link */
a.nav_home:hover{ background-position: -192px 0; } /* mouse over link */
a.nav_home:active { background: url("images/nav_home_active.jpg"); } /* selected link */you should be able to style the different states anyway you want.
source: W3schools.com
however, I think the active link is only active while you have the mouse button pressed down, once you are on the page, it's visited.
In situations like this I use php to detect the current url and dynamically write the "button style" into the css when the page loads. I'm sure there is a javascript for the same purpose. So I guess the answer is you have to add a menu script of some sort to acheive your objective or, write a menu for each page. someone else may have a better answer though

Jul 16th, 2009, 01:03 AM
Do you mean something like this?

<ul id="navbar">
<li id="home" class="here"><a href="#nogo">Home</a></li>
<li id="about"><a href="about/index.html">About</a></li>
<li id="hist"><a href="hist/index.html">Historical</a></li>
<li id="scenes"><a href="scenes/index.html">Scenes</a></li>
<li id="other"><a href="other/index.html">Other</a></li>
<li id="people"><a href="people/index.html">People</a></li>
<li id="life"><a href="life/index.html">n*udes</a></li>
<li id="child"><a href="child/index.html">Juvenile</a></li>
</ul><!--close id NAVBAR -->

At http://www.jacquimorgan.com/ the "here" style lets visitor know they are on that page. I cannot remember exactly, but you can also have two designations for CLASS="styleOne styleTwo" I think [?] separated by a space [?]

Jul 16th, 2009, 02:28 AM
THis is what I use, assuming you have just a home page and 2 others but copy the idea for as many pages as you want.

In your style sheet:


position: absolute;
background: #fff url(../images/slice4.gif) repeat-x;
font: normal 70% Arial, Helvetica, Sans-serif;

list-style: none;

margin: 0 0 3px 0;

li a,
li a:link,
li a:visited
display: block;
color: #FFCB49;
text-decoration: none;
text-align: center;
background-color: #929694;
font: normal 150% tahoma, Helvetica, sans-serif;
padding: 2px 4px 2px 4px;

li a:focus,
li a:hover,
li a:active
color : #929694;
background-color: #FFCB49;


body#home a#home-nav,
body#page1 a#page1-nav,
body#page2 a#page2-nav
color: #f00;
background-color: #CCC;
border: 1px solid #929694;

In your html:
Make sure you give each page the correct id e.g.

<body id="home">

Use this format for the navigation list:

<li><a id="home-nav" href="index.html" title="My Home Page">Home</a> </li>
<li><a id="page1-nav" href="page1.html" title="My Page 1">Page 1</a> </li>
<li><a id="page2-nav" href="page2.html" title="My Page 2">Page 2</a> </li>

Of course if you are using lists elsewhere on the page you will need to either assign a class to the ul or li, or use a containing div for the navigation.

Jul 16th, 2009, 04:43 PM
Well the idea is to use the CSS to permanently show the "over" state if you're on that page.

1) When you're not on the home page you see the "inactive" home graphic (button).
2) When you rollover it you see the "over state" since the image slides using CSS.
3) And when you click on it and it takes you to the home page, BUT I want the "over state" to stay active so people know that they're on that page.

1 and 2 works, but I dont know how to set up #3.


Donkey, I'm a little confused with what you wrote since I'm more of a designer rather than a programmer. I was hoping you could take my CSS/HTML and assist me with what to add to make my page work.


My thoughts that in theory the HTML page needs an ID, maybe in the body tag. Then the CSS checks for that ID, if it's identical to the "active" state, then it would slide the image to that position and remain there until the user clicks to a new page...

Jul 16th, 2009, 05:13 PM
Can you post a link to the site or alternatively the full CSS and the HTML for the index page?

Jul 16th, 2009, 05:21 PM

The solutions pages are the only ones that are created...

Jul 16th, 2009, 06:06 PM
I'm snowed under at the moment but I'll take a look tonight and post something (unless one of the experts beats me to it)

Jul 16th, 2009, 06:08 PM

Jul 30th, 2009, 07:55 PM
3) And when you click on it and it takes you to the home page, BUT I want the "over state" to stay active so people know that they're on that page.

Did you ever get an answer to this? I am having the same problem.

Sep 3rd, 2009, 12:47 AM
Just got this http://www.sohtanaka.com/web-design/active-state-in-css-navigations/ which miight be of interest

Sep 3rd, 2009, 01:37 AM
Did you ever get an answer to this? I am having the same problem.

You just give a class to the activte page like:

<li><a href="#">Link Text</a></li>
<li class="active"><a href="#">Link Text2</a></li>
<li><a href="#">Link Text3</a></li>

Then you can refer to it like this inside your CSS:

ul li.active a {
css properties for the active page go here