Menus and Grids

Experiments with Fractals

Author's remarks. This is an improved version of the original article. CSS and markup instructions have been modified to make the iterated patterns more flexible and applicable to a variety of scenarios that might involve links, text, images or combination of these. Additional reference material has also been added. The essence of our previous thesis remains the same.

Introduction

The traditional way of rendering horizontal menus and grids in Web pages is with HTML tables or by styling block level elements like dl, ol, or ul with Cascading Style Sheets (CSS). The later involves CSS workarounds for handling positioning issues in order to force these elements to behave for a purpose for which these were not created. One can do better by implementing the CSS Table Model. However, this model is not supported by all browsers.

To complicate matters further, not all versions of a given browser support specific CSS properties. For instance, unlike the display:block property, the display:inline-block property is not equally supported across browsers. The Quirksmode.org site provides a comparative of these two properties across several browsers. It turns out that display:block is more universally adopted. An animated discussion on browser incompatibilities when it comes to the design of grid-like layouts can be found at this Mozilla blog. A Wikipedia entry has an interesting article on CSS tableless Web design, but unfortunately goes to the extreme of including the following statement:

"Using divisions to simulate a table for the display of tabular data is as
much a design flaw as using tables to control graphic and page layout.".

We ask Wikipedia editors:

According to whom? Since when reaching a given rendering with different design strategies is considered a 'design flaw'? Unfortunately this Wikipedia entry is a half-true statement which fuels the perception that this electronic media outlet allows biased opinions from individuals or interest groups disguised as reputable editors.

While we agree that the use of tables is appropriate for presenting tabular data - something that we promoted years ago in The Keyword Density of Non-Sense article - we challenge the characterization of emulating tables with divisions as a 'design flaw'. Our position on this matter in any way implies an "unconditional repudiation of all tables in Web design", a biased inference echoed by Wikipedia editors. We stand by the fact that there is more than one way of generating grid-like design patterns. Web developers (and editors) just need to open their mind and think out-of-the-box to the different possibilities that Design Engineering and CSS has to offer.

A Fractal Approach

An alternative to the rendering of grid-like patterns consists in designing Web page layouts using a row primary technique and recursion (1 - 5). However, not all Web designers are familiar with recursive patterns or are attracted to anything that sounds like Mathematics. Moreover, coding iterated layouts by hand can be a formidable task, particularly when highly nested block-level elements need to be used. Automating recursion eliminates this drawback and provides a 'black box' solution.

We have developed an experimental tool that does this, precisely (3). Since search engines and screen readers process documents using a row primary approach, the final layout should be compatible with these and similar information retrieval technologies.

The examples you are about to see have been tested with the latest versions of Internet Explorer 8 and Firefox browsers and should work with browsers that support the CSS Model. Since few iterations are used, the markup can be coded by hand.

Updates

4-17-2010 - We have improved the iterated layout discussed in this document so that when a user using Windows IE 8 goes to Tools > Compatibility View, the iterated layout is rendered as expected for IE 7. Microsoft has a great resource that discusses Windows Compatibility Modes.

3-23-2010 - We have succesfully tested the examples with the Opera and Safari (for Windows) browsers. We have also re-declared in pixel units the minimum border and padding values of 0.0625em as 1px. This insures a uniform rendering of these properties across these and future browsers that we might be running tests on. For those that still prefer a non-iterative approach, here is a fractaless approach.

Procedure

We first define the initial layout (motif) to be iterated as two divisions, floated to the left and resembling two 'cells'. These have been color-coded to help you visualize the recursive process. An additional empty division named "breaker" is added. The "breaker" insures that floated divisions will remain in place if a user resizes the browser window. For backward compatibility with IE7, a wrapper division is added to keep divisions in place. The motif is then placed within a row division, like this:

<div class="row">

<div class="wrapper0">
<div class="silver cell"><a href="#">item1</a></div>
<div class="gray cell"><a href="#">item2</a></div>
<div class="breaker"></div>
</div>

</div>

which is rendered as follows:

Next, we paste the markup of the motif back on each cell, like this:

<div class="row">

