Mnemonic: Designer tricks for liquid layouts and enhanced effects


Dave Shea, Designer

www.csszengarden.com/025

THE TEXTURE OF mnemonic by designer Dave Shea flows from organic shapes intermingling with strong lines and geometric shapes. Wispy tendrils overlay bold horizontal stripes in the header, and the harsh color scheme sets this design apart.

Shea aimed to create something entirely new with this design. The result is a unique layout, one that may not have an intrinsic beautybut through its visual consistency and sharp attention to detail, the result is an original, well-formed concept.

The goal of originality drove many decisions during the design phase, as well as during coding. We'd encourage you to view the fully commented final CSS file, available at CSS Zen Garden (www.csszengarden.com/025/025-comments.css). The individual images used in mnemonic are displayed in FIGURE 1 on the next page.

Figure 1. All the images used in mnemonic.


Problem Solving

After the basic initial styling had been established (not shown in the code below, but demonstrated in FIGURE 2) the first problem presented itself. Two yellow body background images were needed for mnemonic, one tiling vertically that would overlap a second tiling horizontally.

Figure 2. Basic initial styling, including link colors and font selection.


 body {  font-size: small;  font-family: arial, sans-serif;  background: #B0A40B url(bg-1.gif) top left repeat-x;  margin: 0px;  padding: 0px; } 

But the horizontal background image was applied to body (FIGURE 3), and CSS offers no ability to apply more than one background image to a single element. The only choice available was to use two elements. Fortunately, #container rests just inside body and surrounds the rest of the markup, so it provided a hook for the second image:

Figure 3. The first background image applied to body.


 #container {  background: transparent url(bg-2.gif) top right repeat-y; } 

That did the trick. Since the bulk of the imagery in this design occurs in the header, the next challenge was integrating each image into an expandable strip across the top of the page and keeping everything visually coherent.

Building Imagery

If you view the final design, you'll notice there are many individual visual elements. Should each be layered one on top of the other using absolute positioning? Or should the whole thing just be saved as one large image?

The solution lies somewhere between those two extremes. Picking and choosing which elements to combine into a single JPG and which to save separately into their own individual GIF files, for example, ends up being a choice for the designer based on personal preference and what sorts of limitations there are within the markup. There is no "right" answer, and two designers might come up with very different solutions to this dilemma.

The Zen Garden's HTML is unchangeable, so the final choice for mnemonic was to hook into the two headers within #pageHeader, and perhaps use that particular div itself. These three elements limit options to three imagesthe left half of the design was saved in one image (minus the white top-left corner graphic), the right half was saved in another separate image, and a third, narrow GIF was chosen to repeat horizontally behind each side.

What's not immediately obvious is how imagery like this could potentially expand in a flexible layout; the fixed dimensions suggest that it would be better suited to a fixed-width layout. However, there is a break in between the two distinct sides of the header, where a small gap of uniform stripes could potentially allow expansion (FIGURE 4). This is by design, since Shea had predetermined that this would be a liquid layout.

Figure 4. The header imagery components of mnemonic.


The imagery is established; let's look at combining it. The repeating header image needs to be placed behind everything else (FIGURE 5):

Figure 5. The repeating header image is applied first.


 #pageHeader {  height: 171px;  padding: 0px;  background: transparent url(bg-4.gif) top left repeat-x; } 

Tip

A certain amount of forward thinking has to occur during the initial design process to account for scenarios like this. If the layout concerns are considered for the first time during the CSS coding stage, it might have to change radically to become resizable.


The predetermined HTML elements of the Zen Garden limit choices, but enough is available to work with if some image-based elements are combined. Since the text of the h1 and H2 elements within #pageHeader are displayed together in a single image (the right-hand side of the header), only one of the two headers needs to be styled in order to have all of the header text show up. That leaves the other header element free for further image replacement, and so the image on the left was applied to it (FIGURES 6 and 7):

Figure 6. A free element the second header image may be applied to ....


Figure 7. ... if both text elements are placed in a single image.


 #pageHeader h1 {  padding: 0px;  margin: 0px;  float: left;  width: 396px;  height: 171px;  background: transparent url(cr-tl.jpg) top right no-repeat; } #pageHeader h1 span {  display: none; } 

After the left section of the header is built, the header text goes in the image on the right, which is simply applied to the free h2 element:

 #pageHeader h2 {  padding: 0px;  margin: 0px;  position: absolute;  top: 0px;  right: 0px;  width: 350px;  height: 171px;  background: transparent url(cr-tr.gif) top right no-repeat; } #pageHeader h2 span {  display: none; } 

Moving Forward

We're now going to skip over much of the layout-construction process in order to focus on some advanced effects built into mnemonic. If you look at this design's CSS, you'll note that near the end of the file a spot is marked as the beginning of the advanced effects. If you were to trim out all the CSS after this point, you would end up with something like what's shown in FIGURE 8. In fact, if you're viewing the completed version of this design in Internet Explorer, Figure 8 should be identical to what you see in your browser. If you're viewing in a browser like Firefox or Safari, you'll see something like FIGURE 9.

Figure 8. The completed mnemonic, sans special effects. Or, the final version as viewed in Microsoft Internet Explorer.


Figure 9. The completed mnemonic, with special effects.


The Nature of the Problem

There are ways to select many unique elements on a page that haven't been assigned a specific class or id by using the selectors available in CSS2, but for the fact that some browsers don't support them. Shea used these selectors to his advantage, but there's a single problem across all enhanced areas that has a much easier solution. The issue is that he didn't have enough ability to select individual elements; the solution is simply more markup.

When writing markup, it's important to balance lightness of code with the ability to select elements later. The Zen Garden was built to provide maximum selection flexibility, but in hindsight it's clear that in some cases the markup isn't quite flexible enough. In most projects, HTML and CSS are constructed simultaneously, and you will have more control over the final outcome.

Design List

In Internet Explorer the design list is a straight vertical list (FIGURE 10), whereas in Firefox or Opera it is instead a pair of columns that follow the slight slant of the left edge of the list background (FIGURE 11). To accomplish this second layout, each individual list item needs to be selected and then positioned equally. The method of selecting each involves an increasing tangle of child and adjacent selectors, both of which are CSS2, and both of which are unrecognized by Internet Explorer for Windows:

Figure 10. The design list as seen in Internet Explorer for Windows.


Figure 11. The design list as seen in browsers like Safari and Firefox.


 #lselect ul>li {  position: relative; left: -14px; } #lselect ul>li+li {  position: relative; left: -12px; } #lselect ul>li+li+li {  position: relative; left: -10px; } ... 

Note

The ellipses (...) in the code listing indicates that the code continues.


The first selector basically selects any li element that is a child of the ul within #lselect, all eight of them in this case. The second selector is the same, with the additional provision that the li in question must have at least one more before itthis selects all li elements but the first. The third does the same, requiring two preceding li elements instead, the fourth requires three, and so on. By building a cascading list of rules with each overriding the previous one, eventually each one of the eight links is positioned individually. This is an overblown solution to a simple problemin most cases you will have the ability to influence markup and just add the extra classes to avoid these hideously large CSS constructs, and we'd well recommend doing so.

Previous/next Links

The final piece of this puzzle is replacing the dull links underneath the design list with more-stylized image-based equivalents (FIGURES 12 and 13). Once again the challenge lies within the selection ability and the lack of unique classes. The usable selectors within CSS2 don't end with child and adjacent; there are others to choose from. Attribute selectors make sense here, as they allow selection of specific elements based on a uniquely identifying characteristic. Each link has been assigned a different HTML Accesskey:

Figure 12. "Next designs" and "View All Designs" links, as seen in Internet Explorer for Windows.


Figure 13. 'Prior', 'Next', and 'View All' links as seen in browsers like Safari and Firefox.


 <a href="http://www.mezzoblue.com/zengarden/alldesigns/" title="View every submission to the Zen Garden. AccessKey: w" accesskey="w"> 

This uniqueness is ideal for attribute selectors. Here is how they hook into it:

 #larchives ul>li+li a[accesskey="w"] {                     display: block;  width: 35px;  height: 0;  overflow: hidden;  padding-top: 18px;  background: transparent url(archive-b3a.gif) top left no-repeat;  position: absolute;  top: 16px;  left: 170px;  color: #958500; } 

As its name suggests, an attribute selector allows you to select an element if the value of the named attribute matches the value you have supplied. The relevant portion of the selector has been highlighted in the previous listing, and since the a element in question does indeed have an accesskey attribute with a value of w, the match is made and the style rule gets applied.

If you've been keeping notes, you might be wondering why the complicated child selectors were used earlier for the design list, when those also have Accesskeys. If so, pat yourself on the backit would have made more sense to do it that way, in hindsight.

Making the Right Choice

The theme of mnemonic has been choice. Shea could have chosen to split up the header image differently in Photoshop, or he may have found a completely different way to select the links within the design list. Either way, being aware of the choices available will assist you in making the right decisions.



    The Zen of CSS Design(c) Visual Enlightenment for the Web
    The Zen of CSS Design(c) Visual Enlightenment for the Web
    ISBN: N/A
    EAN: N/A
    Year: 2005
    Pages: 117

    flylib.com © 2008-2017.
    If you may any questions please contact us: flylib@qtcs.net