feedburner

Enter your email address:

Designing 3 column fixed layout using CSS

Labels:

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 structureThe following picture illustrates HTML/CSS elements I added on the page:


The structure is ready to use. You just have to redefine font, color background, font-style for each layer and HTML tag, and define other custom classes.

Step 1: HTML file structureCreate a new page and copy and past this code within tag:


<div id="container">
<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>
<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 fileNow, 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, textareah1, 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;}
#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;}
#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!






0 comments:

Post a Comment

RSS FEED



Subscribe

Followers