PSD toHTML: Basic CSS Layout

In this page we’ll go through the basics of adding CSS to a page to give it a layout. Because CSS doesn’t function without HTML we will also go over the HTML that is needed too. We start with a very simple version of the page with no content and work up from there. This page does not cover styling the content in detail. The goal here is to get the basic layout done.

If you’ve been following all of the previous tutorials and have already gone through and figured out what the boxes are and written HTML then¬† you’re ahead of the first few steps. This tutorial was designed to give a bit of review and reinforce those concepts.

Step 1: Determine the boxes in your design file.

Figure out what the major areas of the site are. Give them names and draw boxes around them. You don’t actually have to draw the boxes but I find that when you’re first starting at this the visuals are helpful.

click to view larger

Step 2: Make divs with IDs for each of the boxes

This step is relatively simple. For each of the boxes drawn in the PSD you make a div. So if you have a box named header then you have a div like so

<div id="header"></div>

The ids are important because this is how we will select these boxes later with the CSS properties.

click to view larger

Step 3: Add your CSS stylesheet

There are three ways to add CSS to a page: inline, embedded and external. Inline styles are added directly to an individual element on the page. The problem here is that you have to add it everywhere and it is hard to change. Embedded styles are usually added in the head element of the page. They provide each page with a single place to add styles. The problem is that most sites should have a consistent theme and appearance throughout all of the pages. External .css file can be added to every page on the site and is a central place to manage the visual style of the site. Here is more detail on the differences: http://www.w3schools.com/css/css_howto.asp. Except for some rare occasions where it’s necessary we will use external stylesheets for this class.

click to view larger

And then add styles for each of your div id’s

Step 4: Give the major divs background-color

The purpose of the background-color is to allow us to see the boxes that make up our site. While you can use whatever colors you like it’s usually preferable to use either the background color from the design or at least one of the colors in the color pallette for the design. If there are multiple columns with the same background color it is often helpful in this stage to ignore that and give them all different background colors so that you can differentiate them.

One problem people sometimes have is that in PS or other image editors the colors are in RGB value and in CSS you use hex (this problem is solved in CSS3 where you can use RGB values). One quick way to use your colors is to use the “Copy Color as HTML” command from the color palette. First you select the color you want (use the eyedropper tool). Then in the Color window click on the little triangle in the top right and select “Copy Color as HTML”

click to view large

You can then paste this into your CSS file. It isn’t really in CSS so you will just have to copy the hex color value and paste it again into the CSS property you want to use.

click to view larger

Step 5: Add height

Just adding the background-color won’t be enough. If you haven’t added any content to a div then it has no height so you won’t be able to see the background-color. The quick solution to this is to just add height properties to your divs.

click to view larger

Step 6: Add Width

The example we are using is a fixed width design that is based on a grid. That makes it easy for us to determine the widths of each column.  Here is a picture of the grid dimensions used for this design. The grid measurements tool used here is at http://grid.mindplay.dk

click to view larger

And using this tool and looking at our design we know just how wide to make each column and gutter. (in the process of creating your design you use the tool to help determine widths before starting the Photoshop process)

click to view larger

If you are not using a grid based design you can still do this but it won’t be quite as easy.

Here we have added the widths:

click to view larger

Step 7: Add Float to move the columns next to each other

This is the magic, and also a big source of confusion. The Float property tells the browser to make a block level element act kind of like an inline element and move up next to the previous block element if there is room. In this case it makes the three columns that were stacked one on top of each other move up next to each other.

click to view larger

Step 8: Add Clear to stop floating

As you can see above, we now have three columns but something happened to the footer. The problem is that once you start floating elements the browser takes them out of the normal flow of rendering the page. This can effect the elements after them unless you apply a clear property to them.

So the basic rule of thumb is to add a clear property to the block element that immediately follows your last floated element. In this case the first block element to start after the sidebar div is the footer div.

click to view larger

Step 9: Add margins to account for the gutters

In this example we are using a grid and all good grids have gutters. Generally it’s best to use margins to add the gutters. There may be times when padding is used but mostly start with margins and go from there. In this case we need margins for the side_nav and content divs.

click to view larger

Step 10: Begin adding Content

Now that you have the basic layout you can begin adding content. I usually recommend to start with the basic HTML elements and then work towards more complex elements like forms and tables and adding images.

click to view larger

Step 11: Remove unnecessary height settings

Now that there is content on the page you don’t need all of the height settings. We keep the height settings for the header and footer because in this design they are always the same height but for the other three areas we remove the heights because we want them to be able to expand and shrink with content.

click to view larger

click to view larger

You may notice in this example that all of the columns are not of equal length. That is because they don’t have the same amount of content in them. This is often the case. So what if you want them to look like they all have the same length? Try a technique called faux columns. The basic idea is that instead of giving background color to each column you make an image that is as wide as all of the columns and has the colors you want and then add that image to the background of an element that contains all three columns (in this case we would use the div with ‘wrapper’ as the id). Here is a link to an article about it:

http://www.alistapart.com/articles/fauxcolumns/

And here is a video showing how to make the background image in Photoshop:

http://www.teachingmultimedia.com/mmp240/screencasts/Screencast-PSD_faux_columns.mov

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>