Hello!

I’ve been taking a look at some sites on and off the last few days to find some inspiration on how best to make an unordered list with hover and active effects. I’ll be using a unique font, so unfortunately, there isn’t anyway around this with pure HTML markup.

I was snooping around the CSS for their site and noticed their links and its hover states actually share the same image. Take a look at one of the link images here.

Just to be precise, this is achieved simply by using..

Is there nothing more to this?

I suppose my real question is, whether this would be one of the more intuitive way of using images in an unordered list with images and hover, active effects.

Update: I suppose the method used for this is for fast rollovers. A tutorial is available at http://www.wellstyled.com/css-nopreload-rollovers.html for those interested.

mr_dimsum…

It’s a bit more complicated then just that. You need to establish X and Y coordinates within your DIV, define the width/height and hide the overflow, indent your text out of sight (-9999px usually) and then create all your href normal, hover and selected states.

Look around a bit more in the CSS there or just google it. The method is pretty well known. Just be careful of images becoming too large.

Hello,

Thanks for the post. I’m aware of those points as well.. Found a couple tutorials since the post.

If you didn’t already come across it, here’s a great explanation of this on A List Apart.

Once you get the hang of this, it’s easy to do.  If I’m doing this with horizontal navigation, I’ll build out what I want the off/deselected state to look like and then in Photoshop, I’ll copy that layer and change what needs to be changed right below the original layer.  If you’re doing something like tabs or squares for your nav, it’s easy to figure out the background position pixels.

For example, if your entire nav image - BOTH the off and on state combined - measures 960px wide and 120px high, you already know that your list items should be 60px high.  And when you set the a:hover, your background’s position will be -60px.

In Photoshop, it helps to use guides.  Set a guide up for each side of where each link in your nav will start and end, then measure their widths...giving you the width of each item for your CSS.  Then, you can either do some basic math and figure out what the margins should be, or just measure from the very left side of your nav to each item’s beginning guide marker.

andculture - 09 May 2008 03:40 PM

indent your text out of sight (-9999px usually) and then create all your href normal, hover and selected states.

Virb.com places the links in <em>’s and than sets the CSS to “Display: none”.. Would you guys recommend just placing them out of sight, or using their method? Seems to be that the out of sight method is a bit more hackish than this method, even though they both work. Safe to say they both work just as well, granted someone doesn’t have a ridiculous large screen?

I’d say either is safe - I’ve used text-indent: -9999px on nearly everything I’ve wanted to do image replacement on since I started writing my own CSS, and it works just fine.

I will say that I tried doing some display: none trickery on a splash page (ugh, I know) about a month ago, and Google banned the website from their index for two days.  (I knew this because I use Google Webmaster Tools on all of my client and personal sites, and they sent a notice through there.)

If Virb is getting away with it, then more power to them, and Google might have different rules for different elements and display properties, but I’d probably still stick with the text-indent method.

As for if I would use em’s...I guess it’s a judgement call.  If you want to be strict about it, I’d have to analyze what content I was actually marking up before I wrapped an em around it when a span might serve it better (semantically speaking).

Great reply.. Thanks for the information. I’ll have to take a look at this a bit more and verify what does what and the repercussions of using whichever method.

Cheers,
D.

Mr Dimsum

Possibly the best article I have seen on this is the one by Jay Elliot Stock.

Elliot is near the top of the tree, so any tuition by him is worthwhile. Works great, semantic etc, etc…