theBruney ScrapBook

Let’s get started!

After you’re done creating and saving your 3 slices..

1. Header
2. Content
3. Footer

<div class="box_container">
<div class="box_header"></div>
<div class="box_content">
<div class="bodytxt">
Your body text here.
</div>
</div>
<div class="box_footer"></div>
</div> <!--End of box_container-->

Here’s the CSS styling

.box_container{  /*Once you give this a defined width, you can also add margin: auto auto; to centre the container*/
width: 608px;
}
.box_header{
background: url(sd_01.gif) no-repeat;
width: 608px;
height: 56px;
}
.box_content{
background: url(sd_02.gif) repeat-y;
width: 608px;
}
.bodytxt{
font-family: century gothic;
font-size: 10px;
color: #339933;
margin: 0 1em 0 2em; /*Set margin values for top=0,
right=1em, bottom="0" left="2"*/
}
.bodytxt p{ /*Remove browser paddings and margins
-THIS IS VERY IMPORTANT*/
margin:0;
padding:0;
}
.bodytxt p{
padding: .5em;  /*Add your desired paragraph paddings. */
}
.box_footer{
background: url(sd_04.gif) no-repeat;
width: 608px;
height: 28px;
}

Please note that you must remove the paragraph margins or else in browsers like Firefox, there will be a space/gap between the header and the content images and the content and the footer images. Once you remove the margins, you can then give padding values to the p tag.
The final result in action here!

Download project files here…