Forums

Areas that grow when more content is added

Permalink
I am working on a design for a theme and I can not figure out what its called or how to do it when you add more content to an area and it gets bigger. I know you have to have a seperate top, wrapper and bottom image. Can anyone help thanks.
 
Stiny replied on at Permalink Reply
Stiny
Do you mean you just want the div area to grow the more material you put in? This should be automatic, unless there is already a pre-defined height attribute in the CSS.

What exactly are you trying to do? If I'm not understanding you, could you possibly show us an example?
subdeli replied on at Permalink Reply
Yes but the area is a rounded image so I have the top part, the body, and the bottom of seperate images so the body image can repeat to fit the content.
Stiny replied on at Permalink Reply
Stiny
I see what you're doin'. Okay, this is a pretty easy trick, you need 4 divs. One is the wrapper, with the min-height set to be the height of the header and footer div added together. Inside, you have the header, body, and footer div. Have a background for the header, and set the height and width ot match the background image. Same for the footer. For the middle body div, assign a background that can loop. This means that it will look pretty when you assign y-repeat to it. Apply a width, but no specific height. This way, you can keep writing, the background keeps repeating, and it all looks seamless.

For example:
<style>
#wrapper {
min-height: 50px;
width: 200px;
}
#wrapper #header {
height: 25px;
width: 200px;
background-image: url("header.png");
}
#wrapper #body {
width: 200px;
background-image: url("body.png");
background-repeat: y-repeat;
}
Viewing 15 lines of 21 lines. View entire code block.
TheRealSean replied on at Permalink Reply
TheRealSean
If you are not to fussed about older browsers you can also use pseudo elements,

:before and :after

Its a little cleaner on the HTML as it only displays one div

I use the multiple div method for compatibility.

.divClass{background:url(images/image.png) repeat-y; position:relative;}
.divClass:before, .divClass:after{ display:block; content:""; position:absolute;}
.divClass:before{background:url(images/image.png)no-repeat; top:-X(image height);}
.divClass:after{background:url(images/image.png) no-repeat; bottom:X(image height);}

there is more information herehttp://nicolasgallagher.com/multiple-backgrounds-and-borders-with-c...
or a screencasthttp://css-tricks.com/video-screencasts/94-intro-to-pseudo-elements...

Or if you wanted to try CSS3 you could use
border-radius to achieve the look you are after?
there is a great example site here with the cross browser code.

IE support limited though -http://css3please.com/
boomgraphics replied on at Permalink Reply
boomgraphics
bulletproof way is to use a wrapper table and a sprite.
subdeli replied on at Permalink Reply
I ended up just going for the border-radius route.