Building a template file:

Jorge Blanco
Webmaster

Other articles written by this author

Building a template file.
By Jorge Blanco

STEP 4: CSS Styles PART I

I mentioned CSS styles before, and now we are going to do them, the styles are always preferred in the header of the page that means between the <head>...</head> tags. Styles are always enclosed by <style> tags and can be written directly in the page or linked by using a *.css file. We will type them directly.

<head>
...
<style type="text/css">
#surround_div{
position: absolute;
top: 0px;
left: 0px;
}

#banner{
margin: 5px;
background-color: #000064;
width: 750px;
}

#columns{
margin: 5px;
margin-top: 0px;
margin-bottom 0px;
width: 750px;
clear: both;
}

#left{
background-color: #006400;
width: 120px;
float: left;
}

#content{
background-color: #640000;
margin:0px 5px;
float: left;
}

#right{
background-color: #006400;
width: 120px;
float: right;
}

#footer{
margin: 5px;
background-color: #000064;
clear: both;
}
</style>
</head>

Though I will not explain here what does it exactly means, the above code is all the CSS styling you'll need for now. The background-color statements are there to show clearly each layer, but will be replaced in further steps to provide a better look to the page.

Most of the statements are self-explanatory, but the float and clear might not be familiar to you and are very important for this layout to work. The float statement allows the layer to position itself next to the previous layer instead of beneath it, which is the default behavior. The attribute left and right just declare the alignment of the layer with respect to the others. The clear statement is used to make the footer go beneath the columns. Since they use the float statement, without the clear one the footer layer would go under the columns. If you want to see, take it out and play with the code.

<Previous Index Next>
Rating: 4

Affiliates





Spoono

Join Us