In this post I will show you how to design blog template frame with CSS and HTML step by step . CSS helps you to design better and flexible webpage layouts. This is very basic CSS + HTML tutorial, CSS just awesome it adds flavor to the web page.
Step 1
Web layout divided into four horizontal parts are Hearder, Nav, Main and Footer. Here Container is the parent div.HTML Code
<div id="container">
<div id="header">1 Header</div>
<div id="nav">2 Nav</div>
<div id="main">3 Main</div>
<div id="footer">4 Footer</div>
</div>
<div id="header">1 Header</div>
<div id="nav">2 Nav</div>
<div id="main">3 Main</div>
<div id="footer">4 Footer</div>
</div>
CSS Code
margin:0 auto; centers a div
#container
{
width:900px;
margin:0 auto;
overflow:auto;
}
#header
{
height:90px;
}
#nav
{
height:30px;
}
#main
{
overflow:auto;
}
#footer
{
height:40px;
}
{
width:900px;
margin:0 auto;
overflow:auto;
}
#header
{
height:90px;
}
#nav
{
height:30px;
}
#main
{
overflow:auto;
}
#footer
{
height:40px;
}
Step 2
main (content part) div dividing into two vertical parts are main_left(article part) and main_right(sidebar part)<div id="main">
<div id="main_left">Article</div>
<div id="main_right">Sidebar</div>
</div>
<div id="main_left">Article</div>
<div id="main_right">Sidebar</div>
</div>
CSS code
#main
{
overflow:auto;
}
#main_left
{
float:left;
width:600px;
}
#main_right
{
float:left;
width:300px;
}
{
overflow:auto;
}
#main_left
{
float:left;
width:600px;
}
#main_right
{
float:left;
width:300px;
}
Step 3
Now working with an unorder list <ul> tag. <div id="nav">
<ul>
<li>HOME</li>
<li>PROJECT</li>
<li>TUTORIALS</li>
<li>FACEBOOK</li>
<li>JQUERY</li>
</ul>
</div>
<ul>
<li>HOME</li>
<li>PROJECT</li>
<li>TUTORIALS</li>
<li>FACEBOOK</li>
<li>JQUERY</li>
</ul>
</div>
#nav
{
overflow:auto;
}
#nav ul
{
list-style:none;
height:30px;
padding:0px;
margin:0px;
}
#nav ul li
{
float:left;
margin:10px;
}
{
overflow:auto;
}
#nav ul
{
list-style:none;
height:30px;
padding:0px;
margin:0px;
}
#nav ul li
{
float:left;
margin:10px;
}
Home Page
This page should be with multiple article title links with little description, so that reader can quickly find more information. W3C standards specifying <h1> tag use for top-level heading.
Article Page
Here article title is the most important and top level, so title should be in <h1> tag.
Final Code
Take a look at this demo linkHTML Code
<div id="container">
<div id="header">
Header
</div>
<div id="nav">
<ul>
<li>HOME</li>
<li>PROJECT</li>
<li>TUTORIALS</li>
<li>FACEBOOK</li>
<li>JQUERY</li>
</ul>
</div>
<div id="main">
<div id="main_left">Article</div>
<div id="main_right">Sidebar</div>
</div>
<div id="footer">Footer</div>
</div>
<div id="header">
Header
</div>
<div id="nav">
<ul>
<li>HOME</li>
<li>PROJECT</li>
<li>TUTORIALS</li>
<li>FACEBOOK</li>
<li>JQUERY</li>
</ul>
</div>
<div id="main">
<div id="main_left">Article</div>
<div id="main_right">Sidebar</div>
</div>
<div id="footer">Footer</div>
</div>
CSS Code
<style type="text/css">
#container
{
width:900px;
margin:0 auto;
overflow:auto;
}
#header
{
height:90px;
}
#nav
{
overflow:auto;
}
#nav ul
{
list-style:none;
height:30px;
padding:0px;
margin:0px;
}
#nav ul li
{
float:left;
margin:10px;
}
#main
{
overflow:auto;
margin-top:3px;
}
#main_left
{
float:left;
width:600px;
min-height:400px;
}
#main_right
{
float:left;
width:300px;
min-height:400px;
}
#footer
{
height:40px;
}
</style>
#container
{
width:900px;
margin:0 auto;
overflow:auto;
}
#header
{
height:90px;
}
#nav
{
overflow:auto;
}
#nav ul
{
list-style:none;
height:30px;
padding:0px;
margin:0px;
}
#nav ul li
{
float:left;
margin:10px;
}
#main
{
overflow:auto;
margin-top:3px;
}
#main_left
{
float:left;
width:600px;
min-height:400px;
}
#main_right
{
float:left;
width:300px;
min-height:400px;
}
#footer
{
height:40px;
}
</style>
awesome post bro :) great share :)
ReplyDeletewaooo good and very nice
ReplyDeleteVery basic but very nice step by step tuts :D
ReplyDeleteNice tuts
Deleteso nice post brother
ReplyDeleteGreat post...liked it :-)
ReplyDelete:-D
ReplyDeleteLoved it...
Thanks a lot...
:-D
best tut i've seen until now
ReplyDeleteGREAT THANX FOR MAIL IT
ReplyDeletegreat thanks for sharing.:)))
ReplyDeleteBut which is good? telling the measurements in pixels or in percentage?!
ReplyDeletea very useful article.
ReplyDelete@Revathi: I think that's how the habits and needs of course we want to use which?
ReplyDeleteI think this is the basic scheme of a template ...
thanks for share master...
salam blogger \m/
@Revathy
ReplyDeletePercentage for different screen resolutions
iphone, ipad, PC and Android
I suggest website design with pixels and mobile site design with percentage.
why found I this tutorial so late!
ReplyDeleteI have css problem alone too long.
Hi srini
ReplyDeleteI came your blog from Indi..and your contents were awesome and i like your blog design..
You have a great blog. Just wondering, which software you use to make the graphics/images for tutorial, for example this post images? They look awesome.
ReplyDeletenice tut man just love it!!!!!!!!!!!!!!!
ReplyDeletethanks for sharing. your work are awesome
ReplyDeletecan I use this blog design for wordpress?
ReplyDeleteand how?
It's a great work!)
ReplyDeletethanks for tutorial, it's very usefull for me
ReplyDeleteis it possible to display this page on iphone screen?
ReplyDeletesuper.. excellent..
ReplyDeleteThanks a lot for this tutorial. I'm learning to update genesis theme and lost completely. This tutorial gives me way to understand anatomy of how css/html design should be, definitely useful for those who are thinking on building wordpress themes. :)
ReplyDeleteGood blog. Very interesting and helpful. I have studied with a few training companies that have helped me understand a bit more but this was very helpful
ReplyDeletevery interesting tutorial,good job
ReplyDeleteExcellent overview, it pointed me out something I didn’t realize before. I should encourage for your wonderful work. I am hoping the same best work from you in the future as well. Thank you for sharing this information with us.
ReplyDeletenice share brada.. i permite to use your style for my next blog....
ReplyDeleten i permite for jquery source.....
keep sharing bro....
gbu
Very nice tutorial.. Thanks
ReplyDeleteGreat Resource....
ReplyDeleteHi shrinivas nice info thanks now your free service.Hi shrinivas nice info thanks now your free service.
ReplyDeleteVery detailed tuts! Thank you so much for the share.
ReplyDeleteclear & impressive, thanks for the share !
ReplyDeleteI like your sharing, thanks bro
ReplyDeleteImpressive coding, i was looking for a tutorial like this one. Great share.
ReplyDeletethank u..
ReplyDeletea simple nice...
^^
main_left and main_right?? why not main_content and main_sidebar.. what happens when main_left has to move to the right? hope u get my point.. Wonderful post though..
ReplyDeleteGreat tutorial, Thanks for sharing..
ReplyDeletei dont know what to say.... thank you so much...
ReplyDeleteSimple ! But worthy !
ReplyDeleteThis tutorial's good, no doubt but kindly write one to code a custom Blogger template in detail. Thanks!
ReplyDeleteexcelent brother and it is very nice
ReplyDeletethank u& awesome
ReplyDelete:) Simple But Very Important .
ReplyDeleteSimple but Very Useful :)
ReplyDeleteNice one.... Simple and good...
ReplyDeleteReally great breakdown and tips.
ReplyDeleteThanks a lot
ReplyDeletethanks bro for understanding div.
ReplyDeleteNice Post dude..........awesome!!
ReplyDeletegreat simple direct and easy lesson
ReplyDeleteGreat
ReplyDeletegreat
ReplyDeletegreate tutorial.thanks for your sharing
ReplyDeleteThank you for the post...!!!
ReplyDeleteThank you very much for this tutorial :)
ReplyDeletegreat job !! thanks for sharing !!
ReplyDeletethanks for providing such a good tutorial...!
ReplyDeleteThis is a good start for learning css and html.
ReplyDeleteCan you upload responsive template?
ReplyDeleteThank you
ReplyDeleteThanks for the tutorial :)
ReplyDeletewhat will come i page option plz let me know [email protected]
ReplyDeleteReally very nyc !!!
ReplyDeleteawesome design
ReplyDeleteGreat information,
ReplyDeletethank you for sharing.
can you please tell me how to write child hover?
great
ReplyDelete