Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.

How to Convert a PSD to XHTML


Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.

I continue to be amazed by how well Collis' "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;

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" />



The Website: 100% XHTML and CSS


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.