BASIC LAYOUT CODE FOR A WEBSITE OR A BLOG

       To start with basics is always a good choice. So this post is going to be the basic html and css codings for a basic lay out either can be used for a blog or a website.Usage of appropriate syntax in appropriate places in HTML is a key note.HTML plays a major role in web.Css cant be ignored as it is equally important with the HTML.This post will brush up some of the HTML and CSS codes and will be a good tutorial for CSS ad HTML for web beginners. 

                       

                  

HTML CODES:

<div id="container"> // all the div's are placed in this container.

<div id="header">
Header
</div>

<div id="nav"> // this provides the buttons in nav bar!

<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>TUTORIALS</li>
<li>FACEBOOK</li>
<li>CONTACTS</li>
</ul>

</div>

<div id="main">  // main content area

<div id="left">content</div>  // article area.
<div id="right">Sidebar</div> //gadgets area.

</div>

<div id="footer">Footer</div> // footer section.
</div>

CSS CODES:

style type="text/css">
#container
{
width:900px;
margin:0 auto;//this sets the container in center for various browser size .                 
overflow:auto;  //this increases the height of the container automatically .        
}
#header
{
height:90px;
}
#nav
{
overflow:auto;  
}
#nav ul   // ul used inside the nav id is defined here.
{
list-style:none; // this disables the style like underline.
height:30px;
padding:0px;
margin:0px;
}
#nav ul li
{
float:left;
margin:10px;
}
#main
{
overflow:auto;
margin-top:3px;
}
#left
{
float:left;
width:600px;              // content area's width is defined here.
min-height:400px;
}
#right
{
float:left;
width:300px;
min-height:400px;
}
#footer
{
height:40px;
}
</style>



            BASIC LAYOUT USING HTML AND CSS
  

Posted in: html and css