Blog Design with CSS and HTML
Wall Script
Wall Script
Monday, November 08, 2010

Blog Design with CSS and HTML

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.
Blog design CSS and SEO

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>

Blog design CSS and SEO

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

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>

Blog design CSS and SEO

CSS code
#main
{
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>

Blog design CSS and SEO

#nav
{
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.
Blog design CSS and SEO

Article Page
Here article title is the most important and top level, so title should be in <h1> tag.
Blog design CSS and SEO

Final Code
Take a look at this demo link
HTML 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>

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>
web notification

68 comments:

  1. awesome post bro :) great share :)

    ReplyDelete
  2. waooo good and very nice

    ReplyDelete
  3. Very basic but very nice step by step tuts :D

    ReplyDelete
  4. :-D
    Loved it...
    Thanks a lot...
    :-D

    ReplyDelete
  5. best tut i've seen until now

    ReplyDelete
  6. GREAT THANX FOR MAIL IT

    ReplyDelete
  7. great thanks for sharing.:)))

    ReplyDelete
  8. But which is good? telling the measurements in pixels or in percentage?!

    ReplyDelete
  9. @Revathi: I think that's how the habits and needs of course we want to use which?
    I think this is the basic scheme of a template ...
    thanks for share master...
    salam blogger \m/

    ReplyDelete
  10. @Revathy

    Percentage for different screen resolutions

    iphone, ipad, PC and Android

    I suggest website design with pixels and mobile site design with percentage.

    ReplyDelete
  11. why found I this tutorial so late!

    I have css problem alone too long.

    ReplyDelete
  12. Hi srini
    I came your blog from Indi..and your contents were awesome and i like your blog design..

    ReplyDelete
  13. 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.

    ReplyDelete
  14. nice tut man just love it!!!!!!!!!!!!!!!

    ReplyDelete
  15. thanks for sharing. your work are awesome

    ReplyDelete
  16. can I use this blog design for wordpress?
    and how?

    ReplyDelete
  17. thanks for tutorial, it's very usefull for me

    ReplyDelete
  18. is it possible to display this page on iphone screen?

    ReplyDelete
  19. Thanks 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. :)

    ReplyDelete
  20. Good 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

    ReplyDelete
  21. very interesting tutorial,good job

    ReplyDelete
  22. Excellent 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.

    ReplyDelete
  23. nice share brada.. i permite to use your style for my next blog....
    n i permite for jquery source.....

    keep sharing bro....
    gbu

    ReplyDelete
  24. Hi shrinivas nice info thanks now your free service.Hi shrinivas nice info thanks now your free service.

    ReplyDelete
  25. Very detailed tuts! Thank you so much for the share.

    ReplyDelete
  26. clear & impressive, thanks for the share !

    ReplyDelete
  27. I like your sharing, thanks bro

    ReplyDelete
  28. Impressive coding, i was looking for a tutorial like this one. Great share.

    ReplyDelete
  29. 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..

    ReplyDelete
  30. Great tutorial, Thanks for sharing..

    ReplyDelete
  31. i dont know what to say.... thank you so much...

    ReplyDelete
  32. This tutorial's good, no doubt but kindly write one to code a custom Blogger template in detail. Thanks!

    ReplyDelete
  33. excelent brother and it is very nice

    ReplyDelete
  34. Nice one.... Simple and good...

    ReplyDelete
  35. Really great breakdown and tips.

    ReplyDelete
  36. thanks bro for understanding div.

    ReplyDelete
  37. Nice Post dude..........awesome!!

    ReplyDelete
  38. great simple direct and easy lesson

    ReplyDelete
  39. greate tutorial.thanks for your sharing

    ReplyDelete
  40. Thank you very much for this tutorial :)

    ReplyDelete
  41. great job !! thanks for sharing !!

    ReplyDelete
  42. thanks for providing such a good tutorial...!

    ReplyDelete
  43. This is a good start for learning css and html.

    ReplyDelete
  44. Can you upload responsive template?

    ReplyDelete
  45. Thanks for the tutorial :)

    ReplyDelete
  46. what will come i page option plz let me know [email protected]

    ReplyDelete
  47. Great information,
    thank you for sharing.
    can you please tell me how to write child hover?

    ReplyDelete

mailxengine Youtueb channel
Make in India
X