Help : 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 4. Creating the mark-up

Start with a Doctype – in this case we will use HTML 4.10 strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

Next, add the document head information, including Character encoding and a link to a stylesheet called “styles.css”:

<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <title>Page title</title>
 <link rel="stylesheet" href="style.css" type="text/css" media="screen">
</head>

Finally, we add the body information – including empty <div> elements to reflect the containers we decided on above. For example:

<body>
<div id="container">
 <div id="header" title="sitename">
  <div id="skipmenu"><a href="#content">Skip to content</a></div>
  <h1>
   Sitename
  </h1>
 </div>
 <div id="mainnav">
  <ul>
   <li><a href="#">Section 1</a></li>
   <li><a href="#">Section 2</a></li>
   <li><a href="#">Section 3</a></li>
   <li><a href="#">Section 4</a></li>
  </ul>
 </div>
 <div id="menu">
  <h3>
   Archives
  </h3>
  <ul>
   <li><a href="#">December 2003</a></li>
   <li><a href="#">November 2003</a></li>
   <li><a href="#">October 2003</a></li>
   <li><a href="#">September 2003</a></li>
   <li><a href="#">August 2003</a></li>
  </ul>
  <h3>
   Last 10 Entries
  </h3>
  <ul>
   <li><a href="#">Entry 120 (4)</a></li>
   <li><a href="#">Entry 119 (0)</a></li>
   <li><a href="#">Entry 118 (9)</a></li>
   <li><a href="#">Entry 117 (3)</a></li>
  </ul>
  </div>
 <div id="contents">
  <div class="blogentry">
   <h2>
    <a href="#" title="Permanent link to this item">Heading here</a>
   </h2>
   <h3>
    Wednesday, 3 December 2003
   </h3>
   <p>
    <img class="imagefloat" src="flower.jpg" alt="" width="100" height="100">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <a href="#">Duis autem vel eum</a> iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent.
   </p>
   <p>
    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
   </p>
   <ul>
    <li><a href="#">Comments (4)</a></li>
    <li><a href="#">Pingbacks (1)</a></li>
    <li>Category: <a href="#" title="Category">CSS</a></li>
   </ul>
  </div>
 </div>
 <div id="footer">
  Copyright © Sitename 2004
 </div>
</div>
</body>
</html>

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.

body
{
 margin: 0;
 padding: 0;
 background: #ddd;
}

#container
{
 margin: 1em auto;
 width: 650px;
 background: #fff;
}

#header { background: #CF3; }
#mainnav { background: #9F3; }

#menu
{
 float: right;
 width: 165px;
 background: #6F9;
}

#contents
{
 float: left;
 width: 440px;
 background: #9FC;
 margin: 0 0 0 20px;
}

#footer
{
 clear: both;
 background: #FF9;
}

Step 7. Any problems?

While this layout works well in most browsers, Internet Explorer 6 shows a worrying issue.

The left margin on the content container is too wide. This is caused by an IE6 double margin float bug and can be resolved by setting the #content with “display: inline”.

#contents
{
 float: left;
 width: 440px;
 background: #9FC;
 margin: 0 0 0 20px;
 display: inline;
}

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.

<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <title>Page title</title>
 <link rel="stylesheet" href="style.css" type="text/css" media="screen">
 <!--[if IE 6]>
 <link rel="stylesheet" href="ie6.css" type="text/css" media="screen">
 <![endif]-->
</head>

Step 8. Detailed styling

When the containers have been positioned correctly and render correctly across all target browsers we can begin more detailed styling.

/* ------------------------------
global styles
------------------------------ */

body
{
 margin: 0;
 padding: 0;
 font: 85% arial, hevetica, sans-serif;
 text-align: center;
 color: #333;
 background: #ddd url(img_39.gif) repeat 0 0;
}

