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
NIce tutorial, but if you sitll are not able to do iit check out this site called http://www.rapidconvert.com.
Great! Thanks!
Great tut, but for the css I added:
#header
{
background: url(images/header.gif) no-repeat;
overflow: hidden;
}
The image/banner/header doesn’t show. I know I have the correct div id in my html as well.
Help anyone? It does it with ALL of my images.
You have to set the height and width for that specific element to show up, be it div, img or w\e.
So, if the header .gif has 600x200px, your css for that div should look like this:
#header
{
background: url(images/header.gif) no-repeat;
overflow: hidden;
width: 600px;
height: 200px;
}
Amazing tut!!
I learnt more about css in these tuts than i did schooling for a year.. studying multimedia design!
same here.
I have learn more from copying and pasting jquery code in 2 weeks and this video explanation from scratch has made me understand and put all the puzzles together clearly in my head. this 2 hours have been the most awarding information compared to one year of schooling :) Thanks Jeffrey!
Great tutorial for beginners.
cheers.
Hey Joe,
I had the same problem as you, my solution was that the syntax is wrong. It’s suppose to be.
background-image: url(../images/htmlbg.jpg)
Hope it helps.
My problem is, that I can’t get the script to execute at all. Any help?
This is the best tutorial I came across on web, thanks for this.
I love how their is 318 comments and yet not 1 digg…good work guys.
Might have something to do with having to be a member on digg.com to digg it.
I digged it :) I didn’t even have a real use for the vids cuz i use a mac so that microsoft studio program isn’t something i have access to unless i virtualize it in windows but that would make my life a living hell sharing files…so i’m gonna just find a new tutorial for a mac user…appreciate the indepth vid tho…it was nice to learn some stuff
This is really a helpful topic, and its more helpful as videos are there, thanks for providing all this.
Cheers.
Thanks ! ! a lot….
It’s a Grate Tutorial
You don’t need to create all the image slices then delete the ones you don’t need.
PSP does that for you.
1. “Save for Web & Devices”
2. Select the slices you want (multiple selection with CTRL key)
3. “Save”
4. The last (forth) option – “Slices” – choose: “Selected slices”
It will only save the slices you’ve selected. Pretty straightforward.
This is really a helpful topic, and its more helpful as videos are there, thanks for providing all this.
It’s very good!
Awesome tutorial,i am looking this tutorial ,advantage for newbie like me,thanks
Why to do so much work in photoshop when u hav to build that site using hand coded css/html why not build it from the start using html/css.???
Awesome tutorial. I wish I could grasp the design aspect but I lack the creativity to do it. Instead I am in the process of coding this template to work with WordPress. I’ll let you know how it goes. (side note: I have no intention of using it on a site. Just teaching myself to put together themes on WordPress)
you look like a chode
Great Resource! Anyone looking for Front-end web development help? We can help you any psd to html/css and psd to wordpress jobs :)
Very nice tutorial!!!!!!!!!!!!!!
Great tutorial for beginners.
cheers.
Thanks so much !
This is exactly what I needed !
Hey, this really helped me! THANKS!
Many Thanks,
you really make it easier, and i learned alot in short time….thanks again :)
Many thanks,
you really make it easier, and learnd alot in short time….thanks again :)
good info
Very Nice Tutorial.
Thanks so much for such a detailed tutorial.. I’ve been designing now for 10+ years this is the first full tutorial from start to finish I’ve ever watched. This is a great tutorial..
Its great post. Really loved it …digging it right now
Thank you so much for this Tutorial, I learned a lot from it. It was Exactly what I needed!!!
It all worked for me, except sadly the innerfade effect using the Java script :( I’ll try and work on it and see what I can do.
Thanks Once more!!
I learned thanks to.. Great job!
Hi Jeffrey,
This is great. Thanks so much for such a detailed tutorial. Wow! wonderful. Pls contact.
Superb tutorial. Clearly explained and some great tips. Many thanks.
Hi Jeffery Way,
Its really a great tutorial for me. I repeated almost 50 times and finally able to do css myself. check out my creation, its done because of your tutorial. http://www.vparshuram.com
Now, i have few troubles…
1st the 3 boxes you created for example who are we and all… their height gets massed up, if we zoom in our browser. Is there any good way to keep them streat.
2nd -moz and -webkit doesnt work for IE 8, any solution for that?
I think this is it. I appreciate if you or anyone can answer this two. Nice tutorial great job and really helpful.
Thanks for uploading and being so discriptive.
- SHAH
because moz is for mozilla y webkit is for safari and chrome
Great Tutorial!!! Thank you for the great info. I didn’t mind that it was a bit slow, it was perfect for beginers. thanks for not skipping any steps and making it very clear for us who are newbies.
One thing though, why go through the whole design in photoshop? Wouldn’t it be easier to just design it with pencil and paper, then pick your colors in photoshop or any program, then create it in html/css?
Either way, Thanks again!!!
nice
Absolutely superb. I learnt a lot while watching and will implement some of that into my own code. Pace of the tut was very good and your explanation of the why’s and wherefore’s was appreciated.
Great Tutorial..
Learned a lot, thanks..
“XHTML Champs” is a business unit of Acedezines, a well-established web designing company with clear business orientation and strong creatives. Ace Dezines has over fifty satisfied clients across the globe from different verticals such as animation, software, pharma, e-learning, construction and nutraceutical companies.
For More Details Visits to our site: http://www.xhtmlchamps.com
Hello…
Where can I download this PSD layout?
because I can not teach a lesson without psd
Thank you.
This is great tutorial! Very helpful!
I was wondering how to design a website in Photoshop and then convert it in HTML or XHTML and this explains it all!
Thank for doing this. ;)
This is really an amazing tutorial, well explained and easy to follow. Thank you very much for the videos.
Great step-by-step explanation! Didn’t see anything new, but still was glad to watch it up to the end.
Go on, i’ll watch with pleasure)
Hey I really appreciate all the step-by-step procedures, it really helps out new people to css etc. Thanks, great tutorial!
Very good videos thanks , Great job!
This was helpful! Thank you!
Extremely superb. Thanks thanks thanks a lot!!!!!!!!!!!!!!!!!!
Can you show me an example for adding comments website? I’l be grateful for you! please excuse for my English, I’m a Sri Lankan!
Thanks for the tutorial. It helps me ALOT!
Awesome information Thanks!
Thanks to Jeffry! really nice tutorial for myself……
wanna join u ,