From PSD to CSS HTML in 4 easy tutorials – part 4


This is the 4th and final instalment in this series on converting a PSD to CSS, its taken a little longer to get finished than I would have liked! Here is the 4th part on how to turn a PSD design into a fully working webpage.

At the end of the last tutorial we finished working on the left column, this stage of the turorial we will concentrate on the right side column, the center column, the search box and a few IE hacks!

Right Column

Figure 24 below shows what we need to achieve for the right column.

Figure 24

Right Column

This is quite simple as we have a heading where we can use our global H3 style and then a simple unordered list with arrows. We can use » for the arrows and will wrap them in a span as before so that we can color them white. All that remains is just to space the elements according to the PSD and that should be easily accomplished with appropriate margins and padding.

Removing the dummy content we had in the right column we can virtually write the HTML straight away as follows:

[HTML]

Gallery Links

[/HTML]

Notice that I have given the ul a class of “gallery” and in this instance I didn’t really need to do that because I could target the UL via the column’s ID instead. However, I am guessing that on other pages in the site there will be more content in this column and if I globally address all ULs in that column then we could run into problems on other pages. Therefore I will use a class on the UL to isolate the code.

The rest of the CSS is just positioning and we end up with full CSS as follows:

[CSS]
ul.gallery{margin:1em 0 1em 0}
ul.gallery li {
text-transform:uppercase;
margin:0 0 1em 0;
font-size:77%;
}
ul.gallery li,
ul.gallery li a{
color:#252e1c;
font-weight:bold;
}
ul.gallery li a span{color:#fff}
ul.gallery li a:hover{text-decoration:underline}
[/CSS]

There’s nothing new there except to remember that we globally reset all the margins and padding of our elements and therefore we don’t need to worry about the fact that some browsers apply a default left padding for the bullet and some use default right padding. We also set all lists to default to list-style:none to kill the bullets so we don’t really need to do much here at all.

I put an underline effect on hover which acts as a good visual clue that there are links.

Checking the layout in Firefox it looks much as expected as seen in figure 25.

Figure 25

Right column

However, on checking in IE6 we see something has gone drastically wrong!

Figure 26

IE6 Misplaced column

As you can see above IE6 has misplaced the right column content and placed it in the center. What could we have done to cause this problem as it was working before?

The first thing to try is to remove all the HTML from inside the right column and apply some dummy text to check if it was our right column styling that was causing the problems. Upon checking it seems that there is nothing in the right column code that is causing the problem. Therefore it must be something we did in the left column earlier on.

Remember earlier, when I told you to validate your code and check in various browsers you forgot to check IE6 didn’t you?

Deleting one line at a time from the html in the left column we find that when we delete the following line everything snaps back into place.

[HTML]

Photo of the month

[/HTML]

What can be wrong with that line above?

If we check in the code it soon becomes apparent that we have applied padding to the P element that is holding the image and we have also added a 2px right margin to all images in that section. The space available is 207px and the image is 206px wide plus a 2px right margin but we have also applied padding to the p element of 7px which means that the element is now 8px to big to fit in the space allocated. IE6 tries to compensate for this by stretching the parent (#col1) which results in their not being enough room across the page for all the columns.

You can be sure when a column has dropped down in IE that either an element is too big to fit or there is a bug like the double margin float bug. Always makes sure that your inner elements actually fit inside the outer elements otherwise things will break.

To fix this issue we need to add a class to the P element that is holding the photo and remove the padding from the P element and the margin from the nested image.

[CSS]
.photo p.month {padding-right:0}
.photo p.month img{margin:0}
[/CSS]

Now IE6 will display correctly.

This is the importance of checking at each stage in the browser that you want to support as you can fix issues before you pile more and more code on top and then struggle to find the original issue.

Once again you can compare your code with mine before we move on to addressing the centre column and the other outstanding issue on the Search Box.

Centre Column

Refer back to Figure 15 at the top of the page for a reminder of how the Centre column (#maincol) is laid out.

The first thing we need to address is the heading in this section which seems to be almost identical to the headings we used in the side column but just a different color. This will save us some code as we can just add a comma separated selector to the existing h3 styles as follows.

[CSS]
h2, h3{
color:#fff;
text-transform:uppercase;
font-style: italic;
font-weight:bold;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size:131%;
margin:6px 0 10px 0;
letter-spacing:-.04em;
}
h2 {color:#120c0e;}
[/CSS]

The color is then over-ridden immediately after with the correct color and our heading is then already styled. I have chosen a level 2 (h2) heading for this section as I believe it to be the second most important heading on the page. Always create a logical structure with your headings with just one H1 heading per page and then follow logically with appropriate headings.

All that’s left in the middle column is to space the text out and color the anchors appropriately. So with a little trial and error you can soon come up with the correct dimensions. If you check against the PSD you can keep tweaking a little bit until things are exactly as you want. Note that the line-height plays an important part here as it spaces the lines out nicely and gives the page some breathing space. Don’t be tempted to use padding as that won’t space the individual lines but will apply to the whole paragraph just as margins would. To space each line out requires the line-height to be addressed. With about 5 minutes of trial and error I finished up with the following code:

[CSS]
h2 {color:#120c0e;}
#maincol p{
font-size:85%;
margin:0 0 1.9em 0;
line-height:1.6em;
padding:0 5px 0 0;
}
#maincol a{
color:#120c0e;
font-weight:bold;
}
#maincol a:hover{
color:#8bbd25;
text-decoration:underline;
}
[/CSS]
[HTML]

Sanke Photography Tutorials

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque laoreet diam quis ante. Aliquam imperdiet urna quis nulla. Integer vulputate. Nam magna lectus, dapibus ut, ultrices at, fermentum eget, ligula. In enim quam, varius a, porta elementum, facilisis quis, velit. Proin nec nisi. Curabitur tempus, pede id luctus suscipit, enim erat molestie leo, ultricies volutpat libero diam sit amet urna. Ut nec massa. Duis eget justo placerat augue imperdiet imperdiet. Vestibulum gravida. Fusce vitae nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam semper adipiscing leo.

Mauris feugiat metus a lectus lacinia eleifend. Aliquam aliquam eros a nulla. Sed orci elit, semper eu, pharetra auctor, fringilla accumsan, ligula. Proin vestibulum fringilla mauris. Curabitur ac justo non felis tincidunt varius. Etiam interdum egestas libero. Donec a mauris sit amet dolor ultrices dictum. In viverra aliquam risus. Curabitur arcu elit, blandit a, ultrices et, semper at, neque.

Cras sit amet felis nec eros condimentum lobortis. Aenean purus. Vivamus ultrices.

Sanke Photography

[/HTML]

The code is very simple and self explanatory and produces an output like this:

Figure 27

Centre content

That’s very close to our original so we leave it as it is.

Once again its time to compare your code with mine just to make sure you are on track and then we can move on to the final issue which is the search form that we missed out earlier in the article.

Search Form

We need to add a text box and a submit button so take a look at the task in hand in figure 28 below.

Figure 28

Search form

Hmmm… that’s a bit of a pain and I don’t like graphical form elements as they are hard to style in a cross browser way and I would prefer to use the standard form controls. However, I have asked the client and the answer was no so we will have to do the best we can.

The text input has rounded corners so we will have to cut it out of the PSD in one go and size the input to match the dimensions. We can then set this image as a background image to the input. This won’t work in older Safari but its the best we can do. The “go” button will also have to be an image and we can use input of type=”image” to do this.

Here is the text input image.

This is the “go” button image.

The inputs will both be absolutely positioned into place because they need to match up with the background of the big image that is already in the background. To do this we need to ensure that position:relative is applied to the parent element so that we can position accurately within that element. In fact we already have done this anyway.

All that remains is to remove the borders from the input and apply the background image. The background image is set at the right position of the input due to a bug in IE where the background will scroll away when more text than can remain visible is entered.

The exact positions can be gained from the PSD and we end up with final code as follows.

[CSS]
#search{
width:975px;
height:275px;
background:url(images/search-bg2.jpg) no-repeat 0 0;
position:relative;
}
#search input{
vertical-align:middle;
position:absolute;
top:216px;
left:724px;
}
#search input.go{left:885px}
input.search-site{
background:#171b16 url(images2/inputbg.gif) no-repeat right top;
border:none;
color:#494b49;
width:149px;
height:18px;
padding:4px 5px 0;
font-size:85%;
}
[/CSS]
[HTML]

