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.

{ 20 comments }


I got around to posting the 3rd in our popular series of PSD to CSS tutorials last week and I have been suprised at how much people seem to be liking them. So much so we are going to let you decided what our next tutorial should be.

The 4th and final part is on its way in probably 2 -3 weeks and should finish off nicely how to create the 3 column design. But dont worry that wont be the end, for a start you can download all the content and play with it to your hearts content, but we are also planning more tutorials based around the ‘Sanke Photography’ theme. In no time you should have a full toolbox of tips and tricks to use to build your own website using nothing but CSS.

Like I said above the main reason for this post is to ask you guys what you are looking for CSS help with, place your tutorial ideas below and the best (most beneficial to the learner) ones we will turn into tutorials for you.

< shameless plug >If you are struggling with your CSS or just looking to hire someone to ;get some css done’, then please feel free to use the contact form link in the footer to get in touch.< /shameless plug >

Dont forget to post your ideas in the comments below!
Paul

{ 6 comments }

Thanks for staying with us and here we now have part 3 of 4 in our series of how to turn a psd to css/html. In part 1 and part 2 of this article we created some of the major elements that we will need in order to hold our content. This article will deal with the more difficult left column and all the content within it, as well as sorting out the.

Files
Some people have pointed out that the files are missing for the original tutorials. So you can download the original PSD at the following location
PSD files
Note: its a zip file that requires downloading, so right click the above link.
As mentioned in the first article the psd, files etc are all licensed under the Creative commons licence.

psd – css tutorial continued

The current state of play can be seen in the image below and at the following location.

Figure 14

Figure 14

If we compare this to the original PSD shown in figure 15 below you can see that we still have some work to do.

Figure 15

PSD to slice

The elements we will tackle in this and the following article can be listed as follows.

1) Position the watermark image at the base of the left and right columns

2) Add the search form on top of the big image in the header section.

3) Add content to the three columns along with the associated graphical icons

4) Add the copyright message to the footer.

Most of the above is just basic CSS and the only two main problem areas that I envisage causing trouble are the watermark images that sit at the base of the left and right columns and the graphical form elements. We will of course work through the rest of the content step by step but that shouldn’t cause us any problems.

Watermark

For the first task we will try and place the following image at the base of the outer columns.

Figure 16

There are a number of problems to overcome and it is good to list them so that we have an idea of what needs to be achieved.

In no particular order we must :

1) Place the image at the bottom of the column so that it always sits at the bottom no matter how long the column is.

2) Ensure the image is in the background and under the text content

3) Ensure the image is on top of the existing background fade and matches seamlessly

To accomplish Number 1 above requires a little bit of lateral thought because the columns actually have no height in reality as they are created by background images on the parent container. Therefore we will follow the example we set in part 1 of the article and we will position the watermark from an element that is below the columns which is our footer element. As the footer already has a background image in place we can’t use another background image on the same element. Therefore I am going to place the images absolutely from the footer and place them with a negative top position to bring them into place.

For number 2 above we will need to ensure that each of our elements has the appropriate z-index level set so that we can control the level of the initial background, the absolutely placed watermark image and the text content. That means there are 3 levels to consider in this process. In order for z-index to take effect we must make sure that non positioned elements have position:relative applied to create a local stacking context and also allow us to place the absolute elements with respect to the current context and not the viewport.

Number 3 is a little more involved and I am not sure what is going to work here and will have to use trial and error and see what the end result looks like. As I am constructing this layout in real time (so to speak) I am allowing myself the option to change my mind later if the approach taken doesn’t work out very well. I have two methods in mind and the first method is to create a transparent gif with a transparent background. The background will be green to match the current background color but will be set as the transparent color so that it hopefully hides the ragged images in our index transparent gif. If this method fails (doesn’t look good) then I may need to use a transparent PNG and use the alpha image loader filter for IE as already mentioned in earlier in this article.

Tackling Number 3 first I have created this image for the left column and this image for the right column by slicing the appropriate elements from the PSD.

To position the image (numbers 1 and 2) the footer first needs to have position:relative added to create a stacking context and also to allow us to be able to set a suitable z-index. To ensure the image stays on top of the content above we will give the content above a z-index of 1 and give the footer a z-index of 2. Then we can give the actual floated columns a z-index of 3 to keep the text above the watermark image. We do not have any background images or background colors on the floated columns themselves so there is nothing to worry about there.

The CSS needed is as follows:

[CSS]/* main content */
#main,#content{width:975px}
#main{
background:url(images/3col-bg.jpg) repeat-y 0 0;
position:relative;
z-index:1;
}
#content{
background:url(images/3col-top.png) no-repeat 0 0;
min-height:270px;
}
* html #content {height:270px}/* for ie6 and under*/
#col1{
width:207px;
margin:0 28px 0 18px;
display:inline;/* cure IE6 double margin bug*/
float:left;
position:relative;
z-index:3;
}
#maincol{
width:444px;
margin:0 48px 0 0;
float:left;
position:relative;
z-index:3;
}
#col2{
width:180px;
float:left;
margin:0 50px 0 0;
display:inline;/* cure IE6 double margin bug*/
position:relative;
z-index:3;
}
/* footer and copyright */
#footer{
width:975px;
padding:20px 0 0 0;
background:url(images/3col-base.jpg) no-repeat 0 0;
clear:both;
position:relative;
z-index:2;
}
.watermark{
background:url(images2/flame2.gif) no-repeat 0 0;
position:absolute;
width:186px;
height:209px;
clear:both
}
.w1{left:45px;top:-189px}
.w2{
right:45px;
top:-170px;
height:176px;
background:url(images2/flame3.gif) no-repeat 0 0;
}[/CSS]

The extra CSS has been merged into the existing stylesheet as shown above. The only things to note are that I have used a class called “watermark” which defines a few consistent properties for the elements and then I used classes of “w1″ and “w2″ to provide the positional differences. This saves about 4 lines of code but is worth doing because anything that reduces code weight is good as long as readability and usability doesn’t suffer. The classes are applied together using a space to separate them.

e.g. class=”watermark w1

You can use as many classes as you want in this manner as long as you separate them by a space and they will follow the normal rules of the cascade in that the later styles of same weight and origin will win out.

There are no spare elements to use for the watermarks so I am going to use two empty divs and then absolutely place the divs into position. I don’t like using empty elements but sometimes there isn’t a choice and I just have to grin and bear it.

The html is as follows:

[HTML]

[/HTML]

The result as seen in Firefox is shown in Figure 17.

Figure 17

Watermark

Although the images look really jaggy when viewed individually and out of context we can see that once they are placed on the background then the edges are softened and merge in with the background. Bearing in mind that most of the time there will be text content overlapping these images I’m happy to accept this level of quality. If you wanted much sharper images then you would need to use PNG images with the aforementioned hacks for IE6 and under.

The live example can be seen here for you to examine and compare.

For those of you using IE6 and under you will notice that we have a problem!

The bottom of the layout (which was previously fine) has all gone awry as seen in figure 18 and is in desperate need of help.

Figure 18

IE6 Problem

We seem to have lost the bottom part of the layout and we need to bug hunt and find out what caused IE6 to misplace this section.

The easiest way to see what’s causing the problem is to retrace our footsteps and remove one element at a time until we find the trigger for this behaviour. This is why you must check your work at each stage in various browsers or you could build a whole page on this broken issue.

The first step in my bug hunt is to remove the two watermark divs from the HTML as this is the most likely culprit. Removing the 2 divs and checking again in IE shows that everything is now back to normal. Now that we know what the problem is we need to find away of doing what we want without breaking IE6. Is there a specific style that triggers the effect. To test this out we need to put back the HTML for the watermark divs and then selectively delete styles that apply to them and see if we can trigger a response. It soon becomes apparent that we can delete all the styles that refer to the watermark without finding an actual trigger for the effect.

