The new forums will be named Coin Return (based on the most recent vote)! You can check on the status and timeline of the transition to the new forums here.
The Guiding Principles and New Rules document is now in effect.
HTML/CSS help
KPC
Registered User regular
Registered User regular
Alright dudes and dudettes, I've looked around the net for a solution or for someone to tell me it can't be done, so I'm going to appeal to the hardcore CSS gurus here. Here's my question, and it pertains to links and their active states:
I know that you can use <body> ids so that the links you click in your navigation show up in their active states when you are on that page. What I'd like to know is if there is a way in CSS, without resorting to JavaScript or PHP or witchcraft, to have the same effect using <div> or <img> ids?
To further explain, I know that you can use div/img ids in links to jump around on the same page.
Ex: The picture code is as follows, <img id="001" src="images/designs/fp-001.jpg" >
Clicking <a href="#001">SXSW Tour 2010 Poster</a> takes you to the part of the same page with fp-001.jpg at the top of the browser.
I'd like to do that AND get the link to show its active state. Possible?
Also let me know if I am not explaining what I'd like to do correctly and which part.
I know that you can use <body> ids so that the links you click in your navigation show up in their active states when you are on that page. What I'd like to know is if there is a way in CSS, without resorting to JavaScript or PHP or witchcraft, to have the same effect using <div> or <img> ids?
To further explain, I know that you can use div/img ids in links to jump around on the same page.
Ex: The picture code is as follows, <img id="001" src="images/designs/fp-001.jpg" >
Clicking <a href="#001">SXSW Tour 2010 Poster</a> takes you to the part of the same page with fp-001.jpg at the top of the browser.
I'd like to do that AND get the link to show its active state. Possible?
Also let me know if I am not explaining what I'd like to do correctly and which part.
KPC on
0
Posts
Running a test myself, it sounds like you can strictly through CSS. The net effect is that both the link you clicked on and the link tag it is targeting will both be considered 'active' in the CSS sense, so you could style certain CSS elements with an :active style to accomplish that. However, the quick reference tag must target another anchor tag; you can't target a div that contains your anchor and get the same effect. The solution itself is not particularly elegant.
However, this is MUCH easier (and more cleanly) solved with JavaScript. From the sound of your post, I think you might be feeling a bit of trepidation regarding JavaScript and you're lumping it in with PHP which is a server side technology. The same thing can be more easily done with JavaScript without unintended side effects while also being more flexible.
For example:
<html> <body> <a href="#myLink" onClick="document.getElementById('container').style.backgroundColor ='#FF0000';">Click this link!</a> <a href="http://www.microsoft.com/">Microsoft</a> <div style="height: 1000px; width: 200px; background-color: blue;"> </div> <div id="container"> <a id="myLink" href="http://www.google.com/">Some thing</a> </div> </body> </html>Not only do I get directed right to the link, but I can make the containing div's background color red, apply a CSS class, or to make it blink if I wanted to.
What wikipedia does is use the :visited psuedo class. The problem with this approach is that it will highlight any of the links you've previously clicked, not just the :active one.
After only playing around with the code for a little bit, seems like the limitation with using only CSS is that you can't get the link to be considered active if you link it to a div or img. If you link it to another link, then both links are considered active. Fair assessment?
As for Javascript, you're probably right about me being hesistant to use it. I do understand that it is a good tool to use, but I'd like to see how far one can push CSS before resorting to other means. As it is, CSS3 would allow you to do quite a few things you couldn't before, like transition animations, that you would typically use Javascript or Flash to achieve now, so I'd like to master those aspects that are likely to be widely adopted soon.
Hmm? Webkit browsers already support @font-face and transition animations, and the latter should be in Firefox 4, so I'm not sure what you mean. Internet Explorer is, well, Internet Explorer. As long as you don't make them integral to how your site functions, it should be fine to implement CSS3 in sites now.
I could go on, but this is tangential to your topic. Anso it has been said better here: http://infrequently.org/2010/09/but-ie-9-is-just-around-the-corner/