Exciting, engaging websites

Colored boxes – one method of building full CSS layouts

How do you go about building a full CSS layout? Is there an overall method that can be used for any layout?

This article explains one method of building a full CSS layout from start to finish. The method, based on positioning colored boxes and testing across a range of browsers, can be used to build a wide range of full-CSS layouts.

Introduction

We will start with a basic graphic mockup and convert it into a working (x)html page. The aim is not to focus on this particular example, but the overall process used.

Some guidelines before starting:

Build one step at a time and test each step across a range of browsers

It is quite easy to start building a layout and come to a problem half way through. To avoid this, try building your layout in small steps and test each step across a range of browsers. This means you can see exactly how the layout is progressing and there is no need for backtracking if you run into problems.

Build for modern browsers then work backwards

It is better to start by building for standards-compliant browsers and then do work-arounds such as hiding (via @import) for older browsers.

Validate your HTML code and CSS

Validate your HTML and CSS frequently. Many layouts problems can be fixed with a quick validation check.

Step 1. Decide on a level of browser support

Before starting to build a CSS-based layout, you should decide which browsers to support and to what level you intend to support them. To help you decide, talk to clients and sample users as well as examining existing log files if they are available.

Levels of support

Full CSS support – the browser is served all CSS rules and should display the layout in a reasonably accurate manor. If you intend to provide full support to older browsers, you may need to use very basic CSS and avoid complex CSS positioning.

Partial CSS support – certain CSS rules are hidden from a particular browser. This generally means that the browser may not display the layout accurately, but it will still display some degree of the overall presentation. For example, this could mean that the fonts and colors are rendered correctly but certain aspects of positioning are not.

Unstyled content means you hide all styles from a particular browser.

Browser support options

Modern Browsers

Modern Browsers

Recent Browsers

Older Browsers

Option 1.

Full CSS support

Full CSS support

Full CSS support

Option 2.

Full CSS support

Full CSS support

Partial CSS support

Option 3.

Full CSS support

Full CSS support

Unstyled content

Option 4.

Full CSS support

Partial CSS support

Unstyled content

For this example, we will use option 2.

Step 2. Look for containers

To position elements on the page, the overall containers need to be established. Look at your design (which could be in the form of a digital mockup, a sketch on paper or an existing site/template) and work out the main containers on the page.

Step 3. Name the containers

These containers will become the main <div> elements that will hold your content, so you should give them names that have semantic meaning rather than names that describe their appearance. For this example the main containers will be called:

container

header

mainnav

menu

contents

footer

If the containers are unique to a page, use IDs rather than classes. This may be important when styling other elements on the page. If conflicts occur, rules that use IDs will override rules that use classes.

Step 6. Positioning the overall containers

These main containers must now be styled with a positioning method. To do this, we will add a series of CSS rules into the styles.css file. When we are happy with the overall position of containers, we will come back and add more detailed CSS into the file.

As this declaration is only needed for IE6, it is best moved to a separate style sheet just for this browser. This new style sheet can be placed inside a conditional comment so that only the relevant browser sees these styles.

Step 9. Print CSS

Finally, we need to prepare the layout for printing. If you want to faithfully reproduce the on-screen layout, you could change the links to your external style sheets so that they can be accessed by printers. There are many ways to do this including media="all" and media="screen, print".

If you want to give the user a print-friendly page you can do the following.

1. Duplicate your main css file (styles.css) and keep the backup copy. We will now work in styles.css and convert it to a print style sheet. As far as the browser is concerned, it is still a screen style sheet. This means we can work on the file and preview it in a range of browsers without having to go to print preview at every step.

When we are finished, we simply change the name of the file to “print.css”, and put a new link in the head of the document pointing to this file.

2. Look at the layout and decide what is necessary for the print version.

3. For this example, we will remove the header graphic, mainnav and right menu, as well as removing all colors and underline links.