a:link { color: #B52C07; }
a:visited { color: #b93411; }
a:focus { color: #000; }
a:hover { color: #7d8206; }
a:active { color: red; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; }

h2
{
 color: #B52C07;
 font: 140% georgia, times, "times new roman", serif;
}

h2 a { text-decoration: none; }

h3
{
 color: #7d8206;
 font: 110% georgia, times, "times new roman", serif;
}

/* ------------------------------
container styles
------------------------------ */

#container
{
 margin: 1em auto;
 width: 650px;
 text-align: left;
 background: #fff;
 border: 1px solid #676767;
}

/* ------------------------------
header styles
------------------------------ */

#header
{
 height: 45px;
 width: 100%;
 position: relative;
 background: url(header.jpg) no-repeat 0 0;
 border-bottom: 1px solid #fff;
}

#header h1
{
 position: absolute;
 left: -500em;
}

#skipmenu
{
 position: absolute;
 left: 0;
 top: 5px;
 width: 645px;
 text-align: right;
}

#skipmenu a
{
 color: #555;
 text-decoration: none;
}

/* ------------------------------
mainnav styles
------------------------------ */

#mainnav
{
 background: #9FA41D;
 color: #272900;
 padding: 2px 0;
 margin-bottom: 22px;
}

#mainnav ul
{
 margin: 0 0 0 20px;
 padding: 0;
 list-style-type: none;
 border-left: 1px solid #C4C769;
}

#mainnav li
{
 display: inline;
 padding: 0 10px;
 border-right: 1px solid #C4C769;
}

#mainnav li a
{
 text-decoration: none;
 color: #272900;
}

#mainnav li a:hover
{
 text-decoration: none;
 color: #fff;
 background-color: #272900;
}

/* ------------------------------
menu styles
------------------------------ */

#menu
{
 float: right;
 width: 165px;
 border-left: 1px solid #C5C877;
 padding-left: 15px;
}

#menu ul
{
 margin: 1em 0;
 padding: 0;
}

#menu ul li
{
 margin: 0 0 1em;
 padding: 0;
 list-style-type: none;
}

/* ------------------------------
contents styles
------------------------------ */

#contents
{
 float: left;
 width: 430px;
 margin: 0 0 0 20px;
}

#contents p { line-height: 165%; }
.blogentry { border-bottom: 1px solid #C5C877; }

.blogentry ul
{
 text-align: right;
 margin: 1em 0;
 padding: 0;
 font-size: 95%;
}

.blogentry li
{
 list-style-type: none;
 display: inline;
 margin: 0;
 padding: 0 0 0 7px;
}

.imagefloat
{
 float: right;
 padding: 2px;
 border: 1px solid #9FA41D;
 margin: 0 0 10px 10px;
}

/* ------------------------------
footer styles
------------------------------ */

#footer
{
 clear: both;
 color: #272900;
 text-align: right;
 font-size: 90%;
 background: #9FA41D;
 padding: 5px;
}

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.

Hide any containers you don’t need using display: none;
Change all colors to black or grayscale colors.
Change links using a { text decoration: none;}
Remove font sizing and allow the default font-sizing to be used.

body
{
 margin: 0;
 padding: 0;
 font: 100% arial, hevetica, sans-serif;
 color: #000;
 background-color: #fff;
}

a
{
 color: #000;
 text-decoration: none;
}

#header { border-bottom: 1px solid #999; }
#header h1 { color: #000; }
#mainnav, #menu, .imagefloat, #skipmenu { display: none; }

#menu ul
{
 margin-left: 0;
 padding-left: 0;
 list-style-type: none;
 line-height: 165%;
}

#contents p { line-height: 165%; }
.blogentry { border-bottom: 1px solid #999; }

.blogentry ul
{
 list-style-type: none;
 text-align: right;
 margin: 1em 0;
 padding: 0;
 font-size: 95%;
}

.blogentry li
{
 display: inline;
 padding: 0 0 0 7px;
}

#footer
{
 clear: both;
 color: #000;
 text-align: right;
 padding: 5px;
 font-size: 90%;
 border-top: 1px solid #999;
 margin-top: 2em;
}

Help

Trang

Colored boxes – one method of building full CSS layouts