[/HTML]

Looking at figure 29 below we can see that is very close to the original which was shown in figure 28.

Figure 29

Search box

Once again you can see the full code here and make sure that you have matching code.

That completes the code but before we tidy things up by removing all the CSS to external stylesheets I’m going to check the layout in as many browsers as I can. Luckily I have a browsercam account and can get screenshots of browsers that I don’t have access to.

Here is the publically accessible page with screenshots in various browsers. Have a look through and check it out.

The first thing I notice is that I have forgotten to do the box model hacks for the search input in IE5.x and the size is incorrect. This can easily be fixed by using a box model hack like this.

[CSS]
* html input.search-site{
width:159px;/* ie5.x */
width:149px;/* ie6* */
height:22px;/* ie5.x */
height:18px;/* ie6* */
}
[/CSS]

Note the in the last height in the above style.

Eventually the hack will go in the IE only file and seeing as we have no hacks for IE7 at all, I will change the conditional comments to refer to only ie6 and under like so.

[HTML]

[/HTML]

“if lt IE 7″ stands for “If less than IE7″.

You can find a full list of the operators for Conditional Comments here.

Looking through the other screenshots you can see that older safari won’t let you style the text input and it has a white background instead of the gray background image we used. However it still looks fine and is eminently usable so I won’t lose any sleep over it.

