Blog

Here is the approach I take when creating containers that are dynamic in height.

View an example

First I start with a png image of the container.

I open this in Photoshop and create my slices (4 images) from the original image.

Image 1. The header

Image 2. The background that is repeated, only 1px high cut just below the header

Image 3. The bottom gradient of the container. The top is just below the section that is repeated and bottom just above the bottom slice where the corners begin to round.

Image 4. The bottom of the container.
 

Now for putting this together with xhtml and css.

Here is my xhtml:

    <div class="container">
      <h1>Container Demo</h1>
      <div class="main">
        <div class="bottom">
          <p>Add your content here</p><p>Add your content here</p>
        </div>
      </div>
      <img alt="" src="images/bottom.png" width="429" height="11" />
    </div>

and my css:

body {background-color:#fff; margin:40px; font-size:62.5%; line-height:100%; font-family:Arial, Helvetica, Sans-Serif;}

.container{width:429px; background:transparent url(../images/header.png) no-repeat top left;}
.container h1{font-size:1.2em; font-weight:bold; line-height:2em; color:#fff; text-align:center; margin:0;}
.container .main{width:429px; background:transparent url(../images/background.png) repeat-y top left;}
.container img{display:block;}
.container .bottom{width:429px; background:transparent url(../images/gradient.png) no-repeat bottom left; padding:5px 15px;}

A little explanation of what is going on.
Basically it all comes together with the two layers.  The bottom gradient is on top of the main layer.  When content is added  the bottom gradient layer pushes the parent main container down.  We align the bottom gradient at the bottom of the cell with the rest of the background transparent so you see the main repeating background behind it.

Is this how others are doing this? Do you have a better approach that you can share?

Filed under: Web Development   Tags: css, xhtml,
 No Comments »