CSS Help

suarve · 9 Sep 2008 at 14:34

Hi,

At a client's request, I created menu using images in photoshop and sliced the result. Each option had the actual image and a rollover image. E.g. home.gif and home_over.gif. Several of these images were placed into a divider called #menu. Now, all this looked nice, displayed correctly etc.

However, the client has now decided that they want something different. They now want the menu as text (they say this will increase their SEO loads. I'm not convinced personally) and want to keep the rollover effect (that would be near impossible to do in CSS).

So, at the minute, i somehow need remake the menu using text (easy with css using a list) and make sure that each rollover image for each option (not every option is the same width) line up with the text.

Have been tempted to use varying width's of the <span> tag and give each span a class with a :hover. E.g. li.homeitem li.homeitem:hover. However, I imagine this would take ages to get lined up perfectly.

Can anyone suggest anything here as I'm running out of ideas.

Thanks

suarve · 9 Sep 2008 at 18:44

Can't do a link as its all at work unfortunately

If it was a menu using a transparent rollover image (like thsi one: http://www.dynamicdrive.com/style/csslibrary/item/solid_block_menu/) it would be easy.

I have the problem in that the menu came originally from a photoshop of the site. Each menu item had a normal state and a rollover state (a seperate layer in photoshop) with varying widths - this worked when i switched the image with some javascript as each image had a different rollover image.

I was having another attempt a bit ago at work - i tried using a different li class for each menu item - which was highly messy.

suarve · 9 Sep 2008 at 19:12

That's what i was thinking, scrap the rollover image and use a transparent image the whole width of the list item. Although, the problem arises when having an image as the text is different lengths for each li.

Although it would be nice to get the menu as text with the rollover.

suarve · 10 Sep 2008 at 18:54

Mammalian said:
just set the background for each li to repeat-x or repeat-y i forget which one it is. this will mean that when the li is increased in size the image is repeated

Yes, that would be the normal way to do it. But the hover image was made in photoshop using several layers to get the effect the client wants. As each li item is a different length of characters (hence each rollover image is a different size) I can't just do a repeat x unfortunately.

Anyways, today I finally did it. I managed to find the original psd file and chopped the rollover images minus the text. I ended up using an li class with a :hover for each list item.

This gave the effect I wanted and I could remove the nasty javascript that was used previously to switch the images (OnMouseOver and the w3 validator never get on)

The problem now is that I have some padding to the left of the first li item that I can't for the life of mine remove. Have tried all the obvious commands like 'margin and padding-left 0px.

I'm about 90% there now. In the the future i'm not using images for rollover's