On 08/28/2010 02:57 PM, Kevin Rodenhofer wrote:
Yeah. a:active doesn't do that. There is, however, a neat trick I
found somewhere that will do this for you.
First, on each and every page represented in the navigation, you have
to give the body tag an id like:
<body id="home"> or <body id="products"> Whatever the page is...
Then, in the navigation you need a separate id for each navigation
element (I'm just showing the hrefs):
<a href="/" id="homenav">Home</a> or <a href="products.htm"
id="productsnav">Products</a> and so on...
Then, in your CSS you need:
body#home a#homenav,
body#services a#productsnav {
background: rgb(212,201,182); <--- substitute whatever color you want
here (make sure it's different than the default color)...
}
You can see how you'd add additional pages...
Now, when you navigate to a page, the associated link/button is
highlighted.
Hope this helps...
On 8/28/2010 11:12 AM, Martin wrote:
Hi there,
I've been googling for it and a:active doesn't work as I'd like it to.
I've got a menu. When I hover over a menu item the colour changes to
orange. I'd like it
to stay orange as long as I'm on this particular page for visitors to
know where they are at the moment.
That's my css:
===============================
ul.nav {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
overflow: hidden;
/* background: url(images/menu-background-grey.gif) repeat-x; */
}
ul.nav li {
float: right;
}
ul.nav a {
display: block;
padding: 0 2em;
line-height: 40px;
text-decoration: none;
background: url(images/divider1.png) repeat-y right top;
color: grey;
}
ul.nav a:hover, ul.nav a:focus {
color: orange;
}
=======================
I tried the following:
ul.nav a: hover, ul.nav a:focus, ul.nav a:active {
color: orange;
}
but it doesn't work like I thought. The moment I remove the mouse
pointer from the link, it goes
back to gray.
Thank you
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Thanks a lot guys
I can move on with the website now.
regards
martin
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
