MakingSEO coded, Free CSS Template with PSD-to-HTML tips

MakingSEO coded, Free CSS Template with PSD-to-HTML tips
  • 26 September 2009
  • Tutorials, Web Design
  • This post was written exclusively for PV.M Garage by Piervincenzo Madeo
  • Comments (35)»

By this time I’m sure, the superheroes don’t have particular superpowers. The crisis are still running and I certainly cannot save the world, dammit! But… I’ve coded the PSD Template makingSEO and in this post you can read some quick tips used in the psd-to-html conversion (in case you missed the first part, please read Design A Clean And Fresh Company Website In Photoshop).

In previous tutorials we have learned some techniques on how to convert a design mockup into a complete web-page using xhtml and css, so the following information will be only a quick review on code. If you want more suggestions on psd-to-html conversion you can take a look at these articles:

Below there are the final result of the makingSEO psd-to-html conversion and the link to download the complete CSS Template. Don’t forget, the source files are released under the Creative Common License (CC 3.0 Attribution) also for commercial use.

Final Result, Css Template

Here you can see a preview image and a live demo. You can also download the zip archive with the complete CSS template.
makingSEO CSS Template

Download Source
Download Source

Coding makingSEO

We can partition the layout in five sections: header, down-header, contents, sidebar and footer. Besides we can use two general div, main_container and container. The first to add the top-background and the second to keep in 960 px the segments (header, down header, contents and sidebar).
makingSEO CSS Template

Now is time for the code. This section of the post will show the essential steps to code the psd template.
In the folder “makingseo” we put in “images” folder and the necessary files: “index.html” and “style.css” and “reset.css” (generally I use the Yahoo! YUI Reset CSS, but in this case we test the reset file included in Blueprint CSS Framework).

Below the complete “reset.css” file (you can optimize it for your needs).

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

body {
  line-height: 1.5;
}

table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }

blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

a img { border: none; }

Step 1 – Main Structure

The markup for the main structure (edit “index.html”).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>makingSEO - Improve Your Business | A free CSS Template | made in PV.M Garage</title>
<link href="reset.css" rel="stylesheet" type="text/css" /><!-- blueprint css reset -->
<link href="style.css" rel="stylesheet" type="text/css" /><!-- css style for makingSEO -->
</head>
<body>

<div id="main_container"><!-- for general background -->
<div class="container clearfix"><!-- to keep in 960 pixels the segments -->

  <div id="header"><!-- here we'll add logo and menu -->
  </div>

  <div id="down_header"><!-- here we'll add slogan, screenshot and call-to action button -->
  </div>

  <div class="contents"><!-- here we'll add the info boxes -->
  </div>

  <div class="sidebar"><!-- here some side information -->
  </div>

</div><!-- end container -->

<div id="footer"><!-- here the footer -->
</div>

</div><!-- end main_container -->

</body>
</html>

To reproduce background we use the following image.
makingSEO CSS Template

Below the css rules.

@charset "utf-8";
/* CSS Document */

body {
  background: #f5f5f5;
  font-family: Verdana, Georgia, “Lucida Sans Unicode”, sans-serif;
  font-size: 12px;
  color: #666;
}

/* General */

:focus {
	outline: 0;
}

a {
  text-decoration: none;
}

ul {
	list-style-type:none;
	color: #fff;
}

/* Container */

#main_container {
  background: url("images/bck.jpg") repeat-x top; /* General Background */
}

.container {
  width: 960px; /* here the width for the segments */
  margin: auto;
}

.clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  overflow: hidden;
}

Step 2 – Header with Logo and Menu

Now we add logo and menu in the header. Below there are the images exported from psd.
makingSEO CSS Template

Below the (x)html code for header.

<div id="header">
    <div class="logo">
      <h1><a href="#">makingSEO - Improve Your Business</a></h1>
    </div>
    <div class="menu">
      <ul>
        <li><a href="#">Services</a></li>
        <li><a href="#">Tools</a></li>
        <li><a href="#">Strategies</a></li>
        <li><a href="#">Prices</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </div>
  </div>

And now, the style.

/* Header */

#header {
  height: 156px;
}

.logo {
  float: left;
  background: url("images/light_head.png") no-repeat top left;
  height: 156px;
}

.logo h1 {
  text-indent: -9999px;
  margin-top: 40px;
}

