Official Raz Veinz Blogsite

This is where all the main contents goes, either text, animation, images, sound or video, it’s simple to create the main body layout, but a little bit tricky, it should editable, flexible and attractive.

I assume you read my previous  entry

The coding and structure is similar to Header Section  just with a little bit modification, here the CCS code, under the  new title,

/******************************/
/*  MAIN BODY SECTION  */
/******************************/

.Main-body {
    width:664px;
    text-align: left;
    margin: auto;
}

.Contents {
    width:600px;
    top: 230px;
    text-align: justify;
    background-image: url(../Image/Paper.png);
    background-attachment: scroll;
    background-repeat: repeat;    
    font-family: Georgia, “Times New Roman”, Times, serif;
    font-size: 12px;
    line-height: 20px;
    padding: 30px 30px 30px 50px;
    margin: 0 auto auto -15px;
    z-index: 1;
}

Note :

At the margin, I put a -15px for margin-left to adjust the background image position.

background-attachment: – The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.

background-repeat: – refer to my last CSS entry for more details

padding: – The padding shorthand property sets all the padding properties in one declaration. This property can have from one to four values. Example,

End Note :

And this is the HTML code,

<!– (Main Body) –>

<div class=”Main-body”>
<div style=”position:absolute;”>
<!– TemplateBeginEditable name=”Contents” –>
  <p>In progress, coming soon..</p>
  <!– TemplateEndEditable –></div>
</div>

<!– (Main Body End) –>

To text in, I used MS Office or etc., and paste in the Contents (do not paste at the coding) it’s better.

I think, that’s all for the basic main body, see you in the next entry.