/    Sign up×
Community /Pin to ProfileBookmark

CSS A:link.Active

Copy linkTweet thisAlerts:
Aug 05.2008

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:

[CODE]#nav1 a:link.active {
color: #000;
background: url(‘Rounded.gif’) no-repeat bottom center;
}[/CODE]

to post a comment
CSS

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@NewsGrailAug 05.2008 — Try

<i>
</i>#nav1 a:link.active {
background:#000 url('Rounded.gif') no-repeat bottom center;
}
Copy linkTweet thisAlerts:
@scouseAug 05.2008 — Wouldn't it be:

<i>
</i>#nav1 a:active {
color: #000;
background: url('Rounded.gif') no-repeat bottom center;
}
Copy linkTweet thisAlerts:
@NewsGrailAug 05.2008 — 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.
Copy linkTweet thisAlerts:
@CentauriAug 05.2008 — As .active is a class name, it should probably come before the pseudo class :[CODE]#nav1 a.active:link[/CODE]
Copy linkTweet thisAlerts:
@wick3dsunnyauthorAug 05.2008 — Unfortunately I've tried all of the them, and it dosent work ?

Any more suggestions guys?
Copy linkTweet thisAlerts:
@CentauriAug 05.2008 — What is the html for this area to see how you have applied the .active class ?
Copy linkTweet thisAlerts:
@wick3dsunnyauthorAug 06.2008 — Well here'z the entire code for the navigation bar!

[CODE]<!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>[/CODE]
Copy linkTweet thisAlerts:
@CentauriAug 06.2008 — 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.
Copy linkTweet thisAlerts:
@wick3dsunnyauthorAug 06.2008 — 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!
Copy linkTweet thisAlerts:
@wick3dsunnyauthorAug 06.2008 — 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 ?
Copy linkTweet thisAlerts:
@CentauriAug 06.2008 — 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.
×

Success!

Help @wick3dsunny spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...