Home Page: No Tables

From PikaDocs

By Brian Lawlor & Mark Sawyer
Legal Services of Northern California (http://www.lsnc.net/)

At its simplest, the Home Page -- like others based on the Pika "default page" structure -- relies on a very common web-page layout design:

As detailed at Home Page: Deconstruct, the top and the bottom of the Pika default page layout derive from the default.html file located in the /templates subdirectory. Structurally, the top and the bottom are built using DIV tags styled with their corresponding selectors in the danio.css style sheet located in the /css subdirectory.

But what about the middle content? For the Home Page content, the structural markup is provided, not surprisingly, by the home.html file located in the /subtemplates subdirectory. Unlike DIVs used to control layout in the top and bottom, the middle content for the Home page is controlled by using TABLE markup fleshed out with a single TR "row" and three TD vertical data columns. Pretty straightforward stuff.

There is a longstanding debate (http://www.davespicks.com/essays/notables.html) about whether to use tables or CSS (http://www.saila.com/usage/layouts/cssvtables.shtml) to control page layout, which is a variation on the debate among web designers about separating content from presentation (http://www.maxdesign.com.au/presentation/benefits/index07.htm).

That debate prompts the experiment here: Is it possible to do a markup makeover of the home_page.html template and substitute semantically correct DIVs for the arguably semantically incorrect TABLE tags, and still have the Home Page appear the same?

Let's give it a try. There are four basic steps involved in doing the structural makeover of the home.html file:

1. Substitute DIV tags for all the TABLE tags.
2. Strip out all the embedded style elements, e.g., "width," "valign," and so on.
3. Assign distinctive ID or CLASS names to each of the DIV tags.
4. Create new CSS styles corresponding to each of the ID and CLASS names, to control the layout and positioning of all the new markup.

Once done, the markup at its simplest would look something like this:

<div id="middle-content">

    <div class="side-column firstcol">
    <h2>Frequent Tasks</h2>
    <p> ... </p>
    ...
    ...
    </div>

    <div class="secondcol">
    <h2>Message Board</h2>
    </div>

    <div class="side-column thirdcol">
    <h2>Other Websites</h2>
    <form> ... </form>
    ...
    ...
    </div>

</div>

Notice that the above example still uses the "side-column" class declared in the original template, but adds an additional class name for the first and third columns, "firstcol" and "thirdcol", respectively. (You can have multiple class names (http://www.evolt.org/article/Ten_CSS_tricks_you_may_not_know/17/60369/) assigned to a single selector.)

With the new structural markup but without any new styles added, the Home Page will display like this:

Okay, great semantics but poor presentation, right? Without any new CSS styling control, the three DIVs simply render vertically in the order they appear in the markup. What you really want are the three DIVs to display something like this (the blue dotted border and extra padding have been added to emphasize the effect):

To accomplish this effect, add the following selectors, ID and CLASS names and corresponding style attributes to the very end of the danio.css style sheet:

/* "No-Tables" home.html elements */

#middlecontent {
    padding: 10px;
    margin: 0;
    margin-top: 10px;
    height: 600px; /* set for IE */
    min-height: 600px; /* set for Mozilla */
    }
.firstcol {
    margin-top: 10px;
    border: 2px dotted blue;
    float: left;
    width: 160px;
    padding: 10px;
    }
.firstcol p {
    margin-top: 20px;
    } 
.secondcol {
    margin-top: 10px;
    border: 2px dotted blue;
    margin-left: 10px;
    position: relative;
    float: left;
    width: 372px;
    padding: 10px; 
    }
.thirdcol {
    margin-top: 10px;
    border: 2px dotted blue;
    margin-left: 0px;
    position: relative;
    float: right;
    width: 150px;
    padding: 10px;
    }

These styles work fine in both IE and Mozilla. Note the use of the "float" declarations used in each of the three DIV columns, and the "position: relative" declarations in the second and third DIV statements (to get IE to behave correctly). Edit the border properties in each to get rid of the blue-dotted effect, above, and tweak the margin and padding, as needed, to get the display of the three columns the way you want it, and you're good to go.

This type of structural markup makeover, substituting DIVs plus CSS for TABLE tags, should work at any Pika page that displays standard text or lists or form content, e.g., the Home Page, the Site Map, etc. For those pages displaying tabular data (http://markl.f2o.org/tutorial/tables/Advanced_Tables.html), e.g., case lists, search results, etc., you would still use semantically correct TABLE tags to maintain the "content" structure in the middle content area of the Pika default because that is exactly what tables are intended to do (http://www.456bereastreet.com/archive/200410/bring_on_the_tables/).

You can download here (http://www.openpika.org/uploads/no_tables_home_page.html) a copy of the modified home.html templated used in this article.

---

Related articles:

• Concordance: Home Page
• Home Page: Deconstruct
• Screenshot: Home Page