[braxyBRAX]

Hey all.

So, this is my first post on the site (also the main reason I joined, second being looks handy). Anyway, I'm working on creating several fan/personal sites, and one thing I want to do on several of them is have an expandable content area. I'm at work at the moment, so the best example I can give is this: boring paint example

I'm curious to know how to do this with images, so that the content box is positioned just below the header - a bit of the background showing. I'm also fond of rounded corners and fancy content headers, so I'd like to learn how to have a top strip of image fixed, with the middle repeating down the y axis depending on the content, and then a non-repeating footer which sits at the bottom (obviously) with a bit of margin.

I'm also interested in learning how to do this without images. So just solid colour/shape stuff :3

Also, with the first I've actually managed to do that with my character showcase. Its not live yet so I can't share it, but basically its as so: 'nother crappy paint example

[MaverickDavidian]

Have you tried padding? Like nyah:

W3 Schools: CSS Padding

Edit: Also, if you use <div> areas, I've found there's already a little "give" between blocks. The padding above should control that more finely though.

This post has been edited by MaverickDavidian: 02 March 2011 - 11:59 PM

[enjoibp3]

The first and probably the best option would be experiment with css3 With css3 you have the ability to create rounded corners without any use of graphics! This method will also solve and repeating issues because its just a div container The only downfall is not all browsers support it YET atleast I don't think so haha.

Check out this tutorial on rounded corners:

http://www.css3.info...rounded-border/