How to Convert a Slick PSD Design to XHTML/CSS

Creating the base body

We are finally at a point where we can lay down the real HTML! The structure to the various elements of our HTML will basically come from several div elements. I’d like to use an analogy here…you can think of these div elements as the parts of our body such as hands, head, legs, foot where as the entire HTML itself is the whole human body.
We are going to start by making a div for each of our major sections. Our sections will be divided into the following: header, featured, status, content, footer. Each one of these sections will contain and div with the class of container to limit the width of the content and center it on the page.

<div id="header">
	<div class="container">

	</div>
</div>
<div id="featured">
	<div class="container">

	</div>
</div>
<div id="status">
	<div class="container">

	</div>
</div>
<div id="content">
	<div class="container">

	</div>
</div>
<div id="footer">
	<div class="container">

	</div>
</div>

Filling in the #header

We are now going to work on the #header section of the document. We have 2 things we need to take care of in here; One, we need to make a section for you to put your logo and two, we need to make our navigation menu. The logo will be a simple empty div while the navigation menu is a unordered list.

<!-- Logo -->
<h1 id="logo">Your Logo</h1>

<!-- Navigation Menu -->
<ul id="menu">
	<li class="active"><a href="#">HOME</a></li>
	<li><a href="#">PHOTOGRAPHY</a></li>
	<li><a href="#">COMMERCIALS</a></li>
	<li><a href="#">SPORTS</a></li>
	<li><a href="#">EXPOSURE VIDEOS</a></li>
	<li><a href="#">CONTACT</a></li>
</ul>

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14

This entry was posted on Thursday, September 16th, 2010 at 07:06 and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Cody Robertson is a 19 year old freelancer. He is currently attending university, but loves to write and create beautiful websites whenever he can. He ranges with a large spectrum of coding languages, all the way from Objective-C to HTML. Follow Cody on Twitter

About the author Published by Cody Robertson

10 Responses »

  1. Brilliant tutorial I will have to try it out asap.
    Thanks alot ^^

  2. Awesome Tutorial.

    Thanks you for share.

  3. Good tutorial for beginner like me, thank you :)

  4. Very good tutorial, It covered a lot of things, thanks

  5. Dude, charset before title. :)

  6. i’m going to have to take time on this one.thanks for sharing

Leave a Response

We do love friendly, well-constructed and respective comments. We do not love bitchy, stupid and disrespectful comments. Find something wrong in this post?, feel free to send us a note and we will fix the issue asap.