CSS corners and background

[vlad230]

hi guys!

I need to make a rounded corner "box" which can be assigned variable height depending of the text that will be in the box.

So, I have created 2 images: a top and a bottom image that are both 125 px high (the have to be that high because the box background is a gradient ) and have 4 rounded corners.

this is the css code that I have used:

#boxinpage{float: left; display: inline; width: 580px; margin-left: 5px; margin-top: 10px; }

.container-1 {
        background: #f3f3f3 url(images/bg/reviews/top.gif) top no-repeat;

    }

.container-2 {
        background: url(images/bg/reviews/bottom.gif) bottom no-repeat;
    }
.container-3 {
		padding: 23px 5px 10px 5px;
		
    }

and this is the html:

<div id="boxinpage">
		<div class="container-1">
			<div class="container-2">
				<div class="container-3">

                                Content goes here....

                                </div>
                        </div>
                 </div>
</div>

The problem is that the default background color that will have to fill the space between the two images is also appearing under the rounded corners and it looks horrible!

Could anyone tell me how could I make the background color to appear with some 10px lower from the top and bottom such that the corners will look ok?

Please take a look at the attached picture to know what I'm talking about

Thanks,
Vlad

 

[vlad230]

I've updated the CSS code :

.container-1 {
        background: url(images/bg/reviews/top.gif) top no-repeat;
		padding: 23px 0px 0px 0px;

    }

.container-2 {
        background: url(images/bg/reviews/bottom.gif) bottom no-repeat;
		padding: 0px 5px 10px 5px;
    }
.container-3 {
		background: #f3f3f3;
		
    }

and the html:

<div class="container-3">
			<div class="container-1">
				<div class="container-2">
                                Content goes here...
                                </div>
                        </div>
</div>

But I still get the same end result....

PLEASE HELP

 

[nasaboy007]

you could make the corner div have just the image, then a div with float:left that has the color and expands, and then the right corner div (just for the top). then clear the float, do the middle div, and then do the same thing for the btotom.

like this:

<div>
<div style="background: url(images/bg/reviews/topleft.gif) top no-repeat; height: 25px; width: 25px;"></div>
<div style="background-color: grey; height: 25px;"></div>
<div style="float: right; background: url(images/bg/reviews/topright.gif) top no-repeat; height: 25px; width: 25px"></div>
</div>
<div class="middle">
content
</div>
<!-- repeat stuff at top except with bottom images -->

how exactly are your top.gif etc files set up? is it one long image or is it just the corner or what




edit: an alternative is the generate the curves on the fly using js/css. i use http://www.html.it/articoli/niftycube/index.html and its pretty good

 

[vlad230]

The images are exactly as in the attached image: 125 px high and 580 px wide .
The images need to have a height of 125 px because they have to make a gradient effect.

I can't make a separate div that contains the top or bottom images because I need to have content over them.