layout question on rounded corner panes

[latin007]

I’m new at CSS Layouts, and I’m not even sure whether I’ve placed the slices along the right places: I have a two columns on top, and a horizontal bottom content I’d like to auto-expand as the content grows along slices 8, and 11 of the attached layout. I’ve viewed Chris’ video on how to perform a SINGLE column layout, and that seems simple enough; but this I find a bit tricky to do the CSS Layout on due to the rounded corners thing. How do you guys normally do these layouts? Should I use absolute positioning? Any help is appreciated.

Joe

[nickstr]

first of all if you want to

"latin007" wrote:

auto-expand as the content grows along slices 8, and 11

you need to get rid of that gradient and use one single color overlay or a gradient with 2 color not 3 and repeat the top or bottom color where the gradient ends.
I usually create a div id="box" and in it put 3 other divs if the box is with round corners and border all around :
<div id="box">
<div id="box-top"></div> – for the top round corners
<div id="box-mid"></div> – for the box content so you can use a bacground color and borders on right and left
<div id="box-bot"></div> – for the bottom round corners
</div>
or just 2 divs if is just a colour
<div id="box">
<div id="box-top"></div> – for the top round corners
<div id="box-bot"></div> – for the bottom round corners and content
</div>
in your case you could modify the gradient remove the 3d color from the bottom and use the one in the middle, cut the bottom part till the gradient runs into the top color and repeat that color for the content that grows.
Css for that part will be something like this:
#box-top { width:20px; height:50px; background:url(images/top-part.jpg) no-repeat;}
#box-bot { width:200px; background:url(images/bottom-part.jpg} bottom no-repeat #fff;}
maybe use some "min-height:gradient size px" for the bottom part where is not enough content so it wouldn’t look bad

[Author]

Posts