CSS-DIV Expandable Content Box
This is the DIV version to the previous tabular version! Lets get started.
After you're done creating and saving your 3 slices..
.. into your site>images folder, open Notepad or your plain text editor software and type/copy&paste the following HTML code:
Snippet 1
-
<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
Snippet 2
.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!