This leads to the conclusion that the problem must be the HTML that we added. We already know that removing the HTML will set the layout back to its correct position. Fortunately I have seen this bug before and know what the solution is. IE6 doesn’t like the fact that we have placed empty divs in the footer especially with all the styles currently applied to it. The solution is easy and we simply need to ensure that we have some real content in the footer and our image will return. If we add a line of text that will eventually be the copyright message we see everything jumps back to normal.

[HTML]

This is a copyright message

[/HTML]

IE6 now shows everything correctly and we can continue with our testing by adding content to the three columns and check that our layering is in fact correct and everything overlaps as it should. Grabbing the text content form the PSD and inserting it into the HTML (unstyled for now and unformatted) we can then test our layout so far.

Unfortunately, we must have done something wrong because our layout has overlapped incorrectly as can be seen in this live example and in the screenshot below.

Figure 19.

Incorrect z-index

We have incorrectly addressed the z-index layering of our elements and the watermark is now on top of our text content which is not a good thing.

Referring back to our original plan we set our content (#main) to have a z-index of 1 and the footer a z-index of 2 and then we gave the columns a z-index of 3. Although this may sound logical it is in fact flawed because the columns are contained within #main which only has a z-index of 1. Ultimately it is the parents z-index that determines the stacking level of all its children in relation to other elements outside our current stacking context. We could have given the columns a z-index of 100000 but it would be to no avail because #main is z-index:1 and the footer is z-index:2 and is outside of #main. Therefore the footer will always be on top of #main and any of its children no matter what their z-index may be.

One solution to this problem is to remove the z-index from #main and to bring all the children under the same roof and to have the same parent (#outer). This means that the children’s z-index will be honored amongst each other and this does indeed fix the issue in most browsers as shown in the Firefox screenshot below.

Figure 20

z-index removed

Unfortunately, and once again, we have problems in IE all the way from IE7 backwards. The watermark still overlaps the text even though we have removed the z-index from #main. The problem is that IE incorrectly assigns a z-index of zero when an element is positioned instead of applying a value of “auto” as defined in the CSS specifications. This means that IE will always create a local stacking context for its children and causes the problems we are experiencing. In order to combat this behaviour we also need to remove the position:relative from #main so that a local stacking context isn’t created and once again all children can live under the same roof.

Removing the position:relative from #main fixes IE and we now get the result seen in figure 20 above. The only downside is that this prohibits us from placing any absolute elements in relation to #main if we ever needed to in the future. However, for the time being we don’t need to do this so we will call this a solution for now and end up with this final code which you should compare to yours if you are working along with me. Ignore for the moment the content that we pasted from Photoshop as the html needs to be tidied up and applied semantically so we will be changing it all shortly.

Column 1

Now that we have sorted the watermark and the layering issues we will turn our attention to the more mundane tasks of styling the content in the columns. We already have some dummy html in place but now we need to format it and style it correctly. As a refresher see Figure 21 for the result we want to achieve.

Figure 21

left column layout

The issues to overcome in this section are as follows.

1) Create the heading at the appropriate level and in the closest font to match the PSD (or perhaps use an image if we can’t get close).

2) Slice the graphical components from the PSD. (i.e. The various icons, the faded underline, the photo of the month image) .

3) Position the elements with the correct spacing and margins to match the design.

The only slightly complicated task above will be placing the page icon that goes before the lorem ipsum text. We could use a background image for this at the start of the line but we would need to ensure the line was high enough to show the image and that content doesn’t wrap over the image. Although we could do this with padding it would mean that all lines will be as high as the image which probably isn’t a good idea.

A second approach would be to float the image into place in the background of an element of appropriate dimensions and this would allow the text to wrap quite nicely. All that would be needed would be to insert a span and apply the appropriate styles to it. The only downside is that all the dimensions would need to be specified and addressed correctly in order for the image to sit correctly.

A third (and my preferred) approach is simply to use an image in the html. Nine times out of ten when a designer sticks an icon in the page like the one above they also want that icon to be a link to more content. It is so much easier to use an image in the HTML as it does not incur additional code overheads or extra mark-up in order to place it correctly. As long as the image is “inline” by default we can control its vertical alignment and it can easily be turned into a link if required all without setting dimensions or much CSS at all. It also aids accessibility in that the image alt attributes are available to all unlike a background image. Therefore we will take this approach and see how it all pans out.

Headings

Let’s tackle the headings first.

The first thing to note is that the designer has again used a non standard font and we need to get the closest match we can or use an image combined with image replacement techniques (or SIFR if you are into flash based alternatives). I am going to try to use Arial text in the same way that I did for the navigation because it looks quite similar to me. It is so much better to have text headings in the HTML as it is better for all and of course so much easier to work with. However if it doesn’t look good then it’s another matter and you will need to discuss with your client what options to take.

The results look good enough for me but I know they won’t be good enough for some and this is a decision only you can make.

I am going to use Arial in an H3 heading as I think that will be the correct level for this column. It seems that this style is consistent so I will style the h3 directly without the need for a class. I also notice that column1 (#col1) is slightly misplaced so I will line it up by changing the margins a bit. The revised CSS is as follows:

[CSS]
#col1{
width:207px;
margin:0 21px 0 25px;
display:inline;/* cure IE6 double margin bug*/
float:left;
position:relative;
z-index:3;
}
[/CSS]

The extra style for the H3 element also follows:

[CSS]
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;
}
[/CSS]

Once again we have let CSS turn the text into uppercase so that we don’t have to type in capitals in out HTML. I have also used letter-spacing to shorten the width of the text a little bit so that it matches more closely the PSD.

Figure 22 shows a comparison between our HTML version (on top) and the original PSD heading below.

Figure 22

Heading comparison

Although there are still some differences I am happy to proceed as it is far better to use normal text than it is to have to use images and image replacement techniques.

Next we tackle the text under the heading which includes the page icon and then some text with a border that fades at the ends (refer to figure 12 above). Looking at the 3 items under the “Latest News” heading we could almost think of them as a list of topics and use a list structure. However, I feel that paragraphs are more appropriate as they are really just three paragraphs of content following each other.

The icons and the underline will have to be cut out as transparent GIFs because they are used on different backgrounds. Again you will run into the jagged image problem but if you choose your transparent colors carefully it should be good enough for the task in hand. I have created three images that we need for the next section and they can be found here.

Page Icon Page Icon

UnderlineUnderline

Photo of the month Photo of the month

The lines of text are spaced apart so we will use line-height to space them correctly and margins and padding to create space around them. I am going to put the underline in the background of the p element and place it central and at the bottom which means we will need some padding bottom on the p element to allow room for this image to display.

Although, it isn’t really needed I am going to wrap the 3 paragraphs of text in a containing div so that I can apply styles to the elements inside that div without the need for lots of classes (although we will need some classes).

The html for the top section is now looking like this:

[HTML]

Latest News

Page Icon Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Page Icon Nam magna lectus, dapibus ut, ultrices at, fermentum eget, ligula.

Page Icon Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Read All News »

[/HTML]

The top section is contained inside a div and the icon image is in the html. The underline is image is placed in the background of the p element as mentioned above. The » (double arrow) has been put inside a span because it needs to be styled as a white color compared to the rest of the text which is black. We can then target the span via the parents class without needing to add another class to the span. The downside of this would be if you had more span elements in that section that you didn’t want styled and then you would need to use a class for the span instead. Fortunately we don’t have need of another span so we can simply target it via the parent’s class. e.g.