.logo h1 a {
  display: block;
  background: url("images/logo.png") no-repeat top;
  width: 398px;
  height: 61px;
}

.menu ul {
  float: right;
  margin-top: 5px;
  padding-bottom: 10px;
  width: 377px;
  text-align: center;
  background: url("images/dashed_h.png") no-repeat bottom;
}

.menu ul li {
  display: inline;
  padding: 10px 10px 70px 10px;
  background: url("images/dashed_v.png") no-repeat top right;
  margin-left: -5px;
}

.menu ul li a {
  color: #fff;
  padding-bottom: 70px;
}

.menu ul li:hover {
  background: url("images/menu_hov.png") repeat-x top right;
}

Step 3 – Slogan and Screenshot in Down-Header

In Down-Header segment we add a direct slogan, a screenshot of a website that rocks with the help of makingSEO team and a call-to-action button. Below the pictures used to complete this section of the web-page.
makingSEO CSS Template

Below you can see the html code for the down-header.

  <div id="down_header">
    <div class="d_h_left">
    </div>
    <div class="d_h_right">
      <span class="button"><a href="#"></a></span>
    </div>
  </div>

The style for this segment.

/* Down Header */

#down_header {
   height: 320px;
   padding-top: 25px;
}

.d_h_left {
  float: left;
  width: 520px;
  height: 308px;
  margin-left: -14px;
  background: url("images/screenshot.png") repeat-x top left;
}

.d_h_right {
  float: right;
  width: 450px;
  height: 138px;
  margin: 16px 0 0 4px;
  background: url("images/slogan.png") no-repeat top left;
}

.button a {
  display: block;
  width: 324px;
  height: 70px;
  position: relative;
  top: 145px;
  left: 61px;
  background: url("images/call-but.png") no-repeat 0px -70px;
}

.button a:hover {
  background: url("images/call-but.png") no-repeat 0px 0px; /* CSS Sprites technique for the button*/
}

Step 4 – The Contents

The left side is the core of the web-page in which the visitors have the opportunity to know more about the Company. We use some icones and a soft dashed grid.
makingSEO CSS Template
makingSEO CSS Template

We write the html code…

<div class="contents">
    <div class="post_cont">
      <h1 class="top_left"><a href="#">We Study the Best Solutions to Improve Your Visibility</a></h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo</p>
    </div>
    <div class="post_cont">
      <h1 class="top_right"><a href="#">In One Month You Could Be in the First Page of Google</a></h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
      <span class="button_post_g"><a href="#"></a></span>
    </div>
    <div class="post_cont">
      <h1 class="down_left"><a href="#">Organize Your Business with our Experts</a></h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
    </div>
    <div class="post_cont">
      <h1 class="down_right"><a href="#">We Study the Best Solutions to Improve Your Visibility</a></h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
      <span class="button_post_o"><a href="#"></a></span>
    </div>
  </div>

… and the rules for the style of the contents.

/* Contents */

.contents {
  float: left;
  width: 690px;
}

.post_cont {
  width: 310px;
  float: left;
  margin: 0 30px 30px 0;
  background: url("images/dashed_v_g.png") no-repeat right;
  height: 300px;
}

.post_cont h1 a {
  padding-bottom: 0px;
  font-size: 14px;
  color: #424242;
  display: block;
}

.post_cont h1 a:hover {
  color: #d5943f;
}

.post_cont p {
  margin-left: 10px;
  padding: 15px 10px 30px 0;
  background: url("images/dashed_h_g.png") no-repeat top right;
}

h1.top_left a {
  background: url("images/ico_top_left.png") no-repeat left center;
  padding: 20px 5px 20px 85px;
}

h1.top_right a {
  background: url("images/ico_top_right.png") no-repeat left center;
  padding: 20px 5px 20px 70px;
}

h1.down_left a {
  background: url("images/ico_down_left.png") no-repeat left center;
  padding: 20px 5px 20px 72px;
}

h1.down_right a {
  background: url("images/ico_down_right.png") no-repeat left center;
  padding: 20px 5px 20px 72px;
}

span.button_post_g a, span.button_post_o a {
  display: block;
  width: 256px;
  height: 46px;
  position: relative;
  top: -10px;
  left: 83px;
}

span.button_post_g a {
  background: url("images/call-but-post.png") no-repeat right top;
}

span.button_post_o a {
  background: url("images/call-but-post_o.png") no-repeat right top;
}

