PDA

Click to See Complete Forum and Search --> : CSS A:link.Active

wick3dsunny
08-05-2008, 02:36 AM
Hi Guys,

I had a navigation menu on my website with 3 Links linked to the same page ( different anchors ). What i wanted is to change background of the links when someone is there on that anchor link.

So Suppose i have Link1 Link2 Link3 and you click Link3. Then Link3 gets a background image.

I've tried something like this but it dosent work:

#nav1 a:link.active {
color: #000;
background: url('Rounded.gif') no-repeat bottom center;
}
NewsGrail
08-05-2008, 02:43 AM
Try


#nav1 a:link.active {
background:#000 url('Rounded.gif') no-repeat bottom center;
}
scouse
08-05-2008, 03:44 AM
Wouldn't it be:


#nav1 a:active {
color: #000;
background: url('Rounded.gif') no-repeat bottom center;
}
NewsGrail
08-05-2008, 03:46 AM
It can be, but doing them all at once is shorter. I thought it wouldn't work without the color declaration in the background definition but apparently that is fine.
Centauri
08-05-2008, 05:16 AM
As .active is a class name, it should probably come before the pseudo class :#nav1 a.active:link
wick3dsunny
08-05-2008, 08:39 AM
Unfortunately I've tried all of the them, and it dosent work :(

Any more suggestions guys?
Centauri
08-05-2008, 08:49 AM
What is the html for this area to see how you have applied the .active class ?
wick3dsunny
08-05-2008, 10:29 PM
Well here'z the entire code for the navigation bar!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<html>
<head>
<title>Preview!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
.container {
width: 500px;
padding: 15px;
margin: 3px 0 20px 0;
border: 1px solid #ccc;
background: #fff;
}

/* rounded */

#nav {
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #9FB1BC;
}

#nav li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}

#nav a:link, #nav a:visited {
float: left;
font-size: 10px;
line-height: 14px;
font-weight: bold;
padding: 0 12px 6px 12px;
text-decoration: none;
color: #708491;
}

#nav a:link.active, #nav a:visited.active, #nav a:hover {
color: #000;
background: url(rounded.gif) no-repeat bottom center;
}
-->
</style>
<style type="text/css">
<!--
/* code for presentation purpose (CSS preview) */
body {
font-family: verdana, sans-serif;
font-size: 11px;
background: #eeeeee;
}

h4 {
font-size: 100%;
color: #999;
margin: 0;
}
-->
</style>
</head>

<body>

<div class="container">
<ul id="nav">
<!-- CSS Tabs -->
<li><a href="">Information</a></li>
<li><a href="">Directory</a></li>
<li><a class="active" href="">Online Contact Form</a></li>

</ul>
</div>
</body>
</html>
Centauri
08-05-2008, 10:51 PM
Provided rounded.gif is in the same folder as the html file, and the filename is correct, it should work..... Maybe a link to the example online may be needed if you cannot sort it.
wick3dsunny
08-05-2008, 11:10 PM
I dont think the Rounded.gif is a problem since the hover works.

What is not working is, suppose i am on link 1, it dosent display background rounded.gif on that link!
wick3dsunny
08-05-2008, 11:12 PM
Also, if you notice, on the 3rd li, therez a class="active" which displays the background image on the 3rd li.. However this sorts the problem if i have different pages and change the class to whateva the page is pointing to.

But my problem is that all the three li's are pointing towards different anchors to the same page. How do i work with that ?
Centauri
08-05-2008, 11:32 PM
Ahh, that is clearer. If they are pointing to the same page, then you would need javascript to dynamically change the class to the appropriate link, but I'm not sure if that would work if the link was clicked from a previous page - it may be possible for javascript to sniff the url target on page load, and apply the class based on that. Probably better off asking in the Javascript forum.