From PSD to XHTML
videos

How to Convert a PSD to XHTML

on Nov 5th 2008 with 414 comments

I continue to be amazed by how well Collis’s “Build a Sleek Portfolio Site From Scratch” tutorial continues to perform. It’s been months, yet it still posts strong numbers every week. Considering that fact, I decided to create a screencast that shows you exactly how to convert a PSD into perfect XHTML/CSS.




Part 1: Slicing the PSD and Creating the XHTML

Part 2: CSS

I won’t lie to you. This video is a bit boring. It just isn’t fun to watch someone enter margin values for thirty minutes. :) But it’s essential.

Part 3: Implementing a Bit of Javascript

Part 4: Kicking IE6′s Butt

Could we really call ourselves web developers if we didn’t have to fight with IE6? And is it a coincidence that “6″ is also the number associated with the devil? Who knows.

Mostly, the site looks just fine in IE6, but we should change a few quirks. Create a new stylesheet and call it “ie6.css”. Place it in your CSS folder. Then paste in the following.

#container #mainContent #tier2 
{
	margin-bottom: 273px !important;
}

#tier3 #news
{
	position: relative;
	left: .56em;
}

#header 
{
height: 158px;	
}

#header #login 
{
	top: 1em;
	right: 1.5em;
}

There’s nothing that we really need to go over. Mostly, I’m adjusting the positioning of a few elements.

The last step is to reference our new stylesheet in the head tag of our document.

    <!--[if lt IE 7]>
        <link rel="stylesheet" type="text/css" href="css/ie6.css" />
    <![endif]-->

The PSD

The PSD

The Website: 100% XHTML and CSS

The PSD

I hope this helped you. Everyone has their own way of doing things; So I’d be interested to hear your thoughts. This tutorial was a huge undertaking. I’d appreciate a Digg if you found it to be beneficial.

  • Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.


 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. I'm incredibly passionate about modern software development, and am the author of Laravel Testing Decoded! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
← Older Comments
Newer Comments →
← Older Comments
Newer Comments →