Expandable Content Boxes

Expandable Content Boxes

Start a new document, 347x220 pixels with a white background.

Make a new layer & name it "Base" and then fill your canvas with the colour #F6F4F4.

Open up the blending options for this layer and select Bevel & Emboss and use the below settings:

And then Stroke (and then press OK):

Press CTRL and click the layer you named "Base" in the layers pallet. This should select the exisiting layer.
Now go to [ Select > Modify > Contract ] and put "4" pixels into the option box and press OK.
And now press delete, this should delete the selection and create a nice even border. Press CTRL+D to deselect. It should now look like below:

We now need to slice your content box. We are going to slice it in a way that we can code it to fill a certain % of the page later on.

Select the slice tool (K). Using the slice tool make a slice in the top left hand corner as shown below, zoom in to help you:

Now double click the slice to bring up the options, fill them in as shown below & leave the rest blank:

Now repeat this step for the top right hand corner, bottom left & bottom right corners.
Obviously changing the name of the slices to which ever corner, i.e. right_corner, bottom_left_corner etc.
You must make sure you use the same width's and heights I used in my example. Each corner should be similar to below:

Now using the slice tool slice each sides of the border, name them like left, top, right, bottom. You should have something looking like below:

And now slice the white main space, name it "bg". Should be looking like below:

We now need to save it for the web. Go to [ File > Save For Web ]. Press CTRL+A and select gif. Shown below.

Then click save and save as "contentbox.html" in a folder on you PC!

Open up contentbox.html in your favourite html editor, I use dreamweaver. You should now see your content box coded in html tables

Select the image top.gif, as shown below.

We now need to delete the image and set it to its table background. Your code should look like below:

We now need to do the same thing for left.gif, right.gif & bottom.gif

Once thats done, delete the bg.gif image.

Insert content where bg.gif was and you will notice you can put in as much content as you like!

To view my results, please click here!