[CSS].news span{color:#fff}[/CSS]

For the last line in that section I have added a class of “readmore” to apply to the last line which needs to be right-aligned and bold. I could have done this without a class by targeting the anchor directly but I though it wise to create a class in this instance as the “readmore” style is likely to be used elsewhere. If you look closely at the HTML above you will also see I have applied a class called “last” to the last paragraph in that section. The reason for this is that the last paragraph doesn’t have an underline so we need to remove the image from the last one. Unfortunately we cannot use the :last:child css3 selector as IE doesn’t support it so we need to add another class to the element concerned. Finally, to get the text to the right only needs text-align:right applied to the p element and that more or less completes the top section.

The Full CSS for that section is as follows.

CSS

[CSS]
.news{
width:207px;
color:#252e1c;
}
.news p{
font-size:85%;
background:url(images2/underline.gif) no-repeat center bottom;
padding:0 7px 8px 0;
line-height:1.4em
}
.news p.last{
background:none;
padding-bottom:1px;
margin:0 0 .4em 0;
}
.news p img{
margin-right:2px;
vertical-align:middle;
display:inline;
}
.news span{color:#fff}
p.readmore{
font-weight:bold;
text-align:right;
margin:0 0 1.4em 0;
background:none;
}
p.readmore a{
text-decoration:none;
color:#252e1c;
}
p.readmore a:hover{
text-decoration:underline;
}
[/CSS]

Notice that the “page-icon” image has been declared as inline so that it behaves like text. The vertical alignment was also set to middle so that it gets positioned correctly in respect to the text.

[CSS]
.news p img{
margin-right:2px;
vertical-align:middle;
display:inline;
}[/CSS]

Although images are “inline” by default we have set all images to be block in out global stylesheet and that is the reason we needed to set them back to “inline” here. I also put a little extra right margin on the image to give a bit of breathing space.

The next task is the “Photo of the Month” section which uses the same style of heading and text as the previous section. Therefore we can re-use our “news” class in this section but also add another (space separated) class to over-ride a few differences in this section.

If you study figure 21 above you will see that the “Photo of the Month” section is actually pulled over to the left by about 7 pixels or so compared to the news section above.To move this section into line I am going to use relative positioning rather than margins (although I could have used margins also). This is to show you how relative positioning can be used without harming the layout.

These are the photo styles:

[CSS]
.photo{
position:relative;
left:-6px;
}
[/CSS]

This will shift the element 6px to the left from where it was. It will not change the flow of the document at all and will cause no ill effects in this situation. However if we had shifted the element down the page with relative positioning you would find that it would overlap other elements and be a pain to work with. The fact of the matter is that position:relative only moves elements visually and not physically. They always occupy their original place in the page but just appear to be somewhere else. As far as other elements are concerned the element has not moved at all. This is why you must be careful if you use position:relative because it’s not really meant for structural layout but for more subtle effects or where you want elements to overlap without disrupting the flow of the document.

If you want to move an element then most times you would use margins because this would keep other elements away by the distance specified and cause other elements to re-flow accordingly.

In this “photo” section we have another heading the same as the news section so we will use the h3 again which is already styled correctly. The big image that follows is really content and should be in the HTML rather than a background image so I will wrap the image in a p element and insert it into the page as shown below.

HTML

[HTML]

Photo of the month

Photo of the month

[/HTML]

The criteria for determining whether an image should be in the background or the foreground is simply to say to yourself :

“Is the image for decoration only”?

If the answer is yes it is decoration and bears no importance to the content then it should be a background image. If on the other hand the image is important to the content (such as this photo of the month image) the it should be in the HTML and not the background. I have wrapped the image in a p element because I dislike anonymous inline boxes and always ensure that inline elements are in a suitable semantic container.

We need to cancel out a few styles that were applied via the “news” class as this bottom section doesn’t have an underline image and the spacing of the H3 is slightly different. Therefore we will use the “photo” class I mentioned earlier and over-ride a few styles as follows.

[CSS]
.photo h3{margin-bottom:8px}
.photo p {background:none}
[/CSS]

We also have the opportunity of re-using our “readmore” class and can apply it to the “Visit Gallery ” text at the bottom. Also needed is the “last” class to set the correct bottom margin.

The full html for the section is as follows:

HTML

[HTML]

Photo of the month

Photo of the month

¤ Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Visit Gallery »

[/HTML]

We can now compare the PSD and the HTML versions side by side for this section.

Figure 23

left column comparison

 

There are minor pixel differences and if you wanted to spend a little more time you could make the examples even closer but I think that the above is close enough for now and looks pretty good to me. In fact its quite hard to tell which image is the original PSD……….(It’s on the left).

Now would be a good time for you to compare your code with the state of play so far and to validate your code and browser check once again.

I notice in the above image that the final paragraph of the PSD is slightly more indented than mine so we can target that paragraph as it already has a class of “last” applied to it and pad it out a bit.

[CSS].photo p.last{padding-left:5px}[/CSS]

That wraps up the left column and we can move onto the right column in the fourth and final part of our tutorial series. I hope you are following along and enjoying the tutorials, feel free to leave questions and comments below.

{ 25 comments }

Welcome to part 2 of our tutorial. In part 1 we created the basic structure of the site on which we are going to build our photography site. This is the second in our 4 part series on how to take a PSD file and convert it into a fully CSS based html page. These are the first in a series of tutorials in which we build a fully working Photography site, all in clean Xhtml and CSS. All the code, templates and files are available for you to play with, and we encourage you to download and play with what is provided. The design template is licenced under the creative commons licence.

We are still working from the same PhotoShop file (PSD) and in this part of the tutorial we are going to flesh out the layout a little more and by the end it should be looking a lot more like the design we are working from.

In case you need reminding or are new to this series of articles, below is what we are aiming to achieve. Here is the first PSD to CSS html tutorial

PSD Layout

PSD to CSS part 2

At the end of part 1 we finished by creating the very top Navigation of the site, part 2 is going to start with the logo and tagline below the top nav. Lets get going..

Logo and Tagline

The first main graphical element is the logo and tagline that is reproduced in Figure 2 below.

Figure 2

Logo and tagline

Choices, choices , choices……

As with any graphical element you should look at ways that sections can be repeated to save on file size. Unfortunately for this element there is no uniform section that can be repeated as there is an undulating wave effect covering the whole layout. Also there are rounded corners and beveled edges to consider and the number of images used would be many.

Time to compromise….

In order to simplify things I am going to place most of the image in one go. I will remove the logo on the left side and also remove the lorem ipsum text from the right side. This will leave us with a background as shown in Figure 3.

Figure 3:

Tagline background

We can then place the company logo on the right hand side and also turn it easily into an anchor that will point to the home page as per usual.

The lorem ipsum text was removed from the image because it may be changing on different pages throughout the site so I wanted to make it easier to adjust later on. The text is clearly graphical and as it is part of the logo I am going to place it as an image but use some text replacement techniques so that the content is still available to search engines and people alike. The image will have to be placed exactly to match the background but this shouldn’t be too difficult as you can compare the positions from the positions that you cut out from the PSD.

I am going to place the image shown in Figure 3 as a background image and then overlay the logo as a foreground image because I think the logo is important. As mentioned the lorem ipsum tagline text will be an image but will have a text alternative for screen readers etc. Any image replacement fails at some stage but some are better than others and again its another choice that only you can make as to whether you should follow this route or not.

There is another issue of what elements to use for the logo and tagline?

Some people advocate using an H1 element for the logo on the first page and some will argue against it. I think that an H1 should describe the page content exactly and if the logo has a text equivalent to the main heading then it could be used. In our page the logo says “Sanke Photography” but further down the page we have another heading that says Sanke Photography Tutorials. So which is it to be?

I can’t answer this question for every case but it seems to me that the site heading should be Sanke Photography and the sub heading is “Sanke Photography Tutorials”. Therefore in this case I am going to put the logo in an H1 element but to hedge my bets I am also going to include the tag line within the h1 as it will add extra content and meaning to the subject. However , I would have no objections to having the logo and tag line in paragraph tags and the main heading as the “Sanke Photography Tutorials” heading which is further down. As you can see I’m sitting on the fence here a bit so feel free to make your own mind up.

We are going to use an element called #tagline which will hold our logo and tagline so we need to create an element of the correct dimensions to hold our background image. We also need an overlapping effect due to the graphic on the right of the image that rises up alongside the text. We can create this with a negative top margin on #tagline which will pull the image upwards and next to the navigation. To avoid stacking issues we will set position:relative on the nav and on #tagline and then set the z-index on each so that the nav has a higher z-index and sits on top of the background on #tagline. This is accomplished as follows.

[CSS]ul#nav{
position:relative;
z-index:2
}
#tagline{
width:975px;
height:116px;
margin:-40px 0 0 0;
background:url(images/tagbg.jpg) no-repeat 0 0;
position:relative;
z-index:1
}[/CSS]

