View Full Version : Resolved Rounded button using 3 images in CSS ... please help

Jun 21st, 2010, 12:42 AM
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):


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


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 ?

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

Jun 21st, 2010, 09:26 PM
Solved using an TABLE (1 row / 3 coloms) :)

Jun 22nd, 2010, 12:01 AM
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/)

Jun 22nd, 2010, 02:04 AM
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 :) )


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