If I want a rounded corner box, with a colour gradient in and then want to position text in the box, how should I go about it. Do I have to create an image and use that as a bckground image or is that the wrong way?
you could do something like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> * {margin:0; padding:0; border:0;} body{background-color:#fff;} #container{ position:absolute; margin-left:-400px; margin-top:-282.5px; width:800px; height:565px; z-index:1; top: 50%; left: 50%; background:url(fadedbluebg.gif) top repeat-x; } #topedge{position:relative; margin:0; height:20px; width:800px; background-image:url(topedge.jpg);} #content{position:relative; margin:0; height:525px; width:800px;} #bottomedge{position:relative; margin:0; height:20px; width:800px; background-image:url(bottomedge.jpg);} </style> </head> <body> <div id="container"> <div id="topedge"></div> <div id="content"></div> <div id="bottomedge"></div> </div> </body> </html>
Thanks mr_wonderful. Is this the way you'd go about adding more, just add another div with absolute positioning on top of the exisitng one with 3 images, a top, bottom and and gradient image?
It's up to you how you position the container, but the structure can stay the same. (As is, the positioning and margins are designed to center[horizontally&vertically] the container div) It's just an example, I don't know if you'll be able to use it for your purpose.
BTW, if you wanted to use smaller images for the top and bottom, you could simply float one small 20x20 corner image to the left and also another one to the right. same for the top and bottom, with 4 separate and different 20x20 corner images
assuming you aren't getting too complex, you might want to look at a sliding doors or even go further with a image recombination technique. http://battletech.hopto.org/html_tutorials/eightcorners/template.html if you're borders are 'simple', you might not need images at all. http://battletech.hopto.org/html_tutorials/rounded_css_borders/