active link background?
I have just realised after alot of head ache that the a:active actually means when your mouse is down, not when on the current page.
Im trying to figure out how i can set a background image for a link when you are on the current page???
Any help appreciated!
teammatt3 posted this at 01:14 — 11th June 2007.
He has: 2,102 posts
Joined: Sep 2003
a:active is "active" when you're on that page *but* you have to make sure that a:active comes after a:hover
http://www.w3schools.com/css/css_pseudo_classes.asp <- More there
webwiz posted this at 05:23 — 11th June 2007.
He has: 629 posts
Joined: May 2007
I'm not exactly sure what you mean:
Do you want to add a background image just to a link when it's a link to the current page, and not otherwise?
For that, you could use a special class, say 'class="here";' and style a.here with the background image you want to use. Another way of styling a site navigation, where, say, you are including the same code for the navigation on every page, you could do something like this:
HTML
CSS
#sitenav a {background: #fff none; ...}
.home .homelink a {background-image: url(images/here-bg.png);}
.about .aboutlink a {background-image: url(images/here-bg.png);}
.contact .contactlink a {background-image: url(images/here-bg.png);}
But this may be totally inappropriate. Can you give us a page to look at, and a description of how you want it to work?
Cordially, David
(whose sig keeps vanishing)
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
benf posted this at 23:46 — 11th June 2007.
They have: 426 posts
Joined: Feb 2005
What im trying to say is, a:active only works when you actually hold down the mouse key on the link (it is active) not when the link you press and are on that page. For example, you click on home.html (the actual link, a tag) and hold it down, the background will change, becuase it is active. However when you are actually on home.html the background will not show???
How can i make the background change on a link when you are on that actual page?
Good Value Professional VPS Hosting
demonhale posted this at 01:30 — 12th June 2007.
He has: 3,278 posts
Joined: May 2005
You can assign background properties for the link, visited and hover, that way, when you're on the page the background is retained whether the link is clicked or not... you can assign a separate BG for the hover if you like so when your mouse is over the link, the BG changes colours...
/*retains same link and bg color for active, regular, visited */
a:link, a:active, a:visited {
color: #FF0000;
background: #000000;
}
/* assigns different bg and text color for hover */
a:hover {
color: #00FF00;
background: #c00000;
}
or you can simply use a wrapper div and assign a background to the wrapper that holds your links...
timjpriebe posted this at 13:17 — 12th June 2007.
He has: 2,667 posts
Joined: Dec 2004
I believe you're asking how to assign CSS properties when a link is the current page. Something like the current page's hyperlink in the menu being bright red, while the rest are black. That sort of thing, right?
As far as I know, the only way to do that is with scripting. The last time I did something like that, I had to use PHP. I created a class for the link that was the current page, then used PHP to determine which of the links used that class.
It might look something like this...
<li><a <?phpif (ereg('index.php',$_SERVER['PHP_SELF']))
{
echo 'class="currentpage" ';
}
?>href="index.php">Main</a></li>
Tim
http://www.tandswebdesign.com
webwiz posted this at 00:12 — 13th June 2007.
He has: 629 posts
Joined: May 2007
Umm. I thought that was in the solution I offered... ?
Cordially, David.
--
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
benf posted this at 10:06 — 13th June 2007.
They have: 426 posts
Joined: Feb 2005
Is there no way javascript can look at the current URL and match it to a link in the menu bar changing the style of that link?
Maybe a little complicated, just that im using a CMS and have no idea where the PHP is that generates the HTML.
Maybe parse the innerHTML of the specific
then parse the
and then parse the looking for the URL??
Good Value Professional VPS Hosting
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.