I Build 8 – Creating Webpage/Website Main Body
Posted on Friday, November 2nd, 2012 at 10:26 amThis 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.