Step 5 – The Sidebar

Side information for our page. Below the (x)html code and the style.

  <div class="sidebar">
    <div class="sidecont">
      <h2>Side Info</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
    <div class="sidecont">
      <h2>Blog Posts</h2>
      <ul>
        <li><a href="#">Donec quam felis, ultricies nec, pellentesque eu.</a><span class="side_meta_info">posted by piervix - 12.08</span></li>
        <li><a href="#">Donec quam felis, ultricies nec, pellentesque eu.</a><span class="side_meta_info">posted by piervix - 12.08</span></li>
        <li><a href="#">Donec quam felis, ultricies nec, pellentesque eu.</a><span class="side_meta_info">posted by piervix - 12.08</span></li>
        <li><a href="#">Donec quam felis, ultricies nec, pellentesque eu.</a><span class="side_meta_info">posted by piervix - 12.08</span></li>
      </ul>
    </div>
    <div class="sidecont">
      <h2>Working on...</h2>
       <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
      <a href="#"><img src="images/img_side.jpg" alt="" /></a>
    </div>
  </div>

We update the “style.css” files with this lines of code.

/* Sidebar */

.sidebar {
  float: right;
  margin-top: -50px;
  width: 220px;
  background: #fff;
  border: 1px solid #dcdcdc;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

.sidecont {
  margin: 18px 10px;
  font-size: 11px;
}

.sidecont img {
  margin-top: 10px;
  border: 3px solid #bdbdbd;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

.sidecont h2 {
  font-size: 18px;
}

.sidecont p, .sidecont ul li {
  padding-top: 7px;
}

.sidecont ul li a {
  display: block;
  font-weight: bold;
  color: #666;
}

.sidecont ul li a:hover {
  color: #d5943f;
}

.side_meta_info {
  color: #d5943f;
}

Step 6 – The Footer

This segment isn’t included in the main-container div, this for adding the background in the right way. Take a look at the images used.
makingSEO CSS Template

Finally the code for the footer and the credits.

<div id="footer">
  <div class="foot_info">
    <div class="foot_col_l_c">
      <h2>Our Tweets <a href="#">/ Follow Us</a></h2>
      <ul>
        <li><a href="#"><strong>@virtuosoblogger</strong> 400+ Beautifully Designed Twitter Icons http://ow.ly/oBb6</a></li>
        <li><a href="#"><strong>@bkmacdaddy</strong> Bit.ly lowers the bar on URL shortening - http://bit.ly/cMBAc</a></li>
        <li><a href="#"><strong>@gaksdesigns</strong> Retro Design and Typography http://bit.ly/1TRunk</a></li>
      </ul>
    </div>
    <div class="foot_col_l_c">
      <h2>Work in progress</h2>
      <ul class="foot_center">
        <li class="foot_ico_1"><a href="#">Sed ut perspiciatis unde omnis iste natus error sit </a></li>
        <li class="foot_ico_2"><a href="#">At enim ad minima veniam, quis nostrum</a></li>
        <li class="foot_ico_3"><a href="#">At vero eos et accusamus et iusto odio dignissimos ducimus qui</a></li>
      </ul>
    </div>
    <div class="foot_right">
      <h2>Work in progress</h2>
      <ul>
        <li><a href="#"><img src="images/img1.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/img2.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/img3.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/img4.jpg" alt="" /></a></li>
      </ul>
    </div>
  </div>
  <div id="credits">
    <p><a href="#">makingSEO</a> is released under a <a href="#"><em>Creative Common License</em></a> also for Commercial Use. We hope you'll support <a href="#">PV.M Garage</a>, it is an awesome place for sharing!</p>
  </div>
</div>

We update the CSS file with the following rules.

/* Footer */

#footer {
  background: url("images/bck_foot.jpg") repeat-x top; /* general background for footer */
}

.foot_info {
  margin: auto;
  width: 960px; /* keep in 960 pixels the footer contents */
}

.foot_col_l_c {
  width: 285px;
  float: left;
  margin: 20px 35px -30px 0px;
  padding: 0px 10px 0px 10px;
  height: 300px;
}

.foot_info h2 {
  font-size: 20px;
  color: #fff;
  margin-bottom: 6px;
  padding: 8px 0px;
  background: url("images/dashed_f.png") no-repeat center bottom;
}

.foot_info h2 a {
  color: #306e8f;
  background: url("images/ico_foot.png") no-repeat top right;
  padding: 10px 45px 10px 0;
}

.foot_info h2 a:hover {
  color: #fff;
}

.foot_col_l_c ul li {
  padding: 8px 0px;
  background: url("images/dashed_f.png") no-repeat center bottom;
}

.foot_col_l_c ul li a {
  color: #fff;
  display: block;
}

.foot_col_l_c ul li a:hover {
  color: #c3dd6c;
}

ul.foot_center li a:hover { /* change hover color */
  color: #d5943f;
}

li.foot_ico_1 a {
  padding-right: 50px;
  margin-right: 11px;
  background: url("images/ico_foot_1.png") no-repeat center right;
}

li.foot_ico_2 a {
  padding-right: 50px;
  margin-right: 8px;
  background: url("images/ico_foot_2.png") no-repeat center right;
}

li.foot_ico_3 a {
  padding-right: 50px;
  margin-right: 12px;
  background: url("images/ico_foot_3.png") no-repeat center right;
}

.foot_right {
  width: 221px;
  float: right;
  margin-top: 20px;
}

.foot_right ul {
  background: url("images/foot_img_bck.png") no-repeat top left;
  margin-left: 5px;
}

.foot_right ul li {
  display: inline;
}

.foot_right img {
  border: 3px solid #fff;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  margin: 10px 20px 8px 0px;
}

#credits {
  clear: both;
  margin-bottom: 10px;
}

