articles

Home / DeveloperSection / Articles / Layout in HTML using CSS

Layout in HTML using CSS

Sumit Kesarwani 4576 30-May-2013

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

Below is the design we will be using as the basis for this article. Our mission is to create a webpage using HTML, CSS and few images.

Layout in HTML using CSS

 

First we need to identify the main structure of our webpage.

The web is very heavily based around rectangles, and we need to remember that when dividing up our design. These main divisions we make will end up being <div> tags. A <div> is basically a rectangular container that we can position using CSS.

The diagram below shows how we will divide the design.

Layout in HTML using CSS

 

We have identified four main elements:

·         Main Navigation

·         Header

·         Content

·         Footer

Now add a html page to your application named default.html and a css file master.css

Step 1:

In the html page between <body ></body> tags create a <div></div> tag and an id=”page-container”. 

In the .css file, write this code

#page-container

{
    width:760px;
    margin:auto;
}

 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.

html, body

{
    margin:0;
    padding:0;
}

 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.

<div id="main-nav">

       <dl>
           <dt id="about"><a href="#">About</a></dt>
           <dt id="services"><a href="#">Services</a></dt>
           <dt id="portfolio"><a href="#">Portfolio</a></dt>
           <dt id="contact"><a href="#">Contact Us</a></dt>
       </dl>
</div>

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.

<div id="footer">

        <div id="altnav">
        <a href="#">About</a> -
        <a href="#">Services</a> -
        <a href="#">Portfolio</a> -
        <a href="#">Contact Us</a> -
        </div>
        Copyright @ MindStick Software Pvt. Ltd.<br />
        Powered by <a href="http://www.mindstick.com/">MindStick Software Pvt. Ltd.</a>
</div>

 

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.

<div id="content"> 

         <h2>About</h2>
    <p><strong>MindStick Software</strong> is an IT company specializing in custom software development.
    We are dedicated to providing professional high quality services to both small and large business sectors
    through the use of cutting-edge programming technologies. With the demands on businesses growing more by the day, we provide practical
    IT solutions to make your business run more efficiently.</p>
 
    <p>We are a young and dynamic team and we strive to provide fresh and innovative software and web solutions at an affordable price.
    For a look at all the services we provide, click on our services tab.</p>
    <h2>Contact Us</h2>
    <p>Phone: (07) 853 6060<br />
    Fax: (07) 853 6060<br />
    Email: <a href="mailto:info@mindstick.com">info@mindstick.com</a><br />
    P.O Box: 14159, Hamilton, New Zealand</p>
    <p><a href="http://www.mindstick.com/">More contact information…</a></p>
</div>
 

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:

Layout in HTML using CSS

Now create two images like this :

Layout in HTML using CSS

Layout in HTML using CSS

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.

<h2><img src="image/about.gif" width="54" height="14" alt="About" /></h2> 

<h2><img src="image/contact.gif" width="98" height="14" alt="Contact Us" /></h2>

 Step 4:

Now create two images like the below:

Layout in HTML using CSS

 

Layout in HTML using CSS

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

#header
{     height:150px;
    background:#db6d16
                url(image/header.jpg);
}

  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. 

<div id="header">
        <h1><img src="image/logo.jpg"
        width="236" height="36" alt="Enlighten Designs" border="0" /></h1> 
        </div>

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

#header h1
{
    width:0;
    height:0;
    padding:120px;
    margin:0;
    margin-left:170px;
}

Step 5: 

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

#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;
}

 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:

#footer a
{
    color:#c9c9c9;
    text-decoration:none;
}

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

#footer a:hover
{
    color:#db6d16;
}

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

#footer altnav
{
    width:350px;
    float:right;
    text-align:right;
}

Step 6:

Now for the navigation section

Put the code in the .css file:

#main-nav
{
    height:50px;
    padding-left:11px;
}

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;}
#main-nav dt a
{
    display:block;
    height:0;
    overflow:hidden;
    background-repeat:no-repeat;
    padding:50px 0 0 0;
}

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


#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);
}

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

#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;
}

 Full Code:

Default.html
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="master.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div id="page-container">
        <div id="main-nav">
            <dl>
                <dt id="about"><a href="#">About</a></dt>
                <dt id="services"><a href="#">Services</a></dt>
                <dt id="portfolio"><a href="#">Portfolio</a></dt>
                <dt id="contact"><a href="#">Contact Us</a></dt>
            </dl>
        </div>
        <div id="header">
        <h1><img src="image/logo.jpg"
        width="236" height="36" alt="Enlighten Designs" border="0" /></h1>
 
        </div>
 
        <div id="content">
 
         <h2><img src="image/about1.gif" width="54" height="14" alt="About" /></h2>
    <p><strong>MindStick Software</strong> is an IT company specializing in custom software development.
    We are dedicated to providing professional high quality services to both small and large business sectors
    through the use of cutting-edge programming technologies. With the demands on businesses growing more by the day, we provide practical
    IT solutions to make your business run more efficiently.</p>
 
    <p>We are a young and dynamic team and we strive to provide fresh and innovative software and web solutions at an affordable price.
    For a look at all the services we provide, click on our services tab.</p>
 
    <h2><img src="image/contact1.gif" width="98" height="14" alt="Contact Us" /></h2>
    <p>Phone: (07) 853 6060<br />
    Fax: (07) 853 6060<br />
    Email: <a href="mailto:info@mindstick.com">info@mindstick.com</a><br />
    P.O Box: 14159, Hamilton, New Zealand</p>
    <p><a href="http://www.mindstick.com/">More contact information…</a></p>
 
        </div>
        <div id="footer">
        <div id="altnav">
        <a href="#">About</a> -
        <a href="#">Services</a> -
        <a href="#">Portfolio</a> -
        <a href="#">Contact Us</a> -
        </div>
        Copyright @ MindStick Software Pvt. Ltd.<br />
        Powered by <a href="http://www.mindstick.com/">MindStick Software Pvt. Ltd.</a>
        </div>
    </div>
    </form>
</body>
</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---------------*/

 


Updated 07-Sep-2019

Leave Comment

Comments

Liked By