Remember that only positioned elements can have a z-index applied so you need to add position:relative if the element isn’t already positioned. The other use of position:relative is that it sets a stacking context for further positioned elements and allows us to place our logo and tagline absolutely into position within this element and not based from the viewport.

The image replacement method we will use is to place the image in an inner element and then drag it on top of the text content to hide it. As long as we set a width that matches the height and with of the image we can then set overflow to hidden and any text that spills out will be hidden. This allows for the text to be available to screen readers and users alike should images or CSS be turned off. We do this for both the logo and the tagline and end up with HTML and CSS as follows.

[html]

Sanke PhotographySanke PhotographySanke Photography simply the best for your photography tutorials

[/html]

[css]
/* tagline code */
#tagline{
width:975px;
height:116px;
margin:-40px 0 0 0;
background:url(images/tagbg.jpg) no-repeat 0 0;
position:relative;
z-index:1
}
#tagline a,
#tagline a em{
position:absolute;
width:218px;
height:68px;
overflow:hidden;
left:27px;
top:39px;
}
#tagline a em{
cursor:pointer;
left:0;
top:0;
/*background:url(images/logo.jpg) no-repeat 0 0; use this as an alternative to image in the html*/
}
#tagline span,
#tagline span em{
position:absolute;
width:383px;
height:51px;
overflow:hidden;
left:408px;
top:51px;
}
#tagline span em{
left:0;
top:0;
background:url(images/tagline.jpg) no-repeat 0 0;
}[/css]

Images used:

tagbg

logo

tagline

The cursor:pointer is added to the em that is inside the anchor to help IE remember that it is still an anchor and show the correct cursor.

If we look closely at the html we can see that the h1 has no real styling and therefore we can get rid of the div surrounding the h1 and apply the ID directly to the h1 instead as follows. We simply give the H1 the tagline ID and remove the div surrounding it.

[html]

Sanke PhotographySanke PhotographySanke Photography simply the best for your photography tutorials

[/html]

The only CSS change is to remove the following code which is now redundant.

[css]
#tagline h1{
margin:0;
} [/css]

The layout so far can be viewed here and you should check it matches with yours if you are working along with this. Just view source and you can see the code as the relevant CSS is still embedded in the head.

Figure 4 shows the result of our work so far.

Figure 4

The layout so far

That looks pretty good and at this stage you check in as many browsers as you can to make sure all is well. You should also try resizing the text to see if there is any overlap that is unacceptable. There are bound to be some minor things on text resize but you should endeavor to always keep the page usable within reasonable limits.

Figure 5 shows the text resized to smallest and largest in IE6 and all is looking good.

Figure 5

Text resize

Search Box and Background Image

Moving on the next element which is the search box and the main page image graphic we need to decide what quality this image will need to be. Its a big image and will be a very heavy file size. I have optimised it down to about 50k (which is still large) but it was originally about 4 times that size. Because this is a photography site then we probably need to make sure the images are of a good quality and at this stage I would cut the image out and make 2 versions in case the client wants a better quality at a later stage. So when you save a big image like this do yourself a favour and save a higher quality version also just in case.

Remove the search box from the image and cut the image to the right dimensions. It is also worth looking a little further down the page and you will see that the next elements has rounded corners and beveled edges so we can save some time by including the top of the next element with the search box image and end up with an image like this and as seen in figure 6.

Figure 6

Search background

As this element is a fixed width and height and there is not really any text that will break out when resized so we can place this whole image as one background image with a fixed width and height. That makes things very easy and we can still overlay our search box in position using absolute positioning. In order to make use of absolute:positioning inside this element we will need to make sure once again that we set position:relative on the parent as follows.

[css]
#search{
width:975px;
height:275px;
background:url(images/search-bg.jpg) no-repeat 0 0;
position:relative;
}[/css]
[html]

[/html]

That was pretty painless and our layout is now starting to take reasonable shape as seen in figure 7.

Figure 7

Search background

Main 3 column Section

We start to move on to some more complex areas and this is the main part of the site with three columns across the screen. The columns can simply be floated across but we are going to have to think about 3 main things.

  • 1) The vertical faded gradient that is on each column.
  • 2) The 3 equal columns that will match each others height.
  • 3) The bottom round corner on the right column

Issue one has two solutions that we could use. We could take a vertical slice of each of the columns in turn of about 5px x 250px which contains the whole gradient. We would then need to repeat that image in each of the floated columns as required. The only problem with this method is that the PSD shows a slight gradient horizontally as well and also shows fading beveled edges. If we were to carry on with these small slices we would need at least another 4 images for each edge as well and forget about the horizontal gradient altogether.

The second solution is to simply cut the whole background out in one go. While this may seem a bit heavy handed we can actually cut a rather big image of 975px x 270px but optimise it right down to about 3k with little loss of color. This saves multiple background images and gets us much closer to the original design. This is the method we will use and results in this image being produced and can be seen in Figure 8. As with all the other images I have cut some of the background with the image to allow for the slight background fade.

Figure 8

3 column top background

 

Issue two can be tackled by creating a horizontal slice that contains all three column colours and we can repeat this on the main parent of this section that is holding all three floats. We create the slice by ensuring that we slice from the finishing colour of the vertical gradient. This gives us the following image.

Figure 9

3 column slice

This image will be repeated on the y-axis of the parent in this section and will provide full length column colours that always remain equal with each other. We will then overlay on the top part of this image the larger gradient image as shown in figure 8 so that we get the good gradient effect we wanted. This will mean that an extra element will have to be nested to hold this image but it is worth it.

As the page expands the repeating slice comes into play and if we have cut the images out correctly there should be a seamless transition between the two images.

Therefore the html we need will now be as follows:

[html]

[/html]

The nested element named #content has been added to hold the big gradient image while #main will hold the repeating slice. As #content will also contain our three floated columns we need to make sure the floats are cleared and we can do that simply by adding our clearfix class to the element in question. This will ensure that the floats are cleared and the background of the parent extends with the floats and isn’t left behind.

Floats are removed from the flow and will float out of their parents reaches unless you do something to stop them. I’m quite happy to use the ‘clearfix’ method in this case but you should be aware of the various issues associated with each method.

The CSS we need is simply as follows:

[css]
#main,#content{width:975px}
#main{background:url(images/3col-bg.jpg) repeat-y 0 0}
#content{
background:url(images/3col-top.png) no-repeat 0 0;
min-height:270px;
}
* html #content {height:270px}/* for ie6 and under*/
[/css]

