Website Layout Part 2 Tutorial { Body }

Website Layout Part 2 Tutorial { Body }

Okay this is part 2 of our 5 part tutorial. What I will be going over this lesson is:

• Inbedding Text into div containers
• Embedding Youtube Videos or other Websites using Iframes
• Organizing for ease of coding

First I must suggest that you organize your divs all inside the page wrapper that you have made Like this:

<DIV ID="PageWrapper">
 <DIV ID="Header">
<DIV ID ="BODY">

</div> <!--End of Page BODY-->  

</div> <!--End of Header-->  
 
</div> <!--End of Page Wrapper-->






 So as you can see above we structure the Css as we go. But we must work on our website from top to bottom. That makes it easier for coding and if you have a problem note it and go back later.

Now that we have our body div to work inside we can start designing. First I am going to contain a left and right container and then add a center container.


<DIV ID ="BODY">

<div id="Hello">


<div id="Center">

</div> <!--END OF Center-->

</div> <!--end of Hello-->

</div> <!--End of Page BODY-->  

Now you see we have a set of divs now we want to either put an Iframe or Information inside them, so to add text simply use the <P id="Test"> Tag. We use the id function so we can edit it using Css at a later stage. 

Now if you want to add a YouTube video. use this code and change the link:

<iframe src="http://www.youtube.com/embed/JyAoQnyUUIQ" width="490" height="300" style="float:top" marginwidth="0" marginheight="0" frameborder="no" style="border-width:2px; border-color:black; border-style:solid;"></iframe>


Of course you can adjust the border and such. Now we want to go to the final part THE CSS:

#Hello{
width: 245px;
height: 2961px;
border: 5px solid black;
position: fixed;
top: 245px;
left: 178px;
}
#Center{
position: fixed;
left: 433px;
top: 250px;
}

Now this should position it all center and left. Ill let you complete the right side all by yourself. 

This has been the tutorial.  Thanks for reading hope you enjoyed and if you have problems post below.