Layout

Information on how to do Layout with CSS.

Do by Example

http://www.teachingmultimedia.com/mmp240/layouts/layouts.html

This page has examples of one, two and three column layouts. Feel free to copy them and use them as a base for your work. To copy one click on it and then view source. The CSS is embedded on the page so there is only one file to see. When you use it you will want to separate that so you can have the same column CSS on all pages through an external stylesheet.

The Box Model

It’s important to understand this. It’s one of the basic ideas to understand in knowing about how a page is laid out:

http://webdesign.blogs.peopleio.net/layout/the-css-box-model/

Using Float

This is an important technique to making HTML/CSS layouts. HTML5 and CSS3 will make some of this easier but it is still needed now and good to know about in general.

http://webdesign.blogs.peopleio.net/layout/float/

Navigation

Listamatic — this site has some excellent resources for creating CSS-based navigation. It has a number of examples where you can see how the navigation looks and then copy and modify the HTML and CSS for the navigation. There is also a browser chart that lets you know which browsers support each navigation style.

Complete Example

How to Design and Code a Flexible Website — this tutorial goes through the whole process, from Photoshop design to converting to HTML/CSS in designing and building a site. If you’e having trouble putting it all together then walking through this example may be a big help. We looked at some of the files and did some of this in class. I’m putting the files here again as well.
navigation-and-images.zip

Other Resources on the Web

There are a lot of resources here. Look around and feel free to use pieces you need from them. Remember to always give credit in your comments when you get code from one of these sites.

http://www.maxdesign.com.au/articles/process/

This walks you through one process of how to plan for and create a layout based on a photoshop file. This process is also covered on this site starting here: http://webdesign.blogs.peopleio.net/layout/psd-to-html/

http://www.code-sucks.com/css%20layouts/faux-css-layouts/

These are a bunch of examples of using faux columns (background image to simulate columns). Includes 2, 3 and 4 column layouts.

http://www.code-sucks.com/css%20layouts/fixed-width-css-layouts/

Fixed width two column and three column layouts. These pretty much all use floats to make the columns.

http://www.bluerobot.com/web/layouts/

Two column and three column layouts. This is one of the first sites to show layouts.

http://snook.ca/archives/html_and_css/six_keys_to_understanding_css_layouts/

This article talks about the things you need to know to understand CSS-based layouts. We’ve talked about most of this but it is good to see it again and they provide some more resources.

http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css

This article goes back to what we talked about with ems and applies it to the layout as well. As a result you get what is called an elastic layout. This is basically a fixed width layout that can change widths as the user makes the text larger. The article itself is an example of a 3 column elastic layout.

http://www.maxdesign.com.au/presentation/butterfly/index.htm

This is a great tutorial that covers floats in a number of situations from layouts like we are doing today, to inline lists, to aligning thumbnail images for picture galleries. It also covers the difference between static, float, relative, absolute and fixed positioning.

http://articles.techrepublic.com.com/5100-22-5268973.html

Getting the columns to look equal height in a 3 column layout is a little tricky without using faux columns, so I’m not showing it today. However this article tells you how.

http://www.sitepoint.com/article/rock-solid-css-layouts

This is actually an entire chapter from a book. It takes you through from start to finish constructing a page that has a two column layout. The article is long but detailed and thorough. Click the print view at the top to see it all on one page.