Fractaless Menus and Grids

Experiments with Fractals

Introduction

In a recent article, we presented a fractal approach to the design of menus and grids. It was demonstrated that:

• these patterns can be emulated with CSS and division-based iterated layouts.
• positioning issues associated with the use of list elements (ul, ol, etc) and mentioned at this Mozilla blog are avoided altogether.

Almost immediately some asked if we could achieve same results using a fractaless approach, and if so, what are the pros and cons of using one approach over the other. The purpose of this article is to address these questions.

A Fractaless Approach

In a nutshell, indeed: the above design patterns can be emulated without having to use recursion. We just need to use the correct design strategy.

In the mentioned article we identified a valid strategy: the use of floated division elements and the humble, universally adopted, display:block property. This strategy is also used here. When used with inline-elements, the display:block property adds a stylable box, effectively making these to behave as localized block-level elements. For instance, when applied to an anchor or span element, this property makes an element to fill completely its immediate container. The anchor or span element can now be used as wrappers and styled, accordingly.

The examples you are about to see have been tested with the latest versions of Internet Explorer, Firefox, Opera, and Safari (for Windows) and should work with browsers that support the CSS Model. Our design strategy is compatible with the way search engines and screen readers process document content.

Procedure

To construct a 4-link navigation menu, we place each link in different divisions. An additional empty division is declared to serve as a breaker. More on this, later. These are then wrapped with a row division, like this:

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

which is rendered as follows:

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

CSS Instructions

The CSS Instructions for the above examples are given below.

html,body{font-size:100%;height:100%;margin:0em;padding:0em;}
div.row{margin:0 auto;margin-bottom:1px;padding: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;}
div.row a{color:#00c;}
div.row span{color:#333;}
div.cell{float:left;width:25%;}
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;}
.silver{background:#c0c0c0;}
.gray{background:#808080;}
div.row div.cell a:hover{background:#fcc;color:#f30;border:1px solid #f30;}

Discussion

The row division is centered with margin:0 auto. In this example, its width has been 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.

The row division contains four left-floated divisions. Their widths are computed by dividing the width of the row times the number of divisions to be wrapped. In this case this exercise gives 100%/4 = 25%. The breaker division insures that all floated divisions will remain in place when the user resizes the browser.

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.

Span elements are used to hold 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 easily resolved.

As mentioned in our previous article, if you plan to include only 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.

Again as mentioned in our previous article, 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.

Pros and Cons

To fractal or not to fractal. That is the question. The above approach uses a clean, easy to follow markup. Unlike iterated fractal layouts, it is easy to update; its CSS instructions are also simpler, particularly when it comes to styling cell backgrounds. The resultant layout pattern is also backward compatible with IE 7 browsers. However, the approach has some drawbacks.

First, a fractaless approach is not recommended for building highly complex layouts or CSS-only backgrounds. Both approaches use W3C-valid CSS rules.

We have found that with the fractaless approach in Opera and Safari browsers, the patterns include an extra space to the right of the left-most floated division. This finding is consistent with the sub-pixel problems in CSS documented by John Resig (1) and previously revisited by us (2). This glitch is less evident with the fractal approach since recursion re-encapsulates the divisions, as can be seen from the following screenshots.

Final Remarks

Fortunately, the extra space gitch observed with the Opera and Safari browsers is not evident with Internet Explorer and Mozilla. If you are happy 'living' with or masking the extra space, the fractaless approach might sweet you design requirements.

References

1. Resig, J. (2008). Sub-Pixel Problems in CSS
2. Garcia, E. (2010). Fractal Movies, CSS-only Backgrounds, and Two-Column Layouts