<div class="wrapper0">
<div class="silver cell">
<div class="wrapper0">
<div class="silver cell"><a href="#">item1</a></div>
<div class="gray cell"><a href="#">item2</a></div>
<div class="breaker"></div>
</div>
</div>
<div class="gray cell">
<div class="wrapper0">
<div class="silver cell"><a href="#">item3</a></div>
<div class="gray cell"><a href="#">item4</a></div>
<div class="breaker"></div>
</div>
</div>
<div class="breaker"></div>
</div>

</div>

The new pattern resembles a centered horizontal menu. We are done!

To resemble a centered grid, we simply repeat this layout pattern several times. It cannot get any easier than this.

CSS Instructions

The CSS Instructions for the above examples are given below. Since these are recursively applied to the final pattern, this is a minimalistic approach.

html,body{font-size:100%;height:100%;margin:0em;padding:0em;}
div.row{margin:0 auto;margin-bottom:1px;width:50%;clear:both;
overflow:hidden;text-align:center;border:1px solid #000;}
div.row a,div.row span{margin:1px;padding:0.25em;display:block;
overflow:hidden;border:1px solid #000;width:auto;}
div.row a{color:#00c;}
div.row span{color:#333;}
div.cell{float:left;width:50%;}
div.row img{width:100%;}
div.breaker{clear:both;}

/*To remove background colors and hover effects, delete or comment next lines*/

div.row{background:#fff;}
div.row div.cell a:hover{background:#fcc;color:#f30;border:1px solid #f30;}
div.silver a,div.silver span,div.silver div.silver a,div.silver div.silver span,
div.gray div.silver a,div.gray div.silver span{background:#c0c0c0;}
div.gray a,div.gray span,div.silver div.gray a,div.silver div.gray span,
div.gray div.gray a,div.gray div.gray span{background:#808080;}

/*For backward compatibility with IE 7 (Tools > Compatibility View), we 
added a wrapper0 division to the HTML markup and the following lines:*/

div.wrapper0{padding:1px;}
div.silver div.wrapper0,div.gray div.wrapper0{padding:0px;}

Discussion

The row division is centered with margin:0 auto. Its width is set to 50% the width of its immediate container. By an 'immediate container' we mean an additional block-level element holding this row division. If no immediate container is used, the width of the row becomes 50% the width of the browser window. Additionally, the width of each cell is 50% the width of the row. Thus when we iterate the markup, the width of the new four cells is 50% of 50% or 25% the width of the row.

In the div.row class, the clear:both property insures that all cells will be displayed on the same line. Overflow:hidden insures that the pattern will not be oveflown by content. Subsequent border, margin, and padding properties, as the hover effects, are optional.

You might have noticed that we declared display:block and style rules for a span element. This element is used to hold and properly render non-link items like plain text and images. To insure that all images are of same width, we have declared a div.row img{width:100%;} rule. An example is given below. Note that the positional issues ascribed to variable amount of content and discussed at the above Mozilla blog are resolved. Again, a fractaless approach can also be used to reproduce this grid pattern.

If you plan to only include links in the pattern, the span element and its style rules can be removed. In addition if you don't plan to use background colors or hover effects, simply delete or comment the rules indicated in the style instructions. If you just want to monocolor the entire pattern, keep the div.row{background:#fff;} rule and change its current background color (#fff) to a different color.

Finally, if you plan to use these recursive patterns, don't forget to replace the hash (#) in <a href="#"... with your own urls. You would also need to include the proper DOCTYPE and charset information in your HTML markup. To learn how to do this, feel free to see the source of this document. This might also help you to grasp the logic behind the nesting of the above division elements.

Final Remarks

Fractal theory provides a practical solution to the design of menu and grid-like patterns. Since in our row primary approach the only block-level elements used are divisions, positioning issues and CSS workarounds associated with the use of ol, ul, li, and dl elements are avoided altogether.

References

1. Garcia, E. (2009). Fractal CSS Design
2. Garcia, E. (2010). Fractal CSS Design as a Row Primary Technique
3. Garcia, E. (2010). Fractal Movies, CSS-only Backgrounds, and Two-Column Layouts
4. Garcia, E. (2010). Fractal Art and Three-Column Iterated Layouts. To be published.
5. Garcia, E. (2010). Classic Fractals from Row Primary Layouts. To be published.