The hack for IE6 and under is because it doesn’t understand min-height but luckily does treat height almost as min-height which suits our purpose nicely. We need a min-height here because of the vertical gradient and if we don’t allocate enough height our repeating slice will repeat from a section that doesn’t match.

The result of the above code can be seen in figure 10.

Figure 10

Three columns

You can view the state of play here in a real example also.

To allow content to be pout into these columns just requires us to measure the columns and apply the necessary margins to our floats to make then all line up where we want. the measurements I have come up with are as follows:

[css]
#col1{
width:207px;
margin:0 28px 0 18px;
display:inline;/* cure IE6 double margin bug*/
float:left;
}
#maincol{
width:444px;
margin:0 48px 0 0;
float:left;
}
#col2{
width:180px;
float:left;
margin:0 50px 0 0;
display:inline;/* cure IE6 double margin bug*/
}
[/css]

You must make sure that all these dimensions fit in your container otherwise floats will drop or be misplaced. We have 975px to play with and the widths and margins for the floats adds up to exactly 975px. There is also a fix in the code for IE6 and under which will double the margins on floats where their side edges meet their parent’s container. The fix is to add display:inline to the floats in question and miraculously fixes the problem. Floats are display:block and cannot be made to be display:inline so the fix is really nonsense and should have no effect but luckily for us it cures this bug. Other browsers will take no notice of display:inline because it does not apply to floats.

All that’s left (graphically) for this section is to somehow add a rounded corner base to the bottom of the right column as seen in the original design. Its also worth noting that the whole page is capped off with 2 more rounded corners as well. There is no real way that we can find the bottom of the right column in order to place a rounded base there because the right column content is simply a float of content height. Therefore we will take a different approach and simply apply the whole base by using a background image in our footer element to complete the illusion.

The Footer

Slicing the whole three column base in one goes results in an image like this which is also shown in figure 11.

Figure 11

3 column base

The CSS is straight forward as follows:

[css]
#footer{
width:975px;
padding:20px 0 0 0;
background:url(images/3col-base.jpg) no-repeat 0 0;
clear:both;
}
[/css]
[html]

[/html]

We can take a look at the layout so far and I have coloured the 3 columns red so we can check the positions are correct.

Figure 12:

Columns and footer

That looks just about right so the red colour can now be removed. The layout so far can be seen in this live example.

Things Left to do

We have completed the major structure of the site and will take a rest now

In the next part of the article we will add the content for each column along with the search form that we forgot to put in place. We also need to find a way to implement one last remaining structural graphical issue in that we will need to find a way of placing the watermark image that can be seen at the bottom of the outer columns. This is the image and is shown in Figure 13 also.

Figure 13:

flame image

This will prove quite tricky as the image is anchored to the bottom of columns 1 and 3 and at times will overlap the gradient background. However we will leave that to next time but you may wish to experiment and try for yourself.

There will also be some tidying up to do and once we have tested the result thoroughly in the browers we want to support we will remove the CSS from the Head and once again validate the CSS and HTML to avoid any unforseen errors.

Part 3 of this article will follow in a couple of weeks

{ 23 comments }

This is the first in our 4 part series on how to take a PSD file and convert it into a fully CSS based html page. These are the first in a series of tutorials in which we build a fully working Photography site, all in clean Xhtml and CSS. All the code, templates and files are available for you to play with, and we encourage you to download and play with what is provided. The design template is licenced under the creative commons licence.

Lets get on with the tutorial!

One of the hardest parts of converting a PSD design into a well structured and semantic CSS/HTML layout is first knowing where to start. Although that may sound simplistic and obvious, it really does matter how you begin and that you build on strong foundations to start with. In this series of articles I will take you step by step through the conversion process and look at decisions that need to made on the way and how those decisions may need to adapt as things progress. The article will not address any specific graphic techniques (e.g. slicing and optimising) as this varies from paint package to package and is not the subject of the article. You will of course need to know how to do these things and I am assuming that you already have this basic knowledge.

For a starting point we are going to assume that you have just been handed a PSD by your clients graphic designer and asked to turn it into valid and workable CSS/HTML. (Obviously it would be better if you had input on the design before the “fait accomplis” was handed to you but for the purposes of the tutorial we will just accept that this is the case.)

Here is a smaller image of the layout we are going to eventually produce.

PSD Layout

Step 1

At first sight the layout looks quite straightforward but before we begin we should take a closer look at the elements and identify possible problem areas. At this early stage you may need to make important design decisions so you must have a clear idea of how the design can be achieved from the very start. If you identify areas that are impossible to create on a living web page or would cause to many browser issues then its best to locate them now and notify the client before you begin.

It is also worth mentioning at this point that you should have already agreed with your client exactly what work you are doing and exactly what they are paying for. If you don’t define the exact parameters of the job in hand you will find that the client will take advantage of this and ask for every possible addition under the sun and expect support forever all for a pittance.(Some clients are not like this but there are a number who will be very sharp.)

Fixed, Fluid or em based

With the disclaimers out of the way we can get on with the job in hand and look at initial issues and then break the layout down into more manageable chunks. The first question that needs to be asked is whether this is a fixed with layout or a fluid width layout where each column can stretch. Of course you should consult with your client on these matters but for the purposes of this first tutorial we will assume that it’s a fixed pixel width layout. Later on in the series we will explore how to convert the example to a fluid layout or an em based layout. But for the first article we will stick with pixels to make the process slightly easier to begin with.

My initial thoughts on looking at the PSD before even coding a line of html is that the designer has provided a lot of gradient and shadow effects in various places and also added rounded corners to some of the design elements. For example the background of the design has a vertical fade that fades from #282f27 – to #000000 over a 880 pixel range. That is no problem in itself in that we can repeat a vertical slice on the x-axis of the body while at the same time setting the body’s background color to the finishing color of the fade (#000). This will allow the layout to extend vertically forever without problem. The complications will arise in that the header elements have a a slight background fade placed around them that varies with the body’s fade.

We have two options here:

1) Create the fade around the element using PNG transparency for the fade so that the body’s faded background can show through the opaque PNG image. Although this is fine for most browsers there are severe issues with IE6 and under that won’t render the transparent PNG properly. We could use the proprietary alpha-image loader filter to compensate for IE5 and 5.5 if we have no other choice but that also comes with a number of associated problems and should only be used when there is no alternative.

2) Slice the elements background with the gradient shadow in place and match it up to the body’s gradient background. As the header elements are a fixed height then this should work fine. Of course should text be resized and the elements allowed to grow then the fade may become mismatched. However, I thinks that’s a small price to pay to keep the code simpler. Therefore this is the approach we will use for this method and if we find out later that its not good enough then we may have to think again.

Wire Frame

To roughly see what elements you need for the whole page you can create a wire-frame view of your site (either in your mind or just draw it on paper). Here is a quick mock up of the basic structure of our page.

Wire Frame

Although I am not going to build this wire frame for real it does give you a good visual clue as to what needs to be done and also provides some logical order to the proceedings. Some people will actually construct the wire frame version but I find this often gets in the way during development so we will do this my way and work our way through the page one element at a time and from the top down to the bottom.

Each area will present its own little problems but the basic structure can be seen to be a centred layout with three full width static horizontal sections followed by three columns that will need to be floated across the screen. The main part of the site will be the three floated columns and the big issues we will need to overcome are the three apparently equalising columns. This can be accommodated quite easily in our fixed with layout by using a repeating background image that creates the three columns automatically when we repeat it on a parent that is holding the 3 columns.

There will be additional issues to overcome in the main section because there are also vertical gradients and images aligned to the bottom to consider and we may need to adapt our design as we go. But for now it’s good enough to have realised this and considered what the options are. If at this point you believe something to be impossible as not all designs can be transcribed to the web you should contact your client and seek alternative strategies should the design need to be changed, Better to raise issues now rather that have the client say “it must be like this” when you have finished.

