Error processing SSI file

Woven with CSS: Quick Draw MacFly

CSS Layouts are What's Hip

There is no doubt that CSS layout is in vogue. Clean, efficient, and quick-loading pages can be had if you just take a little time to learn the fundamentals. There are not many places where you can learn fundamental CSS techniques that can be deployed in a real-world web site without lots of study, trial, error, and occasional acid indigestion. The goal here is to show you a CSS layout you can unwrap and put on today.

Quick Draw MacFly

The CSS layout described in this article is titled "Quick Draw MacFly" because it's quick to render and just about flies across the internet and into your browser. Do have a look at Quick Draw before reading on:

| View the MacFly Example |

The Prime Directive:
Separating Structure from Presentation

Most people agree that CSS is a wonderful technology. With it we can make efficient and accessible web pages that can be displayed (or read aloud) by all manner of devices: browsers, assistive readers, PDAs, cellular telephones, my neighbor's new refrigerator, and whatever else may be lurking just over the horizon. However, in order to capitalize on the full breadth of this technology you must learn to separate the structure of your pages (the HTML markup) from the presentation (the style) of your pages. Say what?

HTML is designed so that tags such as <h1>, <h2>, and <p> describe a page's hierarchical organization - it's logical structure. A heading <h1> tag is not meant to make your text large and bold... it's meant to describe the nature of the text that comes below it. A <blockquote> describes a quotation - although lots of folks use this tag to quickly indent any old paragraph. Using structural markup correctly allows visitors to view information using any manner of device (as described above). We use structural markup to organize our words... not to style them. We use CSS to give our words style, pizzazz, panache, and more... while preserving the underlying logical structure.

By separating presentation from structure, we simplify our HTML documents and make them more accessible in the bargain.

Planning the Page

If you plan your work before beginning it, good things often happen and you get to utter the memorable words of Hannibal Smith, who said: "I love it when a plan comes together".

The MacFly layout contains a header, a main body of text, a sidebar, and a footer. The header and footer are designed to stand out in a contrasting color and the sidebar is positioned to the right of the main body. My little sketch below illustrates the vision that inspired the page.

We start with a sketch

Tip: When planning a page, it's always a good idea to sketch it. Pads and pencils work just fine. An Etch-a-Sketch can be used in a pinch.

MacFly uses <DIVs> to organize the page, instead of a table.

Note: The next article in this series will focus on laying out an efficient page using a table for structure. We may even attempt to coin a new catchphrase: CSS-PT.

Dreamweaver users may be scratching their heads right now because the common wisdom found in most Dreamweaver books is that to design a page you use either Tables or Layers - and we're using DIVs. Well, a Layer (in Dreamweaver-speak) is nothing more than an absolutely positioned DIV, which Dreamweaver allows you to easily insert or draw. It even lets you drag them about your page. Positioned absolutely, a DIV is placed outside (or above) the page flow, much like a text box in a word processor or page publishing program. When we omit a DIVs position, top, left, right, and bottom properties, that DIV is said to be static - which is the default state of a DIV in the absence of an explicitly set position value. Static DIVs are boxes that exist in the logical flow of a page. That is, they cannot be grabbed and dragged (in Dreamweaver) about the window. Static DIVs are nothing more than logical page DIVisions - boxes, if you will. Inside these boxes you can place headings, paragraphs, lists, images, and even tables. If, for instance, you wanted to wrap several paragraphs of text with a border, you could place those paragraphs inside a DIV and apply a border to the DIV. Here is the markup:

<div class="bordered">
<p>paragraph 1></p>
<p>paragraph 2></p>
<p>paragraph 3></p>

The class="bordered" attribute, inside the <div> tag, means that we have applied a custom CSS class to the DIV that sets (in this case) a black 1-pixel border:

.bordered {border: 1px solid #000000;}

| See the Bordered Div |

Building a Logical Structure

Let's examine the code of our 4-box MacFly page (header, main content area, right sidebar, and footer).

Here is the code that goes between the opening <body> and closing </body> tags. We've commented it to help you understand the structure and to keep track of the various DIVs. Comments look like <!-- this -->.


<!-- Header -->
<div id="header">
Header goes here.
<!-- We Close the Header DIV -->

<!-- Main Wrapper DIV -->
<div id="mainwrapper">
<!-- Main Content DIV -->
<div id="maincontent">

<!-- The Sidebar Starts Here -->
<div id="sidebar">
<p>These are test Links:</p>
<p><a href="#">Test Link One</a></p>
<p><a href="#">Test Link Two</a></p>
<p><a href="#">Test Link Three</a></p>
<p><a href="#">Test Link Four</a></p>
<p>More content goes here.</p>
<!-- We Close the Sidebar DIV Here -->

<!-- The Main Content Text Starts Here -->
<h1>Main Content Heading</h1>
<p>Main content goes here.</p>

<!-- We Close both the Main Wrapper and Main Content DIVs -->

<!-- The Footer -->
<div id="footer">
<p>Footer goes here.</p>
<!-- We Close the Footer DIV -->


| See the Base Structure Rendered |

| Next: Shaping and Styling with CSS |

Error processing SSI file