I want to make a list with nice buttons that are long as the screen (compatible with more screens)....

I will use 3 images (left , middle and right) ... something like this (of course, smaller):

http://h.imagehost.org/0484/1_87.png


The middle part will repeat itself to "fill" the button. I want to get something like this:

http://h.imagehost.org/0221/bs.png




I have 2 ideas:


1) To make an <div> with background-image:url('middle.bmp'); background-repeat:repeat-x; and in that <div> to have another 2 <div>s one with left.bmp (and placed left) and another one with right.bmp (and placed right) ....

(tried it but can't make it work good, I only see the left image and the repeted middle one )


2) To make an <div> containet that have 3 <div>s inside :
one div with the left image as background (placed at the left)
one div in the middle with the repeted middle image
one div with the right image as background (placed at the right)



Please help me .... also, what is better image format for the images on the web: JPG or PNG ?

You could try the sliding doors techniqu (http://www.alistapart.com/articles/slidingdoors/)e for this - which only requires two, not three images.

Solved using an TABLE (1 row / 3 coloms) :)

You might want to check out Why You Shouldn’t Use Tables for Web Layouts (http://www.wplancer.com/why-you-shouldnt-use-tables-for-web-layouts/)

You might want to check out Why You Shouldn’t Use Tables for Web Layouts (http://www.wplancer.com/why-you-shouldnt-use-tables-for-web-layouts/)

Thanks, but for what I need is good enough. Here it is (the "noise" is becouse I worked preety much at the buttons and I don't want someone simply get them by editing the image :) )


http://i.imagehost.org/0320/test.jpg


Works on all screens , no matter how big or small is (no smaller than 240px :) )