Susheela’s Blog

Here’s a nifty little exercise. It’s simple, yet effective and looks just a tad fancier than the usual square text box.

How it looks on the web.

See Example
What you’ll need to do is create an image in Photoshop® or Illustrator® (See fig.2)  Make it simple as far as colour scheme goes; remember you’re adding text to this and you may have several similar text and image boxes distributed throughout your page - it can get very busy looking very fast.

You’ll notice, that I’ve kept the background transparent so that I can add a soft drop shadow.  When you export these slices, save the as “.png” so that the transparency transition from the drop shadow is smooth.  The “.gif” format doesn’t do this as well.

By showing rulers and dragging some guides down, you can decide where to make your slices.

fig. 2

Once you’ve done that make sure your layers are merged in order to export all the pieces correctly.  (See fig. 3 all slices are separate.)

You’ll notice that:

• the header takes some of the lower layer;
• the footer starts just above the curves;
• the ‘expandable’ middle section needs to be only a few pixels high.
  

fig. 3

Now, the trick with the code is as follows:
You’d think that you should be able to just make 3 divs, one below the other.  In effect what you’re doing is creating 2 divs, one below the other.  They will always stick together if you use absolute positioning.  All we need to do is anchor the top left corner of the expandable div to the bottom of the header-div.  The box images are the backgrounds to the divs.

The header div can specify height and width, with a background attribute of ‘repeat: no-repeat’.

Do not specify a height attribute for the expandable div.  As for the background on that one, use ‘repeat: repeat-y’ so that the little slice with repeat vertically to fill the area based on content.

Now, here’s the fun part:  create a class for the background of the footer (curved bottom of the box). If the footer is 35 pixels high, then say ‘margin-bottom: -35px’ so that it drops down a measurement equal to its own height where it can be placed behind text, a span, below the middle but within the same div.

Try it!  Here’s some of the code:

(The CSS part)

#box1head {
		position: absolute; left: 0px; top: 0px;
		display: block;
		width: 350px;
		height: 81px;
		background: url(box1head.png);
		repeat: no-repeat;
		}

		#box1body {
		position: absolute; left: 0px; top: 81px;
		display: block;
		width: 350px;
		background-image: url(box1body.png);
		repeat: repeat-y;
		}

		.box1bottom {
		display: block;
		height: 45px;
		margin-bottom:-45px;
     background-image: url(box1bottom.png);
     background-repeat: no-repeat;
     background-position: bottom;
   }

Then in the body type this code (ignore the text attributes for now):

<div id=”box1″>
<div id=”box1head”><h2>header</h2></div>
<div id=”box1body”><p class=”regular”>Aenean mollis scelerisque ipsum. Duis tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra, quam eget euismod tincidunt, metus tellus fringilla neque, ut tempus ante nisl eget ipsum. Donec feugiat augue. Ut feugiat. Integer euismod massa ut enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Aenean mollis scelerisque ipsum. Duis tempor.</p><span class=”box1bottom”><p class=”boxfoot”>Copyright 2009.</p></span></div>
</div>

Enjoy!