This is the celebrated journal of Mr. Simon Collison A.K.A Colly

Ticked-off visited links Reloaded

21st July 2004

When CollyLogic launched, I was incredibly surprised by the response to the Ticked-Off Links I created for the sidebar. I should say a massive thank you to the many, many folks who linked to the original tutorial detailing two methods of implementation.

Firstly, there was my original quick method, then a second method using only one image to display the three different link states. Both worked a treat, but were still fairly CSS-heavy, and needed a class to be attached to every sidebar link. Not good semantics, not good for a potential redesign, and not good for page weight.

So, here’s the third version. It’s lean, it’s clean. It requires no amendments to the markup, leaving your unordered list slim and elegant. All the work is done by some very slim CSS, and one background image.

No, not this sort of tick

The new, slimmer CSS
#sidebar ul {
list-style-type:none;
padding:3px;
}

#sidebar li a {
display:block;
line-height:150%;
width:239px;
background:url(ticks_grey.gif);
text-decoration:none;
}

#sidebar li a:link, a:active {
color:#666;
}

#sidebar li a:hover {
color:#F33;
background-position: 0 -20px;
}

#sidebar li a:visited {
background-position: 0 -40px;
}

Responses

Tim

# Tim responded on 21st July 2004 with...

I’ve been admiring your sidebar links for a week or so, and have recently tried something similar on a page I’m working on.  I’ll have to incorporate this.  Thanks for the great tutorial.

Tony

# Tony responded on 21st July 2004 with...

Nice.  Very nice.  And very, very clean.  Good job of polishing.  And of course, the original idea is still brilliant.

marko

# marko responded on 21st July 2004 with...

Once again—very nice thinking, however—there’s always some room for improvement:

* #sidebar li a:link { color:#666; } #sidebar li a:active { color:#666; } is unneccessary, as the color once defined by the master state #sidebar li a remains through all other states, unless otherwisely defined.

* sidebar links doesn’t look very nice when you resize font, because you are using image which has different parts (states) one above the other. I suggest you place these different parts one beside the other. Each link itself shouldn’t stretch more than 239px (which is defined in CSS file), so there’s no worry some unexpected part of bg-image will reveal during font resizing.

* Last, but not least—there’s also a pseudo-class (well, i’d rather say a combination of pseudo-classes)—a:visited:hover which enables you the fourth state.

Personaly (and by the W3C guidelines) it’s far more better that :hover take precedence over :visited

For more info and examples feel free to read http://webdesign.maratz.com/lab/visited_links_styling/

Simon Collison

# Simon Collison responded on 21st July 2004 with...

Marko, good idea about using one image with the states side by side. I assume you refer to text resizing using browser settings, as the styles I offer through my style switcher do scale well, as they have specific styles inherent. I’ll take a look at browser-based resizing…

As for showing a:link and a:visited, they’re there purely to show how it can be incorporated into the CSS, as I think many readers may want to make use of these classes aside from non-link list elements (where non-links would be a different colour or decoration for example).

And finally, I guess which class takes precedence over which is down to personal taste. I used to have hover over visited, but decided that constant ticks were more suitable in this situation.

Cheers for the sensible feedback.

Derek Featherstone

# Derek Featherstone responded on 21st July 2004 with...

Hi Simon, nice stuff, again… Nothing quite like refactoring CSS!!

Just one quick point—what about adding the :focus pseudo-class to give the same effect as a :hover so that keyboard users get the same benefit as mouse users? Of course, :focus isn’t going to work properly for IE users—you’ll need to triple up and use :active for IE users. It would be a nice added touch to an already useful implementation…

Simon Collison

# Simon Collison responded on 21st July 2004 with...

Ah, the eternally echoing statement:

...isn?t going to work properly for IE users

Still, good suggestion Derek. Paul Griffin has some good info on making :focus work on IE, which I need to read!

Derek Featherstone

# Derek Featherstone responded on 21st July 2004 with...

Paul Griffin has some good info on making :focus work on IE, which I need to read!

Interesting stuff indeed… I’ll read up on it myself as well… though, in this case, I think simply using the :active pseudoclass will provide the same effect as the :focus pseudoclass will… Of course, that may conflict with your other :active rule, in terms of both style, and precedence, so I’ll make no guarantees… (i.e., I tried it quickly and it had no effect) ;)

Fernando Dunn II

# Fernando Dunn II responded on 25th July 2004 with...

Nice tutorial.

Dan Cederholm revised his tutorial for clickable image links. I would have advised you to use it, but with your multiple image states, it may need more trickery to deploy.

Maybe I’ll take it on. ;)

Simon Collison

# Simon Collison responded on 25th July 2004 with...

But Dan’s method requires a unique id to be added to each line of markup - exactly what I have evolved from. My aim is to keep the markup entirely clean. Yes, if you need a different image for each link (which has security issues) then it’s useful, but the ticks don’t need that. If you’re looking to make a list with unique bullets, then yes, I’d look no further than Dan’s article for that.

Kim Siever

# Kim Siever responded on 30th July 2004 with...

I just came across this site and I have to say there are a lot of cool resources here.

I love this script. I wish I knew about this before I created my portfolio. I used a similar technique, but yours is more visually appealing.

http://people.uleth.ca/~kim.siever/

Warren

# Warren responded on 17th November 2004 with...

I’m interested in doing something similar to the above, however, unlike using an ordered list, my images will be residing side by side, and once visited, will be lightly greyed out.

So, you have a picture of a tiny page, you click on in for more info, and the image representing the visited link will be of the same tiny page, lightly greyed out.

Does this make sense and is it achievable?

Warren

Responses are now disabled Your ability to respond is disabled automatically some 30 days after articles are published, or manually much sooner if spamming guttersnipes target a particular article.

Prev 252 Next

Superfluous Aside

Archived in HTML & CSS, Design & Web

This post's Short URL is http://col.ly/s/

There are 11 responses

External References

Copyright © Mr. Simon Collison 2003-2014. Protected and licensed under a Creative Commons License. Grab the RSS feed

Engineered in Nottingham, scaffolded by ExpressionEngine, steam-pumped by United & kept alive with tea and hugs.