#credits p {
  width: 600px;
  text-align: center;
  margin: auto;
}

#credits p a {
  font-weight: bold;
  color: #666;
  width: 600px;
  text-align: center;
  margin: auto;
  font-size: 11px;
}

#credits p a:hover {
  border-bottom: 1px dotted #666;
}

Conclusions

Yes, this layout is released under the Creative Common License (CC 3.0 Attribution) also for commercial use and you can copy, edit, sell, eat, drink, re-publish it. Remeber it is only a basic xhtml and css template if you have some ideas on how to improve the layout, please share them through the comments (e.g. maybe a slideshow for the screenshit section could be a good solution, but can it save the worls?).

The template has been tested on IE8, Firefox 3.5, Opera and Safari. It have a valid XHTML code.

Thanks fo reading dear friends!

PSD to HTML Services Sponsored on PV.M Garage

I’m sure! You have the necessary skill to convert a PSD mockup in a wonderful website, but if you have many projects in progress you could consider a PSD to HTML Service.

Pixel Crayons

XHTML.pixelcrayons.com (a specialized division of Pixelcrayons) offers high quality hand coded pixel-precise markup services and implementation into skins, themes, CMS, shopping carts and more. They accept files in all common formats (PSD/AI/PNG/PDF) and even existing markup.

Their online Order page details various markup packages offered along with a variety of options for markup and software implementation.
Pixel Crayons

Rapid XHTML

RapidxHTML is a small team of designers and developers, with a wide range of skills and experience. Each of us know our strengths and weaknesses and how these fit into the big picture.
Rapid XHTML

XHTML Chop

XHTML Chop is a team of experienced web design and web programming professionals. They specialize in providing the state-of-the-art PSD to HTML conversion services. they have a talented team that is capable of handling all types of conversion requirements.
XHTML Chop

XHTMLiT

XHTMLiT service is simple! They are W3C Web Standards experts and they have been building and coding website for over 5 years now. XHTMLiT provide coding services to designers, taking the dirty job away so you can do what you are best at, Design!
XHTMLiT

Author: Piervincenzo Madeo

From a little city in the South of Italy, a web designer, a coder, a blogger. This is Piervincenzo, just a guy who has a great love for creativity and enjoys making high-quality stuff and sharing good information about web design and development.

website design and development

