This post explains how to design an HTML/CSS basic structure to design a simple three column fixed page layout
I included some standard elements such as logo, top bar, navigation bar, text stage, center column for post categories and right column to insert Google AdSense 120X600 ads so you can reuse quickly this code on your webdesign projects.
HTML structure
The following picture illustrates HTML/CSS elements I added on the page:
Step 1: HTML file structure
Create a new page and copy and past this code within <body> tag:
Create a new page and copy and past this code within <body> tag:
<div id="container">
<div id="topbar">Top Bar/Logo Layer</div>
<div id="navbar">
<div id="main">
<div id="column_left">
<h1>Post Title</h1>
<h2>12 january 2008</h2>
<p>Add your text here</p>
</div>
<div id="column_right">
<h3>Categories</h3>
Right Content to add Categories, web 2 widget (twitter, mybloglog recent readers...)
</div>
<div id="column_right_adsense">
<h3>AdSense</h3>
Adsense 120 X 600
</div>
<!-- Don't remove spacer div. Solve an issue about container height -->
<div class="spacer"></div>
</div>
<div id="footer">© 2008 Information about your site</div>
</div>
<div id="topbar">Top Bar/Logo Layer</div>
<div id="navbar">
<a href="index.html?home">Home</a>
<a href="index.html?about">About</a>
<a href="mailto:myemailaddres@email.com">Contact me</a>
</div><a href="index.html?about">About</a>
<a href="mailto:myemailaddres@email.com">Contact me</a>
<div id="main">
<div id="column_left">
<h1>Post Title</h1>
<h2>12 january 2008</h2>
<p>Add your text here</p>
</div>
<div id="column_right">
<h3>Categories</h3>
Right Content to add Categories, web 2 widget (twitter, mybloglog recent readers...)
</div>
<div id="column_right_adsense">
<h3>AdSense</h3>
Adsense 120 X 600
</div>
<!-- Don't remove spacer div. Solve an issue about container height -->
<div class="spacer"></div>
</div>
<div id="footer">© 2008 Information about your site</div>
</div>
Step 2: CSS file
Now, create a new css file and link it into index.html
/* ------------------------------
HTML Redefine Tags
------------------------------ */
body{font-family:Arial, Helvetica, sans-serif; font-size:12px;margin:20px; padding:0;}
input, form, textarea
h1, h2, h3, h4, h5, h6{margin:0; padding:0;}
h1{font-size:18px;}
h2{font-size:14px; color:#999999;}
h3{font-size:13px; border-bottom:solid 1px #DEDEDE; padding:4px 0;margin-bottom:10px;}
a:link, a:visited{color:#0033CC;}
a:hover{text-decoration:none;}
/* ------------------------------
PAGE STRUCTURE
------------------------------ */
/* #container has an absolute width (780 pixel) */
#container{width:780px; margin:0 auto;}
/* ------------------------------
CUSTOM CLASSES
------------------------------ */
/* Add here your custom classes ... */
HTML Redefine Tags
------------------------------ */
body{font-family:Arial, Helvetica, sans-serif; font-size:12px;margin:20px; padding:0;}
input, form, textarea
h1, h2, h3, h4, h5, h6{margin:0; padding:0;}
h1{font-size:18px;}
h2{font-size:14px; color:#999999;}
h3{font-size:13px; border-bottom:solid 1px #DEDEDE; padding:4px 0;margin-bottom:10px;}
a:link, a:visited{color:#0033CC;}
a:hover{text-decoration:none;}
/* ------------------------------
PAGE STRUCTURE
------------------------------ */
/* #container has an absolute width (780 pixel) */
#container{width:780px; margin:0 auto;}
#topbar{width:auto; display:block; height:60px;}
#navbar{width:auto; display:block; height:28px;}
#main{width:auto; display:block; padding:10px 0;}
#footer{width:auto; display:block; padding:10px 0; font-size:11px;color:#666666;}
#navbar{width:auto; display:block; height:28px;}
#navbar a{heigth:28px; line-height:28px; padding:0 8px;display:inline;}
#main{width:auto; display:block; padding:10px 0;}
#column_left{width:460px; margin-right:20px; float:left;}
#column_right{width:160px; margin-right:20px; float:left;}
#column_right_adsense{width:120px; float:left;}
div.spacer{clear:both; height:10px; display:block;}
#column_right{width:160px; margin-right:20px; float:left;}
#column_right_adsense{width:120px; float:left;}
div.spacer{clear:both; height:10px; display:block;}
#footer{width:auto; display:block; padding:10px 0; font-size:11px;color:#666666;}
/* ------------------------------
CUSTOM CLASSES
------------------------------ */
/* Add here your custom classes ... */
Save all and try it!
Div class segment is very important to make the design and structure for the website with simple web template.
ReplyDeleteWeb Development Company | Website Design Companies
I really grateful to this blog for getting the latest information about Gypsy and Traveller Sites.This is very helpful for people.
ReplyDeleteWeb Design Company Bangalore| Web Design Companies Bangalore|