Hello, I'm trying to create a div box with round corners and shadows all around it, what is the best way to do it? Its height has to be auto stretched and the width will be fixed. Here is the image so you can see what I mean: http://www.helpnetwork.org/tutzor/images/main-bg.gif Thanks in advance.
I think the best way is working with two images. A top-image with only the round corners on the top and a bottom image very high with the bottom corners. Maybe it's even better to use three images (so you can use smaller images) but this is probably the easiest way:
That is what I do when working with fixed widths, but if you are looking for something more dynamic without images try javascripts. They have their draw backs too though, render time, compatibility, and sometimes massive amounts of code added to your document.
I would do it with three divs, so you could have the middle repeat infinitely and still have the rounded corners on the top and bottom. Something like this:
If you mean like this website where the whole page has rounded corners and has shadow around it have a look at the videos chris did about the creation (from scratch) of this website.
It's already late here, so sorry for any mistakes, but I just wanted to give you a quick answer, hope I did it well ;)
div#top {background-image: url('../images/top.jpg'); background-repeat: no-repeat;}div#middle {background-image: url('../images/middle.jpg'); background-repeat: repeat-y;}
div#bottom {background-image: url('../images/bottom.jpg'); background-repeat: no-repeat;}
Of course, you have to give the top and bottom dimensions since they're empty, etc. But that's the general setup.