After identifying the main issues and ratifying any design changes its time to start on the real work and actually do some coding and slicing.

As mentioned above I like to work on one element at a time in a logical fashion so we tackle each of these issues in turn and the process will look like this.

1) Grab font sizes, font families and basic colors from the PSD and set up up CSS defaults for these including your favourite Reset CSS snippet. Also set up the default font-size structure that will allow for text to be resized in IE6 and under. In fact this is such a common process that you should already have a template set up so that you can start work straight away and allows you just to change the font family and colours and off you go.

2) Measure the layout so that we can create a wrapper for the content as the page needs to be centred so all content can be within the wrapper. However some designers will use a width on the body element instead of using an inner wrapper but this presents problems in older IE browsers and I recommend leaving the body alone. However it is an option if you want to be really minimalist.

I find that I am often giving PSDs of 800px width because the graphic designer has been told that it is for a 800 x 600 page and doesn’t realise that 800px is too wide for an 800px page due to chrome and scrollbar issues. The design would need to be about 760px wide (depending on browser) so as not to trigger a horizontal scrollbar. This is something you will get used to and need to look out for.

3) Start at the top and work down.

Working logically helps you break the job down into sections so that you can work on one thing at a time and plan the work accordingly. You always have to have an eye on what’s coming next but concentrating on one thing at a time will focus your efforts and give you a sense of accomplishment when each element is completed rather that having half finished elements everywhere.

In our PSD we have the navigation at the top followed by the logo and tag line. Then follows a header image with search box. Finally we have three columns and a small footer with copyright message.

I like to use logical names for the sections and although there is some debate about what to use for each element it does help if your naming convention allows for the fact that maybe your html will be arranged at a later date and that your element names still make sense. If for instance your left column is called #leftcol and the at a later date you switch it using CSS to be the right column then it could be very confusing. It’s better to use a more generic but functional name such as #sidebar1 for the left column and #sidebar2 for the right column or even #col1 and #col2. However you could move the sidebar to the middle and then it wouldn’t be a sidebar anymore so think carefully about your names but don’t go overboard with names that are so generic that you don’t know what they refer to.

For our layout we will use the following id’s:

#outer – hold all page content

#header – contains nav and other header elements such as logo and search.

#nav – main top navigation

#tagline – logo and tagline

#search – Search box and background image

#main – This is a wrapper that holds all three columns

#col1 – left column

#maincol – main centre column

#col3 – right column

#footer – Footer

For other internal elements we will use classes. Remember that IDs must be unique and can’t be used more than once per page.

Basic Structure

We now have enough to write our very basic html structure and set up some default stylesheets so that we are ready to roll.

HTML:

[html]

<!–[if IE ]> <![endif]–>

 

[/html]

Main CSS:

[CSS]
/* main CSS Document */
/* general styling first */
/* reset css styles individually instead of universal selector. */
/* based on http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */
html, body{
margin: 0;
padding: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
border-left:0;
}

div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

body {
line-height: 1;
color: black;
background: white;
font-family: Verdana,Arial, Helvetica, sans-serif;
}

ol, ul {list-style: none;}

table {
border-collapse: separate;
border-spacing: 0;
}

caption, th, td {
text-align: left;
font-weight: normal;
}

/* end reset styles */
/* clearing technique *
.clearfix:after {
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}

.clearfix {display:inline-block;}
/* mac hide */
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide */
/*……….. do not change or amalgamate the above clearfix styles ……*/

p,h1,h2,h3,h4,h5,h6,ul,ol {margin-bottom:.5em}

a img,img{border:none;display:block;}

a{
text-decoration:none;
color:#252e1c;
}

h1,h2,h3,h4,h5,h6{
font-weight:bold;
}

h1{font-size:197%}/* 26px */
h2{font-size:182%}/* 24px */
h3{font-size:167%}/* 22px */
h4{font-size:152%}/* 20px */
h5{font-size:136%}/* 18px */
h6{font-size:122%}/* 16px */
body{
font-size: 13px;
text-align:center; /* for ie5.+*/
}
[/CSS]

IE only CSS served from CSS file via conditional comments:

[CSS]
/* IE CSS Document */
body {font-size:x-small;font-size:small}/*ie5 and 5.5. that are one size out*/
body table{font-size:x-small;font-size:small}
[/CSS]

This will be served as follows:

[HTML]

[/HTML]

I have used Eric Meyers Reset CSS method to give uniform defaults to all elements and then used a font sizing method similar to the one used on Yahoo YUI. I am also going to use the :after method of clearing floats as documented on PIE as this allows floats to be cleared without structural mark-up and works nicely without too many side effects. All this will give a consistent base to work from and provides a good template for any page. Having this all set up to start with means that you can more or less get on with the job of converting the PSD without further ado.

You can copy the base files from here and get ready to roll.
base.htm
main.css
ie.css

Step 2

Assuming you have set up some reasonable defaults for text, link colors and font styles etc we can now get on with the job of construction. I have set the main font family to verdana in the body element because most of the page is in that font and that will save us from specifying it everywhere.

When I’m constructing a site for the first time I always work with the CSS in the head of the document (apart from the default sheets we already set up of course) because this makes it so much quicker to review and edit while working on the same page. Once the page is fully working and tested then the CSS can be added to the main external CSS file. It is also worth getting into the habit of checking your work at each stage in the browsers you want to support especially when you are learning. I more or less know what will or won’t work but checking in 3 or 4 browsers at each stage makes sure that there are no discrepancies and things can be fixed easily at this stage rather than waiting until the whole thing is finished when indeed it may be impossible to fix.

You should also take these testing opportunities to quickly validate your HTML and CSS so that typos can be kept out of the code and ensure that the code you are using is legitimate.

I won’t mention testing again (until the end) but you can assume that at each stage the above tests will take place.

From top to bottom

Working from the top down we will start with the body element itself and apply the gradient background as a repeating slice to the background of the body and repeat it along the x-axis. The background-color of the body will be set to the closing gradient color which happens in this case to be black. This will effect a seamless transition as the page goes from gradient to solid color.

The gradient is 800px high and therefore we have no choice but to slice the whole height of the gradient. Don’t be tempted at this point to make the image 1px by 880px high because that means the browser will have to repeat that image 1024 times for a 1024px wide page and that takes a lot of effort on the browsers behalf. I would use at least a 5px wide slice or even 10px wide slice to save the browser working too hard and for the page to be drawn quickly. If the slice is 10px wide then the browser will only need to repeat the image 102.4 times rather that 1024 times which is a considerable difference.

There is always a trade-off between image file size and the time it takes to repeatedly draw it on the screen so don’t be tempted to use 1px images everywhere or the page will slow to a crawl.

Slice the background of the PSD to create an image that is 5px x 880px and save it as bodybg.jpg.

This will give us the following CSS to add inside the head of our page (inside the appropriate style tags of course):
[CSS]
body{
background:#000 url(images/bodybg.jpg) repeat-x 0 0;
}
[/CSS]

Now we move to the main content and need to create the page wrapper that holds all the content. Measure the page and then centre it. I have added a fix for ie5 already in the defaults that I set up earlier and have applied text-align:center to the body which will make ie5.x centre nested block elements such as our main wrapper #outer. We must however remember to set text-align back to left on #outer otherwise the text will be centred also.

Here is the resulting code from measuring the page and centering it using auto margins.
[CSS]
#outer{
width:975px;
margin:auto;/* center the page*/
text-align:left;/* reset text back to left due to ie5.x fix */
}
[/CSS]

