CSS Learn how to create a 3 part template with rounded corners.. CSS guides, tutorials and help

Date Posted: Sunday 07th of February 2010 | Category: CSS

CSS Learn how to create a 3 part template with rounded corners.
Create a gradient background in Photoshop, GIMP and save this as a .gif.

Create your images for the templates as .png in Photoshop, GIMP.

You will then have four images.

background.gif
top.png
middle.png
bottom.png

Make sure all the images are in the same folder. Copy and paste the code below and save this as index.html

View the document in your web browser.

This is a basic 3 part template in CSS. Saving your images in .png format will allow you to apply drop shadows, outer glows to your images without loosing any quality.

It will also allow you to create and add a gradient background, giving you a web2 style template for your websites.

<style>
body
{
background-image: url(background.gif);
margin-top:0px;
}

.boxtop
{
/*make this the same size as the top image*/
display:block;
width:1000px;
height:150px;
/*set the image as a background*/
background-position:center;
background-repeat:no-repeat;
background-image:url(top.png);
}

.boxmiddle
{
/*make this the same size as the top image*/
display:block;
width:1000px;
/*set the image as a background*/
background-position:center;
background-repeat:repeat;
background-image:url(middle.png);
}

.boxbottom
{
/*make this the same width as the bottom image*/
/*don’t set the height as this needs to be flexible*/
display:block;
width:1000px;
height:150px;
/*set the image as a background*/
background-position:center;
background-repeat:no-repeat;
background-image:url(bottom.png);
}
</style>