CSS repeating bg for button

[jwalker80]

Hi,
I am trying to create buttons with css and html with the text on the buttons being html links.

Have a look at what I am trying to create in the screen shot.
I know I wont be able to use the font in html so I will use Verdana. I have tried creating an unordered list and displaying inline with styling but cant achieve to effect.

I have taken a sliver of the image for the background and repeated it across. How do I get the 'endcaps' of the button, will i insert images for these?

I could take the whole image and put it in the background but I do not want to do this because the buttons will be different lengths. Also the buttons will be localised eventually so they will be unpredictable lengths.

Any ideas?

[karinne]

Why don't you do the whole thing a link?!

Use this method : Pure CSS rollovers without Javascript

[jwalker80]

The content will be localised into different languages in the future, this means that to have images for different links in all languages would be a lot of work.

It is also going to go into a system of CMS so that users can customise their own navigation.

If there is a way of doing this with CSS/HTML rather than just cutting and linking images it would be a lot more ideal...

[BGarner]

If you dont need the end caps you could always do it like this one i wrote.

http://www.williamrivero.co.nr

Don't copy the code, it's too messy.