Header and Nav

The header is given a width to avoid “haslayout” issues in IE and ensure that we don’t suffer from the myriad of associated bugs.
[CSS]
#header{
width:975px;
}
[/CSS]
The navigation can be made horizontal by setting the list elements to generate “inline boxes” instead of “block boxes” and allow then to line up horizontally. Using lists for repeated navigation elements is now the accepted way of coding these elements and adds semantic structure to the page rather than a load of bare anchors that can cause accessibility problems with assisted technologies like screen readers. Adding padding to the ul allows the navigation to be spaced out correctly from the right edge and allow room for the overlapping graphic.

What font is is?

We run into out first problem in that the designer has to decided to use a non standard font for the navigation. Therefore you have to make choices (the first of many) on how to proceed.

If the design must have that exact font then there would be no alternative but to use images for the navigation as the font specified is unlikely to be present on 99.9% of systems. Using images for navigation can hurt your SEO (Search Engine Optimisation) prospects ins some cases so its worth avoiding doing this unless absolutely necessary. The main font used in the content of the page is Verdana so that would be the first font to try and see how close it looks. Unfortunately it didn’t look too good but on testing further it seems that Arial is a close match especially when made italic and sized to match.

Here is a screenshot of the original navigation taken from the PSD compared to our layout in Firefox 2 using Arial.

Figure 1

Navigation comparison

The top line is the original and as far as I’m concerned that’s pretty close. We can never match the anti aliasing and partial bolding that Photoshop offers anyway. If your client wants it exact then you will have to replace the text with images instead and use a suitable image replacement technique instead.

We can assume from the PSD that the word in green is the current page and can probably also assume that each word will rollover with the green color also so we will build that into the nav from the start. We simply apply a class of current to our list structure so that we can target that specific anchor and then also effect a change on hover for other elements. You may think that it would be better to add the class to the anchor instead but I find that putting the class on the list allows me to target the list element uniquely if needed and to also target the anchor uniquely therefore possibly saving using an extra class at a later date.

The full styles for the above are as follows.
CSS:
[CSS]
ul#nav{
font-size:92%;
padding:18px 115px 5px 0;
text-align:right;
}

ul#nav li{
display:inline;
padding:0 13px 0 0;
text-transform:uppercase;
font-style: italic;
font-weight:bold;
font-family: Arial, Verdana, Helvetica, sans-serif;
}

ul#nav li a{
color:#fff;
}

ul#nav li a:hover,
ul#nav li.current a{color:#8bbd25}
[/CSS]
HTML:
[HTML]

[/HTML]
Note that I have used text-transform:uppercase to make the navigation in uppercase rather than typing in uppercase. There are a number of reasons for this. First ITS RUDE TO SHOUT as we all know but more importantly the effect is really decoration and should be carried out via CSS and not the html and thirdly it makes the HTML look neater.

The navigation is more or less finished but we may need to tweak its positions later on so we will leave it as it is form now and come back later if we need to move it around.

That concludes part 1 of the Tutorial, Part 2 should be ready in a few days and will go more indepth into getting the page looking like the original PSD.

{ 109 comments }

CSS Image Maps With Pop-Up Tool Tips

Using an unordered list, a couple of images, and a little CSS, we can create an accessible “image map” with pop-up tool tips that provide our readers more information on the links the map contains. There are several techniques out there for doing this, but, unlike some, the one outlined here has the advantage of working in older versions of Internet Explorer.

To begin, we’ll need two images, the first one being our image map, and the second one being a 1px by 1px transparent GIF image, which we’ll use as a background image for the map’s “hot spots” in order to work around a bug in earlier versions of IE.

Here’s the image I’ll be using for the map itself:

Image M ap

Now we can move on to the HTML. Essentially, what we’ll do is create an unordered list of links that each contain a span tag which holds information about the link for our tool tip pop-up. We’ll give each link its own class name, so that we can define the area and position for the link’s hot spot on the image.

Here’s the HTML for my map.

[html]

[/html]

Now let’s move on to the CSS, starting with the list itself, which we’ve given the ID of “map.” We want to set the margin and padding for our list to zero and then we want to define the size of the list, which should be equal to the size of the image we’re using for our map (in this case, 400×200 pixels). Then we’ll set that map image as the background. I’m also defining some font styles here, so I don’t have to do it later.

[css]
#map {
margin:0;
padding:0;
width:400px;
height:200px;
background:url(map.jpg) top left no-repeat #fff;
font-family:arial, helvetica, sans-serif;
font-size:8pt;
}
[/css]

Then we’ll do the list items themselves– simple stuff, just get rid of the formatting applied by the browser.

[css]
#map li {
margin:0;
padding:0;
list-style:none;
}
[/css]

Now we need to apply some styling to the links. Each link will need its own dimensions and positioning (which is why we gave them class names), but they’ll also share some common properties, like the fact that they should be absolutely positioned block elements, with the transparent GIF for their background.

[css]
#map li a {
position:absolute;
display:block;
/*
Specifying a background image
(a 1px by 1px transparent gif)
fixes a bug in older versions of
IE that causeses the block to not
render at its full dimensions.
*/
background:url(blank.gif);
}
[/css]

Next, we simply need to hide the span inside of our links.

[css]
#map li a span { display:none; }
[/css]

After we’ve done that, we need to define the style, size and position of the tool tip itself. We need to make it visible on mouse over and it should be relatively positioned in relation to the link we’re hovering over, with a bit of an offset (20px x 20px in this case). Then we’ll make it look pretty, giving it a white background, a border, padding, and lower the opacity slightly, so you can still see what’s under the tool tip. We’ll set a width of 200px, but we’ll let the height be automatically determined by the amount of content in the tool tip. We’ll also set the color of the text and get rid of the underline.

[css]
#map li a:hover span {
position:relative;
display:block;
width:200px;
left:20px;
top:20px;
padding:5px;
border:1px solid #000;
background:#fff;
text-decoration:none;
color:#000;
filter:alpha(opacity=80);
opacity:0.8;
}
[/css]

Now all that’s left is to define our link hot spots and set the size and position of the links, by class name, that correspond with the images. You’ll have to do a little bit of measuring here, just as you would with any image map. Just find X, Y coordinates where the top left corner of the hot spot should be, and then determine the height and width from there.

[css]
#map a.bunny {
top:20px;
left:60px;
width:80px;
height:90px;
}

#map a.parrot {
top:1px;
left:275px;
width:50px;
height:50px;
}

#map a.snail {
top:135px;
left:30px;
width:50px;
height:50px;
}

#map a.dog {
top:100px;
left:150px;
width:115px;
height:95px;
}

#map a.cat {
top:65px;
left:315px;
width:70px;
height:120px;
}
[/css]

The final image map can be viewed here.

{ 65 comments }

Making A CSS Based Calender

With some simple CSS applied to an unordered list, we can quickly and easily make a nicely formatted calender that’s easily lightweight and updated.

To begin, we need to determine the width of our calender, so pick a size you’d like to use for the boxes that the dates will go in. In this example, I’ll be using 30 pixel by 30 pixel boxes. Next, I want to put a 5px solid border around each box that will be the same color as my page background. This will space the boxes 10px apart while avoiding messy work-arounds and problems with box model behaviors between IE and other browsers. Thus our overall size of each “day” box, including that border is 40 by 40 pixels. So, to get the overall width of our calender, we multiply 40 by 7 (the number of days in the week) and get a total width of 280 pixels.

With that out of the way, we can start coding our calender. Let’s do the HTML first and get that taken care of. We’ll start by creating a container to hold our calender, then we’ll put the month inside a H2 tag and we’ll finish things off with an unordered list containing the calender itself.

[html]

