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 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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Really it helps me a lot. Thank you very much.
There is a step by step procedure to convert PSD into perfect XHTML/CSS. THe first step is creating a design in Photoshop and then coding the site with XHTML and CSS. You have elaborated these steps in the right manner.
I need the PSD from which you are converting it to xhtml
thanks
Hi Jeffrey, your video tutorials are always very good to learn in professional way, Thanks a lot…
hi jeffrey ,you are greate ! this is a so good tutorial .
but jeffrey if you speak a bit slower its better for no native english mans such me !
i like your learnings but your speaking is very fast and i dont realize some times .
regards
Hi, if you are searching for a excellent PSD TO XHTML service, you may use, http://www.psdconverted.com, they have an excellent service that you way wanna use, plus, they are fast service and cheap!
Best Regards
Pedro
Hey Jeffery… Thanks for another great tutorial!
You know that issue you were having with the list item (li) at about 11 mins and 22 seconds (and after) in the CSS video? Well, I think it was the comma for the rule that you had above the one you were trying to delete. That’s why it wasn’t working, the comma was “blocking” the rule from applying. I didn’t test it, but I think that’s what it was. Your thoughts?
Thanks again!
Sincerely,
Chris
After i convert to html, i notice that the slice of the Background image repeats but not properly,how do i fix this? and how do i have to center the psd design in the html?
Great tutorial.. Very impressed with your work.. Leaned so much..
Awesome. Thank you very much for these tutorials.
Thank you so much for this tutorial.
It does not only showed us how to do a PSD to HTML slicing, but also introduced some very useful developer tools, such as web developer firebug plugin.
Thank you , this really helped to develop the concept of converting psd to xhtml.
God bless you .
regards
Fahim
These videos are really great, Thanks a lot for explaining in step by step… It is very usefull to us.
Your great work is much appreciated.
is very cool,
thak’s for you tutorial.
is the best
Part 1 ，Part 2 ，Part 3的图片都看不到，其他的可以看到，不应该是加载问题啊
I’m so appreciative of this!!! working on nuaconcepts.com and would like to personalize this basis the above.
Have you any tutorials on creating the PSD template itself?
Very good tutorial…Thanks a lot.
I don’t even understand how I stopped up right here, however I assumed this put up used to be good. I don’t recognise who you’re but definitely you are going to a well-known blogger if you happen to are not already ;) Cheers!
thanks for your providing this passage
i wanna say that that i didnt know how to convert psd to html thank you again
I was having issues with the warm & cheerfull web design tut as that had no link to the PSD file. I decided to try this one and the link to the PSD file is broken hmmm really confused on whats going on here.
Were is the PSD file to slice lol
still can’t download the source files. DNS error. thank you
Great tutorial, But I need the psd so I could practice your great tutorial according to psd. Please provide the psd, this is the missing of this tutorial. It could be useless without providing the psd. Thanks
Great tutorial! watching the process from beginning to end is exactly what i needed. After years of avoiding css because it just looked to complex, this very straight-forward step by step made me realize the only thing I’ve been missing is a little bit of patience!
Thanks again.
That was alot easier than I expected it to be, great tutorial!
I used Paint.NET to edit my PSD files, and then optimized them for the web. It looks great on the new CSS3 browsers.
Thank you so much for this tut!
Great in depth screen cast, thanks for sharing!
Thanks for the tutorial, we applied design services at the company website. But the result was not as expected, I was wrong in a certain step.
Great tutorial! Works great!
Thanks very much! :D
its useless showing half a tutorial, i know everyone has their own way coding but for those of us who are just picking up, its not worth it.
For me 2nd video is slightly difficult. I always face problems in css. I use dream viewer instead of visual studio. I have never tried visual studio. Please let me know which is easier to use.