As far as the article is concerned we will leave it there for now but the layout could be improved further by making sure the positions of all the elements are correct and tweak them to match the PSD more precisely. There are also some images that could be tidied up and sliced better as I notice there are a couple of shading differences here and there.

Apart from one box model hack and one height hack the rest of the code is completely clean and easy to manage. It is important to build your layout on solid foundations at every stage and when you reach the end of the design you have little testing to do. Using the right approach also helps you avoid many of the IE ” haslayout ” bugs and simply making sure your parent wrappers have a “layout” will stop many bugs before you start. You don’t have to do this for every parent but only parents that hold more than simple content (such as multiple floated or positioned elements). Remember that setting a dimension is the easiest way to force “layout” and most times will not need to be hacked otherwise.

Now that we are happy with the layout the CSS can be removed to an external CSS file and once again the CSS and HTML should be validated. The final version can be found here but note that I have changed some path names from the earlier examples as I have merged the 2 image folders. I have also zipped the site up so that you can download it.

Oh and by the way I’ve left one small task for you to do by yourself and that’s to style and place the footer copyright text as it’s missing at present. I hope you have enjoyed working through this step by step example and you should now have a better grasp of how to tackle projects like this. In further articles we will explore ways of changing things around such as moving the columns and headers and changing the column sizes. Or perhaps moving the source html for the middle column higher up the html and anything else I can think of.. So hang on to your completed files as you will be using them again next time.

Blogging

{ 20 comments… add one }