July, 2007

  • Sun
  • Mon
  • Tue
  • Wed
  • Thu
  • Fri
  • Sat
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

[/html]

Note that we have two classes inside our list– “day” which is a textual representation of the day of the week, and “num” which is the actual date.

Now let’s write some code (I’m also going to set the text size, font and colors here as well).

[css]
#cal {
width:280px;
font-family:arial, helvetica, sans-serif;
font-size:9pt; /* this will fit in our 30x30px box nicely */
color:#000;
text-align:center;
line-height:30px;
}
[/css]

Notice above that we also gave the “cal” div and all elements inside of it a line-height of 30 pixels– the same as the height of our box (minus the border). This will ensure that all of the text is vertically centered.

Alright, now let’s move on to our header. We’ll make the header 10px less than our overall calender width, and put a 5px margin on the left, right, top and bottom, so that it will be spaced properly and will appear lined up with the numbers bwlow it.

[css]
#cal h2 {
width:270px;
margin:0 5px 5px 5px;
font-size:12pt;
background:#004a80;
color:#fff;
}
[/css]

Now we can set the styles for the list itself. This is pretty straightforward. We simply define the width and set the margin and padding both to zero.

[css]
#cal ul {
width:280px;
margin:0;
padding:0;
}
[/css]

Next, all of our LI tags within the calender, regardless of whether or not they’re used as a label for the day of the week or as a number, will share some of the same properties, such as the removal of their bullets, their height, width, border size and color, and vloat value. So, let’s define those now.

[css]
#cal ul li {
width:30px;
height:30px;
display:block;
float:left;
list-style:none;
border:5px solid #fff;
margin:0;
}
[/css]

Now all that’s left is to format the appearance of the day labels, and then the actual dates.

[css]
#cal ul li.day {
background:#666;
color:#fff;
font-weight:bold;
}

#cal ul li.num { background:#ccc; }
[/css]

Our calender is now finished! Oh, but wait! Go back and take a look at that markup– notice now there’s an event scheduled for July 2nd? It’s my wedding anniversary (7yrs). We need to denote it as being a special day, so that visitors can easily see that we’re linking to additional information.

See how the link has an “event” class assigned to it? Let’s define the CSS for that. We’ll just change the colors and make the text bold– we also have to m ake the link a block element and assign it dimensions, so that it fills the entire space for that date block.

[css]
#cal a.event {
display:block;
width:30px;
height:30px;
background:#6dcff6;
text-decoration:none;
color:#004a80;
font-weight:bold;
}
[/css]

NOW our calender is finished. You can view the final result here. Also, here is an example of the same technique applied to a smaller calender, illustrating how you would do a 1px border around each list item, for a more condensed look.

{ 10 comments }

Accessible Graphical Menus

When designing a web site, it’s generally a good idea to keep your sites navigational elements text-based. This has several advantages, like being search engine friendly and easily accessible to screen readers and hand-held devices. Let’s face it, though, sometimes that’s not always practical and what the site design really calls for is a nice menu comprised of graphics in which the actual menu text is stylized. So, here’s a little trick that will give you the best of both worlds. We’re going to build a graphically-based navigation menu out of an unordered list.

To start with, we need our graphic. It’s not very pretty, but it illustrates the point.

full.jpg

Next, we need to slice our menu up into its individual graphics. My menu is 150 pixels wide and each “button” will be 30 pixels high. (working out to, in this case, a 150 x 150 square menu). When I slice up the menu, I’m going to do something a little special, though, since I want a hover effect. I’m going to make my individual menu button graphics 60 pixels high (twice the original height) and then put the original graphic in the top half of the image and the hover state in the bottom.

Our final images will look like this:
home_btn.jpg about_btn.jpg

and so on…..

With the graphics out of the way, we’re ready to code. First, let’s do the HTML markup.

[html]

[/html]

I’d like to point out a couple of things about our list:

1: We’re using a standard unordered list with an id of “nav” and we’ve given each link within the list its own corresponding class name.

2: There’s a SPAN tag around each bit of link text– this will allow us to hide that text later on.

Open it in your browser and you’ll see a normal looking unordered list. This is what users who visit your site with CSS and images disabled will see. It’s what the search engines will see, and it’s what screen readers will read. Now we just have to make it look like it’s all graphics.

Let’s write some CSS, starting with the list elements themselves. We’ll remove the borders, padding, and item markers.

[css]
#nav, #nav li {
width:150px;
margin:0;
padding:0;
list-style:none;
}
[/css]

Look at the list in your browser and you’ll see a list of links, without any formatting. This is what we want. We’ll build up the graphics inside the links themselves. So, moving on…

[css]
#nav li a {
display:block;
width:150px;
height:30px;
background:top left no-repeat #06487f;
text-decoration:none;
}[/css]

Here we’ve defined the properties for the links that make up our list. We want to treat them as block elements (so we can give them a size) and then define that size– the 150px x 30px (the width and height of our link buttons). After we’ve done that, we want to specify that the background image we’re going to set later will be positioned at the top left of the link element. Then we’ll just tell it not to repeat (just for good measure) and set a background color. Finally, we also have to tell the browser that we don’t want the link text underlined, because even though it will be hidden, some browsers (like FireFox) will still show the underline).

Now we’re ready to define the CSS for the classes themselves. Simply put, we’re going to set the background for each class to its corresponding button.

[css]
#nav li a.home { background-image:url(home-btn.jpg); }
#nav li a.about { background-image:url(about-btn.jpg); }
#nav li a.services{ background-image:url(services-btn.jpg); }
#nav li a.forums { background-image:url(forums-btn.jpg); }
#nav li a.contact { background-image:url(contact-btn.jpg); }
[/css]

Note: Notice how all of my buttons here are the same size? If you want to use buttons that are different sizes (in a horizontal list, for instance), simply define the sizes in each button’s corresponding class, rather than doing so in the link properties itself.

Next, we need to specify our hover state. All we have to do for this is simply move the background image up by changing the background’s vertical alignment.

[css]
#nav li a:hover { background-position:bottom left; }
[/css]

Finally, we just need to hide the link text itself from view.

[css]
#nav li a span { visibility:hidden; }
[/css]

Note: Using “display:none” instead here, while alleviating the visible underline problem, causes spaces between elements in IE, so we just hide it and set the text-decoration to none, as above.

Now your finished list should look like this one. Now your users get a fully graphical menu, while search engines and screen readers get a nice, text-based menu.

{ 8 comments }

Hanging Punctuation With CSS

Hanging Punctuation refers to the technique of positioning certain typographical elements, such as bullets, quotation marks on pull quotes, etc. into the margin of a document, so that the main text that the glyph highlights remains flush with the rest of the body copy around it. Often seen in print, rarely used on the web, hanging punctuations can help keep the flow of your document and make the text easier to read.

Devising a cross-browser solution can be tricky, particularly with regards to lists. I’ve come up with a solution below that works in IE6/7, FireFox, Opera 9 and Safari.
[click to continue…]

{ 5 comments }

Horizontal Menus That Grow on You

In this quick tutorial, I’m going to discuss how to create a neat little menu effect. I’m dubbing it the liDock, because elements in the menu resize as the mouse moves over them, similar to the dock on OS-X, and because it’s a list menu. :)

We’re going to create a horizontal row of boxes containing link text. When we move the mouse over one of these boxes, it’s going to get taller and the text larger and bold. I’ll link to a finished example at the end of the tutorial.

Let’s begin by setting up the XHTML for the menu. This is pretty straightforward and simple. We just want to make an unordered list and give it an id of “navlist”.

[html]

[/html]

As I said, nothing much to see there, just your basic list. Let’s move on.
[click to continue…]

{ 21 comments }