35 Comments

  1. Imran Khan

    Thanks, this is the awesome article…expecting more of it…
    keep going on …

  2. everybodyweb

    Fantastic, you’re a great designer guy! I really love this template, thanks!

  3. Luis

    call me a noob, but why do you use the reset.css file.
    Could you please explain that to me, and why you use…

    how does it effect your design??

  4. piervix

    @Luis: thanks for comment. In general it’s a good practice to improve the compatibility of the design with many browser and to speed up the process of encoding.

    It’s true. I used the complete reset file and with some line of code in style.css you can have the same result, but I said “you can optimize it for your needs”…

    However you can click on the following link to see the final result without a reset.css

    http://www.pvmgarage.com/downloads/makingseo_no_reset/

    Thanks.

  5. Ivan

    Nice tutorial

  6. adnan

    bro, u really have patience to explain everything… great post, too much illustrative, keep it up :)

  7. cypherbox

    Very nice tutorial, well explained every detail. Thanks for sharing. =)

  8. javo

    Excelente!!, muy buen tutorial, con resultado muy creativo, me gusta, gracias.

  9. Mitin

    Hi brilliant Tutorial.

    Being a newbie to website design and development, I did not quite understand the .clearfix part of the tutorial, especially the coding for the CSS:

    .clearfix:after {
    content: “020″;
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;
    }

    Can anyone kindly explain this please.

    Thanks alot

  10. piervix

    @Mitin: First of all, thanks for the visit and for your comment.

    The problem is the property “float” for the divs with class “contents” and “sidebar”, in fact, when a floating element is within a container box, we have a problem with the height of the element… see at the following link to understand what happens without “clearfix” class:

    http://www.pvmgarage.com/downloads/makingseo_no_reset/index2.html

    So, for this reasons I’ve added this class.

    I hope the .clearfix part of the tutorial is “clear” right now… ;)

  11. seoman

    Nice trick with the .clearfix property. Do you have tested browser compatibility of this solution? (I use the obvious IE6-safe method: br, hr or empty div styled as clear:both, but it adds bullshit content in the html code.).

  12. Psd To Html

    nice tutorials..
    it’s really useful for me.We provide service to convert
    PSD to HTML, XHTML & CSS.
    Please Visit Here : Psd To Xhtml

  13. Aikikai Aikido

    Great tutorial!!!
    Fortunatly I didn’t need to do this by myself. If anyone need free html to psd – go to http://www.mypsd4xhtml.com. They coded my site!!!

  14. vipul malhotra

    Nice trick with the .clearfix property. Do you have tested browser compatibility of this solution? (I use the obvious IE6-safe method: br, hr or empty div styled as clear:both, but it adds bullshit content in the html code.).

    go to http://www.gingerwebs.com. They coded my site!!!

  15. jaringan

    Nice art for share making design, thanks.

  16. PSD to CSS

    PSD to CSS coding technique most important for evaluation of web design. Thanks.

  17. xrzblkat

    WqXew4 elmhohkdufms, [url=http://bucjuqsawtxh.com/]bucjuqsawtxh[/url], [link=http://kahmwldderdo.com/]kahmwldderdo[/link], http://zspjkwgfzjry.com/

  18. laptop i5

    Very nice post. I just stumbled upon your blog and wanted to say that I have truly enjoyed surfing around your blog posts. After all I’ll be subscribing to your feed and I hope you write again soon!

  19. Free Articles

    Hello. Great Job, I did not expect this on Friday. This is a great story. Thanks.

  20. lose 40 pounds in 4 months

    do you apply my reply?

  21. getting pregnant tips

    clear list or reset lists?

  22. dofollow list 2011

    Thank you taking the time to write this!

  23. zero friction marketing

    You made various good points there. I did a search on the subject matter and found the majority of people will have the same opinion with your blog.

  24. modern floor lamp

    Thanks for this improbably correct review. In my opinion it is really important, that you have pointed the aspect of notes importance. Cause they really change the basic picture of the novel to the new direction! Appreciate, J.Essays

    modern floor lamp

  25. Heavy Duty Rotisserie

    Excellent blog here! Also your site loads up very fast! What web host are you using? Can I get your affiliate link to your host? I wish my web site loaded up as fast as yours lol

  26. Calculate Calories For Weight Loss

    I loved as much as you will receive carried out right here. The sketch is attractive, your authored subject matter stylish. nonetheless, you command get bought an impatience over that you wish be delivering the following. unwell unquestionably come further formerly again since exactly the same nearly a lot often inside case you shield this hike.

Leave your comment

You must be logged in to post a comment.

-->

This website is proudly powered by WordPress, hosted by Suite48. Icons by WeFunction, KomodoMedia and DezinerFolio.
Contents and resources released under Creative Commons License.
Design and code by PVM Garage - Copyright © 2010 PV.M Garage Theme - All Rights Reserved.

HOME | ABOUT US | ADVERTISE | CONTACT US