Solved

CSS "active page indicator"

Posted on 2007-03-27
2
322 Views
Last Modified: 2012-06-27
Hi there!

When I define:

#divNavigation li a:hover
{
background-image: url(../tableleftdown.gif);
color: #336699;
}

in my Master.css page it works as expected, that is, when the mouse goes through the Navigation link, the image appears and the color of the text is altered.

What I would like to know is how to make EXACTLY the same effect to the Navigation link where the user is (that is, to indicate the page the user is).  

I have already tried to create

#divNavigation li a:current
{
 background-image: url(../tableleftdown.gif);
 color: #336699;
}

and

#divNavigation li a:active
{
 background-image: url(../tableleftdown.gif);
 color: #336699;
}

and nothing happens.

Thanks,
fskilnik
0
Comment
Question by:fskilnik
2 Comments
 
LVL 30

Accepted Solution

by:
VirusMinus earned 500 total points
ID: 18804438
CSS cannot determine what page the user is currently on.

the only states available on links are :link, :visited, :hover and :active (this is the color when you click your mouse on the link to the point that you release the mouse)

to do what you're after, either through server side code or in the HTML give the current page a class

eg.

<div id="divNavigation">
<ul>
<li><a href="xyz.htm" class="current">xyz</a></li>
<li><a href="xyz.htm" >xyz</a></li>
<li><a href="xyz.htm" >xyz</a></li>
</ul>


now in your css do this;

#divNavigation li a:hover, #divNavigation li a.current
{
background-image: url(../tableleftdown.gif);
color: #336699;
}
0
 

Author Comment

by:fskilnik
ID: 18809297
Great explanation, great answer.

100% successfull.     :)

Thanks A LOT, VirusMinus!!
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

758 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now