In this article, I’m explaining how to create a layout in html using css.

 First we should set the width to 760 px and margin to auto so that out container will reside in between the browser view. This container will hold all our four elements. 

The html and body tags have nearly default margins and padding in all browsers. So we need write a css rule to reset the margin and padding of html and body tags to zero.

 Step 2:

We need to add 4 div’s , all with individual id that describe their purpose.

<div id="page-container">

        <div id="main-nav"></div>

        <div id="header</div>

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

        <div id="footer"></div>

</div>

Next add the following code in main-nav daiv.

Main navigation section has the links to other webpage of our websites.

The navigation will be structured as a definition list (<dl>) with individual id’s relevant to each navigation item on each definition term (<dt>). These Definition terms will have links to our major sections inside them.

In easy to understand terms, the <dl> acts as a container, the <dt>‘s are unique identifiers for each navigation item, and the links redirect to the corresponding webpage.

Now go to the footer section. There are 2 parts to the footer, the copyright info and credits on the left, and the alternative site navigation.

Add another <div> tag in footer for the alternative navigation and put all the navigation options in anchor <a> tag.

Just below the <div>tad add the copyright and credit text.

Moving onto the main content area, lets add the content. Use <h2> tags for the headings “About” and “Contact Us”. Enclose the paragraphs in <p></p> tags, and use <br /> for line breaks.

Refresh your page you’ll notice there is more of that white space popping up around the content div. This is because of the default margins on the <h2> tags and the <p> tags.

We need to strip their margins and padding.  

#content h2
{

    margin:0;
    padding:0;
    padding-bottom:15px;
}

#content p
{
    margin:0;
    padding:0;
    padding-bottom:15px;

}

The above rule tells the browser that the rules are only apply to <h2> and <p> tags which are child tags of the #content div. 

Step 3:  

body
{

    font-family:Arial, Helvetica, Verdana, Sans-Serif;
    font-size:12px;
    color:#666666;
    background:#ffffff;

}

Add this code to your .css file and it will change your font style and the size of the font.

If everything is going according to the plan, you should be looking something like this:

Now create two images like this :

Replace the heading text with these images, but remembers to keep the <h2> tags around the image tags, and remember to put alt attributes on the images. Alt attributes are designed to display as an alternative to the image if a user is viewing the page in a browser that does not support images, or has images turned off. It is also useful for search engine spiders, as they cannot understand images.

 Step 4:

Now create two images like the below:

Set the background image in the header section using the following code:

  The background property that we just used is actually a shorthand property which allows us to specify the background colour, image, image position, and how the image repeats, all in one property. 

  Set the logo image by the above code in the header section.

Step 5: 

Now we have to make text look right in the footer section of the webpage.

 Add the above code in the .css file, this code will set the font and the size.

To change the color of the link use the following code:

But the links need to stand out, when you mouse over them.

 The last thing to do in the footer section is that the float the alternate navigation to the right.

Step 6:

Now for the navigation section

Put the code in the .css file:

This sets the main-nav div height to 50px, and strips all margins from the datalist.  

#main-nav dl{margin:0; padding:0;}

#main-nav dt{float:left;}

This sets the definition list to float left, which stack them left to right instead of one under another.

#main-nav dt#about,#main-nav dt#about a

{

    width:71px;

    background-image:url(image/about.gif);

}

#main-nav dt#services,#main-nav dt#services a

{

    width:71px;

    background-image:url(image/services.gif);

}

#main-nav dt#portfolio,#main-nav td#portfolio a

{

    width:71px;

    background-image:url(image/portfolio.gif);

}

#main-nav dt#contact,#main-nav dt#contact a

{

    width:71px;

    background-image:url(image/contact.gif);

}

Now set the individuals width of each navigation item and set the corresponding image.

 Full Code:

Default.html

 master.css

html, body

{

    margin:0;

    padding:0;

}

body

{

    font-family:Arial, Helvetica, Verdana, Sans-Serif;

    font-size:12px;

    color:#666666;

    background:#ffffff;

    text-align:center;

}

/*--------------Start Page Container--------------------*/

#page-container

{

    width:760px;

    margin:auto;

    text-align:left;

}

/*-------------------End Page Container---------------*/

 

/*-------------------Start Main Navigation---------------*/

#main-nav

{

    height:50px;

    padding-left:11px;

}

#main-nav dl{margin:0; padding:0;}

#main-nav dt{float:left;}

#main-nav dt a

{

    display:block;

    height:0;

    overflow:hidden;

    background-repeat:no-repeat;

    padding:50px 0 0 0;

}

#main-nav a:hover

{

    background:0 -50px;

}

#main-nav dt#about,#main-nav dt#about a

{

    width:71px;

    background-image:url(image/about.gif);

}

#main-nav dt#services,#main-nav dt#services a

{

    width:71px;

    background-image:url(image/services.gif);

}

#main-nav dt#portfolio,#main-nav td#portfolio a

{

    width:71px;

    background-image:url(image/portfolio.gif);

}

#main-nav dt#contact,#main-nav dt#contact a

{

    width:71px;

    background-image:url(image/contact.gif);

}

 

#main-nav dt#about,

#main-nav dt#about a,

#main-nav dt#about a:hover,

#main-nav dt#services,

#main-nav dt#services a,

#main-nav dt#services a:hover,

#main-nav dt#portfolio,

#main-nav td#portfolio a,

#main-nav td#portfolio a:hover,

#main-nav dt#contact,

#main-nav dt#contact a,

#main-nav dt#contact a:hover

{

    background-position:0 -100px;

}

 

 

 

/*-------------------End Main Navigation---------------*/

 

 

/*-------------------Start Content---------------*/

#content h2

{

   

    margin:0;

    padding:0;

    padding-bottom:15px;

}

#content p

{

    margin:0;

    padding:0;

    padding-bottom:15px;

}

/*-------------------End Content---------------*/

 

/*-------------------Start Header---------------*/

#header

{

    height:150px;

    background:#db6d16

                url(image/Img1.jpg);

}

#header h1

{

    width:0;

    height:0;

    padding:120px;

    margin:0;

    margin-left:170px;

}

/*-------------------End Header---------------*/

 

/*-------------------Start Footer---------------*/

#footer

{

    clear:both;

    height:66px;

    font-family:Helvetica, Arial, Verdana;

    font-size:10px;

    color:#c9c9c9;

    border-top:1px solid #efefef;

    padding:13px 25px;

    line-height:18px;

}

#footer a

{

    color:#c9c9c9;

    text-decoration:none;

}

#footer a:hover

{

    color:#db6d16;

}

#footer altnav

{

    width:350px;

    float:right;

    text-align:right;

    clear:both;

    padding-top:13px;

}

 

/*-------------------End Footer---------------*/