20 comments on “From PSD to CSS HTML in 4 easy tutorials – part 4

  1. thepow on said:

    Many thanks for the effort you put on this great tutorial!!
    The coding part was easy to follow. =)

  2. Hi,

    I am new to Web Design, and am trying to do my first web site with Photoshop and Dreamweaver (using CSS). I have been trying out Photoshop and Dreamweaver the past few months, and was really looking for a tutorial that would take me through the flow of PSD to CSS as you have done here.

    I have gone through Part 1, and done a quick browse of Parts 2 – 4. I have my Photoshop design ready, and planning your tutorials as the basis for creating my CSS website.

    I must first say, your style of describing the tutorial and the quality of content is fantastic. I am really pleased to have come across your site.

    I saw your query on another page of this site, asking us for our ideas on what you could cover in the next tutorial. I would like to suggest the following:

    1) While I am familiar with the basics of CSS hand coding, and hence can understand what you say in the tutorials, I would also like to know how you would achieve the same results using the CSS abilities of Dreamweaver. Incidentally, I have Dreamweaver 8 version still. If I use Dreamweaver to do my CSS coding, would it introduce any additional cross-browser issues? How good is the CSS written by Dreamweaver in your opinion?

    It would be great if you could have a version of Parts 1-4 of your tutorials using Dreamweaver as your vehicle for CSS. I guess version updates in Dreamweaver might pose some keeping up with in future, but what do you think of this idea? Something like Photoshop to Dreamweaver in CSS..

    2) I see that we can create a ‘template’ with Dreamweaver, which I can reuse across all other pages of the site. Is this something that is also relevant in CSS speak, or is this purely a Dreamweaver feature?

    Thanks again for the great inputs, looking forward to your reply.

    Regards
    Geetha

  3. Le Minh Tran on said:

    greate tutorial,
    thanks,

    just one ideas to make it better, could you please edit the link to connect each part (like part 2 has the link to connect part 1 & 3, but the link is missing for part 1,3 & 4).

    once again, thanks you very much

  4. Thanks a lot! It so helps… Great job!!!

  5. CSSHowTo.com on said:

    The links at the bottom go to the next and previous blog posts, and these tutorials were posted between other tuts. To see all these posts together, choose ‘step by step tutorials’ from the sidebar menu, that shows all 4.

  6. Great tut, thanks for the hard work

  7. CSSHowTo.com on said:

    Your welcome, thanks for the nice comments

  8. Deny Deyn on said:

    ehh, this is interesting, thx
    i need to check my site in other browsers

  9. Nowhere else have I come across such detail in explanation. Very good! Please show us how to work with flexible layouts. What is difficult to understand is how to give em-based widths to sliced images that will act as backgrounds.

  10. sanal şirket on said:

    is a wonderfull sharing.. Thanks csshow.com

  11. Buy Kratom on said:

    You have certainly put in a lot of time producing this lengthy tutorial. This is something that can not be found in any book I have seen.

  12. Ramkrishna on said:

    Great Tutorial, I learned a lot from this tutorial.I must say you have taken a really good example of gradient backgrounds to explain.
    Thanks buddy.

  13. JKears on said:

    Good job!

    Through this tutorial I have gained a much better understanding as to how to tackle creating a CSS from a PSD composite.

    There appears to be a ton of bugs in various browsers that would impact the rendering of CSS, are there any good sites which list the most common incompatibility/bugs and corresponding hacks or workarounds?

    Thank you for taking the time to create this.

  14. Sawant Shah on said:

    This was a brilliant tutorial … all the 4 parts! Thank you so much for taking the time to write such a detailed tutorial, full of excellent information on how to make the coded site cross-browser compatible.

    Here’s a suggestion: Make a video tutorial out of these text tutorials, and upload to youtube. More people will watch it (than those who have read this), and it’ll be a win-win situation for everyone involved (you and the viewer).

    Keep writing great tutorials!

  15. Jhun Gulle on said:

    You’ve done a good job here! I followed your tutorials religiously, and Im so happy I was able to produce the site> Thank you for your help!

  16. Jonathan on said:

    Brilliant tutorial, I am not one for randomly throwing superlatives about or generally adding comments of any kind but I felt this deserved some acknowledgment. The depth of explanation for all 4 parts is impressive and must have taken some time to put together. As someone who has an intermediate understanding of html & css but looking to constantly improve, with only the web/books etc available as sources for further learning tutorials with this amount of detail are invaluable. Thankyou!

  17. Daskar Hosting on said:

    Really valuable post.. Thank for spending this much time for a great article. Great!!!

  18. Skate on said:

    Hi, I came across your site while looking for information on how to make a PSD file translate in to a liquid CSS layout in Dreamweaver. I did browse through you tutorial very quickly as you stated in the first that you would address that topic later on and I did not find it. Did I happen to miss it in my haste?
    I have been a graphic designer for many years and just passed off images to the web coders, but I am now trying my hand at doing my own website. I had a friend walk me through all the steps as I watched them do it but I am not happy with the fixed sizes I am getting and the developer told me there was no way to make something fit in every browser based on computer size. I read about liquid layouts and would love to know how to apply it to what I have if possible. Thank you so much for the detailed tutorial and thanks in advance for the help. Next I will find a tutorial on adding videos =)

  19. Pat Flanders on said:

    Thank you, so much for doing this tutorial!

    I learned a ton and am very happy with the site I made: http://www.magicratproductions.com/

    Great job!

    Pat

  20. Crazyxhtml.com on said:

    Brilliant tutorial and you’ve explained everything in very easy manner to follow through. However sometimes you don’t have much time to convert your PSD’s into professional looking HTML’s and that’s where we can help individual’s and business website’s. We at CrazyXhtml.com are a team of highly skilled and talented HTML/CSS programmers, where we provide services of converting your brilliant PSD designs to HTML and XHTML at very minimal pricing. Check out www.crazyxhtml.com

Leave a Reply

Your email address will not be published. Required fields are marked *

*

HTML tags are not allowed.

Leave a Comment