menu
Ad goes here

Friday, 7 September 2012

DIV based Layout

We recommend you to develop DIV based HTML layout. The div based layout create column, row or any blocks through CSS and this is the process where you can execute any complicated design. If you think about the first loading of the HTML page then always use DIV instead of Table.

When you will start your DIV base html then it's very important to identify the corrent layout format for the page.
  1. Tow columns with a sidebar
  2. Single column without sidebar
  3. Three columns with sidebars
  4. Three columns with sidebars [single or double] etc...
Please see example with Inline CSS:
<div style="border:1px solid #ccc;display:block;clear:both;
width:600px;text-align:center;color:#fff;margin:5px auto;">
<div style="border:1px solid #ccc;display:block;clear:both;
background-color:#ff0000;margin:5px;">header </div>
<div style="border:1px solid #ccc;float:left;margin:5px;">
<div style="border:1px solid #ccc;float:left;clear:none;
width:80px;height:200px;background-color:#e7e7e7;margin:5px;
color:#000">sidebar left </div>
<div style="border:1px solid #ccc;display:block;clear:none;
float:left;width:394px;height:200px;background-color:#fff;
color:#000;margin:5px;">content</div>
<div style="border:1px solid #ccc;float:right;clear:none;
width:78px;height:200px;background-color:#e7e7e7;margin:5px;
color:#000">sidebar right</div>
</div>
<div style="border:1px solid #ccc;display:block;clear:both;
background-color:#e7e7e7;margin:5px; color:#000">footer</div>
</div>
header
sidebar left
content
sidebar right
footer
You can also develop the layout by external CSS.

First you have to open your text/html editor then use the following property against each class name and the class name shold be used preperly. So the editor or programmer can understand easily.

External Stylesheet Code:
.wrapper {border:1px solid #ccc;display:block;clear:both;width:600px;text-align:center;color:#fff;margin:5px auto;}
.header {border:1px solid #ccc;display:block;clear:both;background-color:#ff0000;margin:5px;}
.container {border:1px solid #ccc;float:left;margin:5px;}
.leftpanel {border:1px solid #ccc;float:left;clear:none;width:80px;height:200px;background-color:#e7e7e7;margin:5px; color:#000}
.rightpanel {border:1px solid #ccc;float:right;clear:none;width:78px;height:200px;background-color:#e7e7e7;margin:5px; color:#000}
.content {border:1px solid #ccc;float:right;clear:none;width:78px;height:200px;background-color:#e7e7e7;margin:5px; color:#000}

- SAVE this file in .css format [My css file name is stylesheet.css ] and add it to your html file <link href="stylesheet.css" type="text/css" rel="stylesheet" /> , above </header> tag.
<div class="wrapper">
<div class="header">header </div>
<div class="container">
<div class="leftpanel">sidebar left </div>
<div class="content">content</div>
<div class="rightpanel">sidebar right</div>
</div>
<div class="footer">footer</div>
</div>

No comments:

Post a Comment

Books for you (Crafted with )