At 02:27 PM 2/8/2006, kvnmcwebn wrote:
Im thinking about making a vertical
navigation list with rounded corner(all 4) buttons.
I would like to uses two images-for the right and left ends- and a 1px
repeater background image running behind.
Should i just place two end images on either side of the button text and
then use css for the background or is there some way of getting all 3 images
in the css as background images?
There are various ways to get rounded-corner buttons. The way you're
suggesting -- capping the sides [with fixed-height images] and
filling the middle with a stretchable width -- doesn't sound like it
will accommodate text-resizing, because of course text enlarges
vertically as well as horizontally. A common goal is to create a
curved-corner box that stretches naturally in both directions.
By the way, you probably only need two images to get that horizontal
stretch, e.g. a lefthand cap (aligned left) and a righthand piece
(aligned right) that includes a very long width. If the lefthand cap
lies on top of the righthand piece, as the box expands horizontally
more and more of the righthand piece is revealed. If the long piece
is, say, one or two thousand pixels wide, it's unlikely to break in
text-resizing even though it doesn't use a repeating background.
If your box edge is really just a one-pixel line, why use an image at
all for the top, bottom, and sides? E.g., {border-top: 1px solid #XXX;}
Francky Kleyneman demonstrates a technique that uses images* for the
top bottom, including all four corners, and a simple CSS border for
the sides. He does this by adding extra (empty) divs clustered
around the content to support the imagery:
http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm
* He actually uses just one image, making use of the four quadrants
of it separately as the backgrounds for the four parts of his boxes.
Francky's technique works fine unless you need a more complex box
edge, say transparent edges, drop-shadows, etc.
Stu Nicholls demonstrates a couple of techniques:
- using a very large text bullet to create the curves at each corner:
http://www.cssplay.co.uk/boxes/curves.html
This technique breaks easily on text-resizing, although it might have
potential to work with further tweaking since the corner bullets
resize with the content text.
- snazzy borders based on a technique by Alessandro Fulciniti in
which empty elements are nested around the content to contain borders
of staggered lengths:
http://www.cssplay.co.uk/boxes/snazzy.html
- and krazy korners using a similar technique:
http://www.cssplay.co.uk/boxes/krazy.html
Since none of these techniques use images they don't support
transparency, although you can create interestingly complex edges by
varying the border colors.
If you google css rounded corners I'm sure you'll find others.
Good luck,
Paul
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
