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
This is exciting! I needed this memory refreshing!
This will certainly be the best tutorial and more expected of all.
Excellent.
Nice! I comment in my blog. I’m sure this is very helpfull to newbies.
nice tutorial!
but what’s application luncher do you use at the beggining of the video?
really cool, if you give me the name i’m happy becouse i looking for that applicaion for a long time…
exscuse for my english, i’m italian.
@Andrea – The name of the IDE is “Visual Studio” from Microsoft. It’s a bit pricey, but you can download a free version that works fantastic. It’s called “Visual Web Developer” You can get it here:
http://www.asp.net/downloads/essential/
It’s designed to be an IDE for the ASP.NET framework, but you can create simple HTML websites and ignore the ASP functionality.
Guys, sorry for the delay with the second two videos going up. They were uploading when I went to bed last night, but my computer automatically restarted. So, I had to start over. They’re almost done and will be posted ASAP.
I worked really hard on this tut, so the Diggs are appreciated!
Awesome video. Thanks for sharing. Its always neat to see how others do it.
Just one note for slicing the images in photoshop:
You have the option of just saving selected slices by changing the drop down box in the “Save As Optimized” box from “All Slices” to “Selected Slices”. Saves some time down the road…
THANKS A LOT JEFFREY !!
@Josiah – Ahh…great tip. I knew there was a way to do it! Thank you.
In CS3 you can select User Slices before you click Save in the Save for Web & Devices dialog.
Just viewed the demo in FF3 and its not very clean, there’s some sort of mismatch with the background in the header area.
nice article thanks!
Hey, great video tutorial. I have a question about the ie 6 fixing stuff. Do you know a great site where I can see the different ie 6 fixes with examples and so on ? Sometimes I get crazy because of the rightright and !important stuff for ie 6.
By the way:
Visual Studio is very great and I saw that you are using jquery. on The jquery page there is great plugin for VS to implement IntelliSense for jQuery. There is also a PHP IntelliSense Plugin called VS.PHP. Its very great!
@ANeuby – Thanks! Yeah, I did know that. It’s going to be built into the future versions of Visual Studio. I wrote about it on the ThemeForest blog.
VS.PHP is a great extension. I have that installed as well and use it on a lot of the screencasts on this site.
Jeffrey Way, very good tutorial! Thx.
Nice tutorial. I’m just wondering how many designers use EM’s for padding/margins? Personally I’ve always used pixels for that. I’ve only used EMs for text.
Dugg :)
This is awesome… Keep up the good work. Any chance you could do a complete div myspace overlay, from psd to xhtml, with some java etc… Or even a music myspace. That would be amazing and would love to see the envato network tackle this… I think this would be a very popular tut as well.
Thanks in advance
Great, thanks :D
great one thanks for it.
Thanks for this very essential tutorial, Jeff! This would be very helpful for newbies like me whose just starting to learn Photoshop. Looking forward to create my own website. Kudos to NETTUTS as well!
Very nice. Thanks
This is pretty fantastic stuff. Should be useful to a lot of people.
Nice work, I’ll be going through this tonight.
I’m in the middle of the first video atm, but I wanted to chime in that when you are in the save for web workspace you can shift+select all of the slices that you want to save out then when the save dialog box comes up select “Selected Slices” from the slices pull down menu. This way you won’t get all the crap images that you have to hunt down and trash later on.
Great tut so far, thanks!
Awesome tut!
Thanks!
Great Tutorial Jeffrey! The screencasts are so much better than text tutorials for me because I learn better visually than I do with text. I learned some cool things in the XHTML while you were going through which is very cool. The rounded corners using moz made my night as i always used to make images to put the text over, to make it look like a rounded cornered border. Also the header icons was something that I also learned which was pretty cool.
Great job again I cant tell you how much this has helped me on alot of things.
@Brandon – Thank you! I’m the same way. Videos help so much more – at least for me.
Just remember with the “-moz” and “-webkit” styles…they only work on Firefox and Safari. They will still come out as square on IE7 and below. But it’s really not a big deal.
I’m glad to hear it helped you…makes me feel good.
Yeah it helped a lot. And I will remember that. I use Firefox anyways and so far all my clients that I have worked with use Firefox, and if they do not…I tell them why its better than IE lol. When I do that I rant on. Yeah you spent a lot of time on that video lol. It was worth it though and also worth my time as I learned some new things today. And I greatly appreciate it. The rounded corners now has inspired me to use them in my current client project for Home Depot.
Amazing tutorial!
@ Dan Harper:
Ems are linked to the size of the default font character. This means that they will scale with your user’s font size (think zooming in etc.)
When the scale changes the relative distances between em-spaced elements will remain the same. Pixels on the other hand are hard coded to the screen/render resolution.
very useful,thanks for sharing
I’m literally very impressed and very speechless. Awesome job and awesome tutorial. It’s good to see more of these tutorials coming out, when there was a time not long ago where tutorials like this were non-existent.
Dwayne.
http://probablysucks.com
i agree with everything above. this is very useful to me, especially the fact that it’s in video format.
i second the request to tackle myspace theming cause that site is still very popular.
thanks again jeff
Great job Jeff. As always. I love your screen casts. keep em coming.
Amazing tutorial!! lots of techniques to remember! this is definetly a ‘must have’ guide…! Thanks Jeffrey.
twitter: ipad
In the second video at around 12 minutes when you find weird stuff with the list styles… it’s because when you cut part of the selector you still had the comma on the line above, causing the whole thing to be ignored since there was a comma but no second selector… that’s what happened.
You nailed this tutorial!
keep them coming. I love psd to xhtml tuts, especially screencasts!!
Thank you so much. I’ve learned something more from your videos.
great, and i was really needed this, coz i have done a layout in Adobe Fireworks and don’t know how to convert, but this lil bit help me, as a developer i was facing a conversion issue, now i dont think, coz TUTS+ Gave me a solution. i mean it u Jeff
hope yo will make some nice articles like this….
Cheers…………………….
M.A.Yoosuf
http://yoosuf.awardspace.com/
nice tutorial again.
just tutorial not nice,ur so nice…………mey be orginal gold
Awesome tutorial, very clean, and Usefull
Tnx Again for Sharing ;) This ScreenCast is Value Added.
Jeffrey, you Rockz
Good help for the “new guys”
@insic, STOP spamming EACH and EVERYONE of the TUTS!
very useful 4 me ..thx a lot !
very nice article, I was looking for something like this since ages, thanks man :)
Esse tipo de tuturial já está “manjado” na web!
Very good job! I’ll forward this the apprentices at the firm. This will definitely make my life a little easier :D
Thanx!
great tutorial!
thanks!!