CSS Help

suarve

suarve

suarve

Soldato
Joined
8 Oct 2005
Posts
4,184
Location
Midlands, UK
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
 
I've got a few ideas but don't know if they would work with what you want to do. Can you please send a link to the page.
 
suarve said:
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
Click to expand...

Just use 3 components for your rollovers, a left edge, a stretchable background image for the centre/text content and a right edge, there are loads of list based menu's you can rip the code from on http://www.dynamicdrive.com/style/
 
suarve said:
Hi, 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).
Click to expand...

It will make a difference.


Can you put up an example so we can see? There isn't much navigation wise that can't be done with a list and some css.
 
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.
 
Last edited:
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.
 
Last edited:
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
Click to expand...

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 :)
 
Helpful tips if needed.

It's better pracice to define all padding if you're going to do it, some browsers assume a default amount if none is set.

If you set the left padding particular browsers will assume an amount for top, bottom and right.

You can use shorthand like this though...
Code: 
padding:0 0 0 0;
Some people may find it harder to remember which number refers to which side, just remember it's North, East, South, West, so Top - Right - Bottom - Left.
Code: 
padding:0 0 0 10px;
Would give you 10px of padding on the left.

Padding applies to space inside an element, whatever your element may be, div, table and so on....

Margin refers to the space around the outside of said element.

If you want to supply the area of code you're having an issue with or a link to a test page with the menu on i'm sure we can help you out.
 
You must log in or register to reply here.
Back
Top Bottom