The Zen of CSS Design [Electronic resources] : Visual Enlightenment for the Web نسخه متنی

South of the Border: Corralling content with margins and positioning

Rob Shields, Designer

www.csszengarden.com/093

[View full size image]

A LARGE DOSE OF CAFFEINE is just the thing to get the creative juices flowing. In this case, Rob Shields''s ideas were fueled by hot tea. Whatever was in his brew, it stimulated 50 initial ideaseach a series of keywords to help him define the site''s overall theme.

Shields finally settled on his third idea, which was a Southwestern theme. Instead of limiting his image selections, he chose any he thought would be useful and fired up Adobe Photoshop to work with the images until he found a composition that he liked (FIGURE 1). With a bit more refinement in Photoshop, Shields went on to code the CSS that finalized the strongly themed South of the Border.

Beginning Basic

One interesting aspect of Shields''s design is its color scheme, which was inspired by a brown suit with blue pinstripes. He set the stage for his design with a light blue background in the body, light brown and darker blue for links, and white primary text that will later appear against a darker blue background:

body {
font: 83%/150%;
color: #fff;
background: #EDEDED url(background.gif) repeat-y fixed bottom
center;
margin: 0px;
padding: 0px;
}

Shields specifically chose to use percentages for his fonts, ensuring that they would scale. You can see the font treatments and backgrounds on the next page.

Styling the Container

With the basics covered (you can see the CSS we skipped over by viewing the complete CSS for the design online), the #container div is next up for styling. Included in this declaration are the styles for the container''s background image, its margins, and width:

#container {
position: relative;
background: url(bg-central.gif) repeat top left;
margin: 0px auto 0px auto;
width: 655px;
}

Of course, the #container element''s position is set to relative, and because top and left properties are not defined, the #container div remains in the normal flow. Many newcomers to CSS design are easily fooled by the term relative, believing it to mean that a relatively positioned element is one that is positioned in relation to another element. This is a completely reasonable interpretation of the word, but it''s incorrect.

NoteNormal flow is the term used to describe the way a browser normally interprets elements that aren''t positioned. If you remove all the styles from any of the CSS Zen Garden designs, you''ll see that all text and headers flow from left to right, top to bottom, adjusting the flow to accommodate different screen resolutions or browser resizing.

Relative positioning helps a designer position an element without taking it out of the normal flow. This is very distinct from what a browser will do with elements using other positioning types, such as absolute. You''ll see the difference very clearly in just a bit.

For now, the goal is to create a container that visually holds the other elements within it. When we add the #container styles (available in the original CSS file), elements within it are now ready for additional styling (FIGURE 2).

Reining In the Text

Of course, now the primary text, while contained within the #container element, must be pulled away from the sides of it. This is achieved by setting margins for each of the various div elements within the #container:

#intro {
margin:0px;
}
#quickSummary, #preamble {
margin: 0px 200px 0px 68px;
}
#pageHeader {
margin: 0px;
}
#supportingText {
margin:0px 200px 0px 68px;
}

These margins pull the text into position (FIGURE 3).

Head ''em Up

Adding the graphic headersespecially the #pageHeader h1and bringing them into balance with the text helps further define the overall look:

#pageHeader h1 {
margin: 0px 0px 0px 0px;
background: transparent url(top.gif) no-repeat top left;
width: 655px;
height: 206px;
}

FIGURE 4 shows how the #pageHeader h1 style brings in the thematic imagery.

A few noteworthy header examples extracted from the main CSS will help demonstrate how the headers are styled with margins, background images, and widths and heights to effectively contain the associated imagery and text:

#preamble h3 {
background: transparent url(ch1.gif) no-repeat top left;
margin: 10px 0px 5px 0px;
width: 388px;
height: 44px;
}
#benefits h3 {
background: transparent url(ch4.gif) no-repeat top left;
margin: 10px 0px 5px 0px;
width: 388px;
height: 44px;
}
#requirements h3 {
background: transparent url(ch5.gif) no-repeat top left;
margin: 10px 0px 5px 0px;
width: 388px;
height: 44px;
}

The headers are now nicely in sync with the rest of the design (FIGURE 5).

At this point, we also see the appearance of the blue border styles:

#benefits {
border-bottom: 1px dashed #8095AF;
}
#preamble {
border-bottom: 1px dashed #8095AF;
}

The borders add a dash of visual contrast, and act as separators for the text sections (FIGURE 6).

Now for the Footer

While the central portion of the design has progressed nicely so far, the footer needs to be pulled into place. The contents are simple: just the validation links, and a background image containing the cow''s skull and more decorative flourishes:

#footer {
text-align: center;
background: transparent url(bottom.gif) no-repeat top left;
height: 37px;
margin: 0px -200px 0px -68px;
padding-top: 88px;
}
#footer a:link, #footer a:visited {
margin-right: 20px;
}

Notice the use of negative margins to the right and left, which help to hold the footer effectively within its containing element (FIGURE 7).

Absolute Containment

Remember how the #container div is relatively positioned? Well, the link list is absolutely positioned within the relatively positioned div:

#linkList {
position: absolute;
top: 207px;
right: 6px;
width: 181px;
}

This brings the list of links up to sit alongside the primary text. Unlike relative positioning, absolute positioning places the element in relation to its containing element. If there is no parent element, the position will be in relation to the root element, .

One way to envision the issue is to remove the relative positioning from the #container div (FIGURE 8).

#linkList ul {
margin: 0px;
padding: 0px;
}

#linkList li {
list-style-type: none;
background: transparent url(li-bg.gif) repeat top center;
padding:8px 6px 8px 6px;
margin:0px;
border-top: 1px solid #5D4831;
border-bottom: 1px solid #221609;
display: block;
}