Friday, November 9, 2012

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

1:26 AM  ,  No comments

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:
  1. <h3>Gallery Links </h3>
  2. <ul class="gallery">
  3. <li> <a href="http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/#"> <span> » </span> Reviews </a> </li>
  4. <li> <a href="http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/#"> <span> » </span> Equipment </a> </li>
  5. <li> <a href="http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/#"> <span> » </span> Consultation </a> </li>
  6. <li> <a href="http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/#"> <span> » </span> Freelancing </a> </li>
  7. <li> <a href="http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/#"> <span> » </span> Tutorials </a> </li>
  8. <li> <a href="http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/#"> <span> » </span> Digital tips </a> </li>
  9. </ul>

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:
  1. ul.gallery {margin :1em 0 1em 0 }
  2. ul .gallery li {
  3. text-transform: uppercase;
  4. margin :0 0 1em 0;
  5. font-size: 77%;
  6. }
  7. ul .gallery li,
  8. ul .gallery li a {
  9. color:http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/#252e1c;
  10. font-weight: bold;
  11. }
  12. ul .gallery li a span { color:http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/#fff }
  13. ul .gallery li a:hover { text-decoration: underline }

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:
  1. <p> <img src="images2/month1.jpg" alt="Photo of the month" width="206" height="113" /> </p>

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 (http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/#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:
  1. .photo p .month { padding-right: 0 }
  2. .photo p .month img { margin: 0 }

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 (http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/#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:
  1. h2, h3 {
  2. color:http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/#fff;
  3. text-transform: uppercase;
  4. font-style: italic;
  5. font-weight: bold;
  6. font-family: Arial, Verdana, Helvetica, sans-serif;
  7. font-size: 131%;
  8. margin :6px 0 10px 0;
  9. letter-spacing:-.04em;
  10. }
  11. h2 { color:http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/#120c0e; }

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:
  1. h2 { color:http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/#120c0e; }
  2. http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/#maincol p {
  3. font-size: 85%;
  4. margin :0 0 1 .9em 0;
  5. line- height: 1.6em;
  6. padding :0 5px 0 0;
  7. }
  8. http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/#maincol a {
  9. color:http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/#120c0e;
  10. font-weight: bold;
  11. }
  12. http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/#maincol a:hover {
  13. color:http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/#8bbd25;
  14. text-decoration: underline;
  15. }
HTML:
  1. <h2>Sanke Photography Tutorials </h2>
  2. <p> <a href="http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/#">Lorem ipsum dolor </a> 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, <a href="http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/#">facilisis quis </a>, 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. </p>
  3. <p>Mauris feugiat metus a lectus lacinia eleifend. Aliquam aliquam eros a nulla. Sed orci elit, semper eu, <a href="http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/#">pharetra </a> 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. <a href="http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/#">Curabitur arcu elit </a>, blandit a, ultrices et, semper at, neque. </p>
  4. <p>Cras sit amet felis nec eros condimentum lobortis. Aenean purus. Vivamus ultrices. </p>
  5. <p> <a href="http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/#">Sanke Photography </a> </p>

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:
  1. http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/#search {
  2. width:975px;
  3. height:275px;
  4. background: url (images/search-bg2.jpg ) no-repeat 0 0;
  5. position: relative;
  6. }
  7. http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/#search input {
  8. vertical-align: middle;
  9. position: absolute;
  10. top:216px;
  11. left:724px;
  12. }
  13. http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/#search input.go { left:885px }
  14. input.search-site {
  15. background:http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/#171b16 url (images2/inputbg.gif ) no-repeat right top;
  16. border: none;
  17. color:http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/http://feedproxy.google.com/#494b49;
  18. width:149px;
  19. height:18px;
  20. padding :4px 5px 0;
  21. font-size: 85%;
  22. }
HTML:
  1. <div id="search">
  2. <form id="form1" method="post" action="">
  4. <input class="search-site" name="search-site" type="text" value="Search the site.." />
  5. <input class="go" type="image" src="images2/go.gif" name="go" alt="go" />
  6. </div>
  7. </form>
  8. </div>

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:
  1. * html input.search-site {
  2. width:159px; /* ie5.x */
  3. width:149px; /* ie6* */
  4. height:22px; /* ie5.x */
  5. he\ight:18px; /* ie6* */
  6. }

Note the \ in the last he\ight 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:
  1. <!--[if lt IE 7]>
  2. <link href="iecss.css" rel="stylesheet" media="screen,projection" type="text/css" />
  3. <![endif]-->

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


Source : feedproxy[dot]google[dot]com

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)