Web Systems Design and Online Consumer Behavior [Electronic resources] نسخه متنی

Hedges: Background images blend seamlessly with a variable foreground

Kevin Mears, Designer

www.csszengarden.com/031

[View full size image]

GARDEN THEMES have been popular for many Zen Garden designs, but designer and illustrator Kevin Mears came up with a bit of a twist. Instead of making use of photographic floral detail, his notebook sketches lent themselves to a distinct cartoon like style.

Starting with the gardener himself (complete with a wheelbarrow), Mears's illustration grew into a lively, jolly garden of bright colors and isometric hedges.

The illustration used in Hedges obviously demands plenty of imagery. The individual images it uses are displayed on the opposite page (FIGURE 1).

Setting Boundaries

Before these images are added to the design, there are a few basic parameters that need to be set. Mears's layout is technically a fixed-width layout although the header image tiles horizontally to fill the entire window. The central part is constrained within a 732-pixel-wide area. The #container box serves as a wrapper for all other elements on the page, so these constraints are applied to it:

body {
margin: 0;
padding: 0;
color: #888;
 text-align: center;                                 
}
#container {
position: relative;
padding: 0;
 width: 732px;
margin: 0 auto;
text-align: left;                                   
}

The #container box has been limited to 732px, and the margin declaration centers it horizontally by allowing the auto value to take whatever horizontal space is available, minus the width of #container. Since the body element has a text-align value of center, setting the #container element back to left alignment overrides that rule, providing the desired results. Internet Explorer for Windows 5.0 and 5.5 don't understand the margin value that has been applied, so this is a simple workaround to make sure that #container is centered. After adding in the styling for the link colors, we should see what's in FIGURE 2.

Building Columns

The next step is hiding the assorted headers so that they don't get in the way as the columnar layout is built:

h1 span, h2 span, h3 span, #quickSummary p.p span {
display: none;
}

The main content area has been defined, so on to the three columns that sit within it. The Zen Garden markup provides a challenge for Mears's layout: The main column consists of #preamble and #supportingText, but there isn't a single element surrounding each that we can style. So both #preamble and #supportingText will have to be styled separately, in order to combine them into one visually unified column:

#preamble {
position: relative;
left: 195px;
padding-bottom: 0px;
width: 400px;
}
#supportingText {
position: relative;
left: 195px;
padding-bottom: 0px;
border-bottom: 2px solid #363;
width: 400px;
}

Each has been given a width of 400 pixels, and through relative positioning they have been offset from the left by 195 pixels to form the central column. A margin-left value could have been applied for the same effect, but the original CSS file does it this way. Now the design looks like FIGURE 3.

The next step is to move the sidebar content into the proper area. The link list on the left-hand side is currently way down at the bottom of the page, so absolute positioning is used to move it back up to the top:

#linkList {
position: absolute;
top: 200px;
left: 0;
width: 190px;
}
#quickSummary p.p1 {
position: absolute;
top: 12em;
right: 15px;
width: 120px;
margin: 75px 0 0 580px;
font-size: 80%;
text-align: right;
}
#quickSummary p.p2 {
position: absolute;
top: 25em;
right: 15px;
width: 120px;
margin: 0;
font-size: 93%;
text-align: center;
padding-bottom: 90px;
background: url("barrow.gif") no-repeat bottom;
}

There's a lot going on here. The #linkList box has been assigned a width and moved back up to the top and attached to the left side of #container. Both paragraphs within #quickSummary have been positioned to the right edge of #container in the same way (as a further improvement, the parent of each, #quickSummary, could have instead been positioned to cut down on the redundant style). At this point the design appears as shown in FIGURE 4.

Image Tricks

Now that the shell of the layout is forming, let's examine how the more obvious graphical areas are constructed, starting with the header. It consists of a repeating line of trees in the background, and an illustrated title header overlaying it. The easy part is adding the repeating background image:

body {
margin: 0;
padding: 0;
 background: #FFF url("bg_tree.gif") repeat-x left top;                   
color: #888;
text-align: left;
}

A background image and color have been added to the style rule that already existed for the body element. By adding the repeat-x value to the background declaration, the image will repeat horizontally only, which is exactly what we want.

The page's main h1 header gets the other, non-repeating header image to, which will ultimately rest on top of the body background previously added. Remember that display: none; has already been set for every span within header elements throughout the page, so the text is already hidden to make way for the background image about to be added; the H1 just needs the proper dimensions:

#pageHeader h1 {
height: 200px;
background: url("nutitle.gif") no-repeat;
padding: 0;
}

Since the image requires a large horizontal area, the h1 is allowed to expand widthwise and fill the entire container (that's the #container element previously set to be 732px); the height just needs to be adjusted. Notice how the top of the central column also bumps down; because the H1 appears before it in the markup, the newly added height value influences the position of elements below it. The two flanking columns aren't affected, because they're absolutely positioned, and removed from the regular document flow. These two small changes have made a big difference in the design (FIGURE 5).

Due to the fixed nature of the body background and the variable nature of the header's position, there's no way to determine in advance whether imagery in the header (the figure with outstretched arms, for example) will overlap trees or sky. You can see this effect by resizing your browser window and watching as the position of the figure changes in relation to the body background. But the header image has been saved with a transparent top half, so it blends seamlessly into the body background image. No matter what size a user's browser window is, the two images fit together and make sense (FIGURE 6).

Formatting

Because the finished design continues making use of the browser's default font, there are only a few small tweaks to make, starting with the central column:

#supportingText p {
line-height: 1.5em;
}
#preamble p {
width: 350px;
}
#footer {
background: #D9D98B;
color: #fff;
padding: 10px 20px;
border-top: 1px solid #363;
font: 85% Verdana,Arial,Sans-serif;
text-align: center;
}
#footer a:link, #footer a:visited {
padding: 0 5px;
font-weight: normal;
}

The first rule airs out the space between lines of text, thanks to the line-height property. Next, the #preamble block has been constrained with a width value of 350px, presumably to add a slight gap between it and the right column.

Tip

Unlike every other CSS property, line-height doesn't require a unitline-height: 1.5; would have worked equally well and resulted in exactly the same spacing between lines as 1.5em.

The page's footer requires more formatting. Earlier, #supportingText was assigned a green bottom border, which sits just underneath the footer; now that has been built on by the addition of a background color value, and a border-top value applied to #footer itself. The design should now appear as FIGURE 7.

Finishing Up

Don't forget, though, something has to be done about the hidden headers:

#supportingText h3 {
height: 70px;
}
#explanation h3 {
background-image: url("what.gif");
background-repeat: no-repeat;
}
#linkList h3 {
height: 41px;
}
#lselect h3 {
background-image: url("select.gif");
}

Though we have omitted most of the individual header styles from this listing, it should hold no surprises. A consistent height for all H3 elements within the two sections is first specified, and then each header is filled with a backgroundimage which completes the design.