Article
Rock-solid CSS Layouts
Constructing the Layout
Now that we have some background knowledge of the ways in which elements behave when they're positioned using CSS, we can put our learning into practice with our first layout.
Create a new style sheet named styles.css and link it to the Footbag Freaks document we created earlier by adding the following markup to the head of the document:
Example 8.21. index.html (excerpt)
<head>
<title>Footbag Freaks</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
The first element to which we'll add CSS is the body element. The design has a background image that starts with a pattern but gradually blends into a deep blue. To create this effect on our page, we'll apply the image as a tiled background, and give the page a blue background color. This way, when the background image finishes, it seamlessly merges into the blue page background.
Download Footbag Freaks
The Footbag Freaks web site, including all images, is available for download as part of the code archive for this book.
Let's also set a font family and size, and set the margin and padding for the page (the space between the edge of the viewport and your content) to 0, using the markup below.
Example 8.22. styles.css
body {
margin: 0;
padding: 0;
background-color: #050845;
color: white;
background-image: url(img/bg.jpg);
background-repeat: repeat-x;
font: small Arial, Helvetica, Verdana, sans-serif;
}
Setting Freaks font-size
I've set the font-size on the body using the keyword small. As we create the rest of the style sheet, I'll use percentage font sizes to make the size of each element a percentage of small.
Now, your background image should tile across the width of the page, as shown in Figure 8.21.
Figure 8.21. The background image tiling across the width of the page
In our layout image, the content of the page is contained in an off-white box. To create this box, we need to add another div in which we can wrap the content. So, immediately after the opening <body> tag in your document, add the markup shown in bold below:
Example 8.23. index.html (excerpt)
<body>
<div id="wrapper">
<div id="header">
<p>The Home of the Hack</p>
Don't forget to close this div immediately before the document's closing </body> tag, like so:
Example 8.24. index.html (excerpt)
<p><a href="">more</a></p>
</div> <!-- main -->
</div> <!-- wrapper -->
</body>
Now, let's add to the style sheet the rules that will give the box an off-white background. We'll also insert rules that add a margin to the wrapper area, creating a space between the wrapper and the body element to let the background image show through:
Example 8.25. styles.css (excerpt)
#wrapper {
background-color: #fdf8f2;
color: black;
margin: 30px 40px 30px 40px;
}
Figure 8.22. The effect of the styled wrapper div
Figure 8.22 shows the results of our work. The margin has created a space that lets the background show through, but the content inside the wrapper bumps right up against the edge of the off-white area. We can create some extra space here by adding padding to the #wrapper rule, as shown in the markup below. The resulting display is shown in Figure 8.23.
Example 8.26. styles.css (excerpt)
#wrapper {
background-color: #fdf8f2;
color: black;
margin: 30px 40px 30px 40px;
padding: 10px;
}
Figure 8.23. Extra padding creating space between the box's edge and its content
The Header Area
Let's turn our attention to the header area of our layout, which contains the site logo and main navigation. You'll remember that when we created our HTML document, we didn't add any images: we were going to decide how best to include our images as we developed the layout. But now, let's add the logo image using the img element. We'll also include the site name as alt text for the image, so that users who are browsing the site with images turned off, and those with screen readers, can read the name of the site.
In your document, insert the image directly below the opening header div, like this:
Example 8.27. index.html (excerpt)
<body>
<div id="wrapper">
<div id="header">
<img src="img/logo.gif" alt="Footbag Freaks" height="77"
width="203" />
<p>The home of the hack</p>
<ul>
<li><a href="">Contact Us</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Privacy Policy</a></li>
<li><a href="">Sitemap</a></li>
</ul>
</div> <!-- header -->
If you view the page in a browser, you should see the image in the top, left corner of the off-white box.
The graphic for our page layout shows a thin, light-blue border that appears above and below the site's tagline and navigation. How will we create this effect? Let's contain the tagline and navigation in another div to which we can apply a top and bottom border. Add the div like so:
Example 8.28. index.html (excerpt)
<body>
<div id="wrapper">
<div id="header">
<img src="img/logo.gif" alt="Footbag Freaks" height="77"
width="203" />
<div id="header-bottom">
<p>The home of the hack</p>
<ul>
<li><a href="">Contact Us</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Privacy Policy</a></li>
<li><a href="">Sitemap</a></li>
</ul>
</div> <!-- header-bottom -->
</div> <!-- header -->
We can now address #header-bottom as we add the top and bottom borders:
Example 8.29. styles.css (excerpt)
#header-bottom {
border-top: 1px solid #b9d2e3;
border-bottom: 1px solid #b9d2e3;
}
To style the navigation list and tagline, we'll use some simple text formatting properties that should now be fairly familiar!
Example 8.30. styles.css (excerpt)
#header-bottom ul {
margin: 0;
padding: 0;
}
#header-bottom li {
display: inline;
}
#header-bottom a:link, #header-bottom a:visited {
text-decoration: none;
background-color: #fdf8f2;
color: #050845;
}
#tagline {
font-weight: bold;
background-color: #fdf8f2;
color: #050845;
font-style: italic;
}
We also need to add an id attribute to the paragraph that contains our tagline:
Example 8.31. index.html (excerpt)
<p id="tagline">The home of the hack</p>
Figure 8.24. Styling navigation list items with display: inline
We set the margin and padding on the list within this area to 0, then set the li element's display property to inline, which will cause the list items to display on the same line, rather than having each item display on a new line. Figure 8.24 shows this effect in action. We also styled the navigation links—again using the dark blue and removing the underlines from them—and the tagline, which we made bold, italic, and the same blue as our navigation items.
The problem with the display shown in Figure 8.24 is that it's difficult to distinguish the links in the navigation list from one another. The recommended solution to this problem is to add a visible character—such as the pipe character (|)—between each of the links, as I've done in the markup below (note that this recommendation was made as part of the Web Content Accessibility Guidelines (WCAG) 1.0. The checkpoint that covers this specific issue can be seen here):
Example 8.32. index.html (excerpt)
<ul>
<li><a href="">Contact Us</a> | </li>
<li><a href="">About Us</a> | </li>
<li><a href="">Privacy Policy</a> | </li>
<li><a href="">Sitemap</a></li>
</ul>
We can also set the color of the list items to dark blue (#050845), so that the pipe character that sits outside of the anchor element will be blue, too. Our refined header design is shown in Figure 8.25.
Example 8.33. styles.css (excerpt)
#header-bottom li {
display: inline;
background-color: #fdf8f2;
color: #050845;
}
Figure 8.25. After styling the text elements in the header area
The header is really starting to take shape now! Our next step is to move the tagline and navigation up onto the same line. To do this, we'll have to use a property that, while we haven't discussed it in detail yet, will become more important to us as we progress through these layouts. That property is float.
The float Property
float is one of the most interesting and often-used CSS properties. It takes a value of left, right, or none (though none, the default, is rarely used). float forces the element to which it's applied to display outside its natural position in the containing box; a float value of left or right pushes the element to the left or the right of its natural position, respectively. This property can be used within any block element.
The float property is designed to replace the align attribute that's associated with the HTML img element, and has, for all practical purposes, precisely the same effect. The align attribute is deprecated in favor of the float property in recent releases of HTML Recommendations from the W3C. The following HTML fragment uses the float property to produce the result shown in Figure 8.26:
<p><img src="logo.gif" alt="Footbag Freaks Logo"
width="203" height="77"
style="float: left; padding-right: 1em;" />The Footbag Freaks
logo appears to the left of this paragraph. Depending on
whether or not I use the CSS <code>float</code> property, I
may see more than one line of text beside the logo. The CSS
<code>float</code> property replaces the deprecated
<code>align</code> attribute of the HTML <code>img</code>
element and has an identical effect.</p>
Figure 8.26. Achieving image-text alignment using the CSS float property
The float property has one major advantage over the align attribute: float can be applied to elements other than images, whereas application of the old align attribute was limited to img, applet, and object elements.
No Dimensions? Declare a width
When using the float property on elements that don't have well-defined dimensions, you must include a width declaration in your CSS. An img is an example of an element with well-defined dimensions, whereas a paragraph, a heading, or a div doesn't.
Using float in our Header
We'll be exploring the float property in more detail in the next chapter, when we create a layout that relies on float for the positioning of the page's main sections. However, at this point we can use our knowledge of float to align the tagline and navigation correctly. The element that we're going to float is the tagline paragraph, so add the rules marked in bold below to your tagline rule:
Example 8.34. styles.css (excerpt)
#tagline {
font-weight: bold;
background-color: #fdf8f2;
color: #050845;
font-style: italic;
margin: 0;
padding: 0 0 0 20px;
width: 300px;
float: left;
}
We set float to 0 so that the paragraph's default margin is removed. We then add 20 pixels of left padding to move the tagline in from the left-hand side, and give it a width of 300 pixels to provide a bit of space to its right, as is indicated in the page's original layout graphic. We then set the value of float to left, so it sits to the left of the rest of the content, which in this case, is our navigation list.
After making this change to the rules for the tagline paragraph, save your style sheet and view your page in a browser. You should see the navigation display alongside the tagline. These elements behave in exactly the same way as the paragraph that wraps around the image in the example we discussed above. All we need to do now is to align the list of navigation items to the right, and alter the padding on the list to move it in slightly from the right-hand edge. Here's the markup you'll need; the resulting display is depicted in Figure 8.27.
Example 8.35. styles.css (excerpt)
#header-bottom ul {
margin: 0;
padding: 0 30px 0 0;
text-align: right;
}
Figure 8.27. The display after floating the tagline and aligning the navigation
The final task that will complete the heading is to add the little footbag image that displays to the right of the navigation in our layout image. First, add the actual image to your document, beneath the navigation list. In the markup below, I gave this image an empty alt attribute, so that nothing about this image would be read out by a screen reader—this image is included for display purposes only. I've also given the image an id of ball.
Example 8.36. index.html (excerpt)
<div id="header">
<img src="img/logo.gif" alt="Footbag Freaks" height="77"
width="203" />
<div id="header-bottom">
<p id="tagline">The home of the hack</p>
<ul>
<li><a href="">Contact Us</a> | </li>
<li><a href="">About Us</a> | </li>
<li><a href="">Privacy Policy</a> | </li>
<li><a href="">Sitemap</a></li>
</ul>
<img src="img/header-ball.gif" height="24" width="20" alt=""
id="ball" />
</div> <!-- header-bottom -->
</div> <!-- header -->
Now, let's use our first bit of absolute positioning in the CSS to get the image to line up properly. We know the location at which the image should be positioned relative to the top and right-hand sides of the document, as we know the height of the logo and width of the margin on the wrapper div. The following CSS will place the ball in the correct position at the end of the navigation:
#ball {
position: absolute;
top: 110px;
right: 55px;
}
The header section is now complete! It's displayed in Figure 8.28.
Figure 8.28. The completed header section of the layout