Rock-solid CSS Layouts

The Sidebar

Figure 8.33. The unstyled sidebar

The content of the sidebar is languishing beneath the main content area, as Figure 8.33 illustrates. No rules have been applied to it, so it's just sitting in its natural location in the document.

Our first job is to move the sidebar from this position to the space we've created for it on the right of the content area.

First, let's see what happens if we position the sidebar using absolute positioning from the top and right. Add the following rules to your style sheet:

Example 8.59. styles.css (excerpt)      
     
#sidebar {      
 position: absolute;      
 top: 0;      
 right: 0;      
 width: 220px;      
 background-color: #256290;      
 color: white;      
 margin: 0;      
 padding: 0;      
}

View your page in the browser. The sidebar is stuck to the top, right corner of the viewport as in Figure 8.34.

Figure 8.34. Positioning the sidebar top and right

When we discussed absolute and relative positioning earlier, I explained that an element is always positioned relative to its parent element's position, and that this concept was described as an element's positioning context. In this case, #sidebar doesn't have a positioned parent element, so it takes the viewport as its positioning context.

However, we do have an element that can be positioned to provide us with a useful positioning context—the div with id="main".

Find #main in your style sheet and add the following declarations:

Example 8.60. styles.css (excerpt)      
     
#main {      
 position: relative;      
 top:0;      
 left:  0;      
 width: 100%;      
 margin-top: 10px;      
}

The sidebar now takes #main as its parent, so it falls into place within the area defined by the div with that id, as Figure 8.35 illustrates.

Figure 8.35. Positioning the sidebar to the top and right of a relatively positioned container

With our sidebar now in position, we can start to style its contents. To start, we'll style the h3 headings that head the different sections of the sidebar:

Example 8.61. styles.css (excerpt)      
     
#sidebar h3 {      
 font-size: 110%;      
 background-image: url(img/sidebar-header-bg.jpg);      
 background-repeat: no-repeat;      
 margin: 0;      
 padding: 0.2em 0 0.2em 10px;      
 font-weight: normal;      
}

Here, we're displaying a background image behind the heading to create the gradient effect we saw in our design comp.

Good Looks in the Background

Using a background image behind a heading is a great way to make your headings more attractive without resorting to using an image for the actual heading text. Using an image to display headings makes your site more difficult to maintain, as you need to manipulate those images every time you want to make even minor changes.

Let's have a closer look at the sections of content that display below each of the headings in the sidebar. We need to add a div with a class of inner to each of these, in order to create a little space and move the text content away from the border. Add this div to each of the three sections, as shown here:

Example 8.62. index.html (excerpt)      
     
<div id="sidebar">      
 <div class="inner">      
   <h3>Site Search</h3>      
   <form method="post" action="" id="searchform">      
     <div>      
       <label for="keywords">Keywords</label>:      
       <input type="text" name="keywords" id="keywords" />      
     </div>      
     <div>      
       <input type="submit" name="btnSearch" id="btnSearch" />      
     </div>        
   </form>      
 </div>      
 <div class="inner">      
   <h3>Coming Events</h3>      
   <ul>      
     <li>10 Apr 06 -<br /><a href="">Seattle Zone      
         Qualifier</a></li>      
     <li>13 Apr 06 -<br /><a href="">World Cup - Round 8</a></li>      
     <li>21 Apr 06 -<br /><a href="">FootbagOOM 05 - NY</a></li>      
     <li>28 Apr 06 -<br /><a href="">WFPA AGM - Hong      
         Kong</a></li>      
     <li>3 May 06 -<br /><a href="">World Cup - Round 9</a></li>      
   </ul>      
 </div>      
 <div class="inner">      
   <h3>Move of the Month</h3>      
   <h4>The Outer Stall</h4>      
   <p>Eti bibendum mauris nec nulla. Nullam cursus ullamcorper      
       quam. Sed cursus vestibulum leo.</p>      
   <p><a href="">more</a></p>      
 </div>      
</div> <!-- sidebar -->

Now, let's add ten pixels of padding to inner:

Example 8.63. styles.css (excerpt)      
     
#sidebar .inner {      
 padding: 10px;      
}

Figure 8.36. The display after styling the headings and inner class

As you can see in Figure 8.36, the sidebar is starting to take shape. Now, let's address the list of events.

Example 8.64. styles.css (excerpt)      
     
#sidebar ul {      
 list-style-image: url(img/more-bullet.gif);      
 margin-left: 0;      
 padding-left: 20px;      
}

In the markup above, we use the more-bullet.gif image as the list bullet, remove the margin, and add left padding of 20 pixels in order to display the list in line with the headings.

Example 8.65. styles.css (excerpt)      
     
#sidebar p, #sidebar li {      
 font-size: 90%;      
 line-height: 1.4em;      
}

Next up, we decrease the font size of the paragraph and list item text by reducing it to 90%. We also create a little more spacing between the lines with the help of the line-height property.

Example 8.66. styles.css (excerpt)      
     
#sidebar ul a:link, #sidebar ul a:visited {      
 color:  white;      
}

The links in the sidebar are white and underlined in the mock-up, so we set them to white with the rule above.

Finally, let's make all the dates in the event list bold. Add a span with class="date" to each of the dates in the list, then style them using the selector #sidebar .date, like this:

Example 8.67. index.html (excerpt)      
     
<ul>      
 <li><span class="date">10 Apr 06</span> -<br />      
     <a href="">Seattle Zone Qualifier</a></li>      
 <li><span class="date">13 Apr 06</span> -<br /><a href="">World      
     Cup - Round 8</a></li>      
 <li><span class="date">21 Apr 06</span> -<br />      
     <a href="">FootbagOOM 05 - NY</a></li>      
 <li><span class="date">28 Apr 06</span> -<br /><a href="">WFPA      
     AGM - Hong Kong</a></li>      
 <li><span class="date">3 May 06</span> -<br /><a href="">World      
     Cup - Round 9</a></li>      
</ul>      
     
Example 8.68. styles.css (excerpt)      
     
#sidebar .date {      
 font-weight: bold;      
}

The events in the sidebar now display as shown in Figure 8.37.

Figure 8.37. Displaying the styled events in the sidebar

The Form

It's time to create some rules for the search form at the top of the sidebar. Add class="text" to the input type="text"/#ce#/ element, then create a rule for #searchform .text that gives the text box a width of 196 pixels and a border. Here's the markup: