Article
Rock-solid CSS Layouts
The Content Area
Let's move on to create the look and feel of the main content area of the page. The first thing we'll do is contain the sidebar and content divs within another div that has an id of main. This will help us to line up the sidebar and content divs beneath the header. Add the opening <div id="main"> just after the header's closing </div>:
Example 8.37. index.html (excerpt)
<img src="img/header-ball.gif" height="24" width="20" alt=""
id="ball" />
</div> <!-- header-bottom -->
</div> <!-- header -->
<div id="main">
<div id="content">
<h2>Simon Says</h2>
Close this div immediately after the closing </div> tag of the sidebar div. In the style sheet, give #main a margin-top of ten pixels to separate the content and header areas, as shown in the snippet below. We'll return to #main later, as we create our layout.
Example 8.38. styles.css (excerpt)
#main {
margin-top: 10px;
}
Now, let's create a rule for #content. Add the following set of declarations to your style sheet:
Example 8.39. styles.css (excerpt)
#content {
margin: 0 240px 0 0;
border: 1px solid #b9d2e3;
background-color: white;
color: black;
}
We set the top margin of #content to 0. Then, we add a 240-pixel right-hand margin, leaving space for us to position our sidebar later.
We also give the box a solid, single-pixel border in the same blue we used for the heading borders, and give it a background color of white.
The Main Feature
At the very top of the page is a "boxout": an area that's visually contained within a box that highlights it. This particular boxout highlights the main feature article. Let's look at that now.
Create a container for the main feature area by adding a div with an id of mainfeature; wrap it around the heading, paragraph, and link of the main feature:
Example 8.40. index.html (excerpt)
<div id="content">
<div id="mainfeature">
<h2>Simon Says</h2>
<p>Simon Mackie tells us how a change of shoes has given him
new moves and a new outlook as the new season approaches.
</p>
<p><a href="">Read More</a></p>
</div> <!-- mainfeature -->
<h2>Recent Features</h2>
Now you can style the main feature area in your style sheet:
Example 8.41. styles.css (excerpt)
#mainfeature {
background-image: url(img/mainimg.jpg);
background-repeat: no-repeat;
background-color: #112236;
color: white;
padding: 2em 2em 1em 200px;
}
Here, we add the background image, maining.jpg, and set it to no-repeat. But if a user has the browser open to dimensions that are wider than the image, we don't want the exposed areas of the page to display white. To prevent this from happening, we add a background color of #112236; this is the same color as the far right-hand side of the image, so the image should appear to fade into the background color seamlessly. We then set the text color to white and use padding to position the text two ems from the top of the box, two ems from the right, one em from the bottom, and 200 pixels from the left-hand side, so that it's clear of the image of the footbag player.
Next, we style the heading and the paragraphs within the boxout:
Example 8.42. styles.css (excerpt)
#mainfeature h2 {
margin: 0;
font-weight: normal;
font-size: 140%;
}
#mainfeature p {
font-size: 110%;
}
Finally, we need to style the “Read More" link that leads readers to the full article. Let's start by adding a class="more" attribute to the paragraph element so that we can target it with our style rules:
Example 8.43. index.html (excerpt)
<div id="mainfeature">
<h2>Simon Says</h2>
<p>Simon Mackie tells us how a change of shoes has given him new
moves and a new outlook as the new season approaches.</p>
<p class="more"><a href="">Read More</a></p>
</div>
First, we remove the top margin from the paragraph that contains the link, to decrease the space between it and the paragraph. Then, we set text-align to right:
Example 8.44. styles.css (excerpt)
#mainfeature p.more {
margin-top: 0;
text-align: right;
}
#mainfeature p.more a:link, #mainfeature p.more a:visited {
color: white;
background-image: url(img/more-bullet.gif);
background-repeat: no-repeat;
background-position: center left;
padding-left: 14px;
}
We then style the link and visited pseudo-classes, changing their color to white and adding the more-bullet.gif background image. We only want to see the bullet once, so we set repeat to no-repeat, then position the background center and left. This positions the image in the center of the link's text. Finally, in order to stop the text from displaying over the top of the background image, we set padding-left to 14 pixels. The impact of these changes is shown in Figure 8.29.
Figure 8.29. After styling the main feature section
The Features List
Our layout is really starting to take shape now! Let's spend some time styling the main content on this page: the list of feature articles.
At the moment, the text inside the content area butts up against the border of the box. I want to create some space between that border and the content. The contents of the home page content div are enclosed in an unordered list, so one option we have is to add a margin to that list and to the h2 above it. However, another page might have a different kind of main content, so in order that all of the pages can be dealt with in the same way, let's add another div, which wraps around the heading and features list, and give it a class of inner:
Example 8.45. index.html (excerpt)
<div id="content">
<div id="mainfeature">
<h2>Simon Says</h2>
<p>Simon Mackie tells us how a change of shoes has given him
new moves and a new outlook as the new season approaches.
</p>
<p class="more"><a href="">Read More</a></p>
</div> <!-- mainfeature -->
<div class="inner">
<h2>Recent Features</h2>
<ul>
<li>
<h3>Head for the Hills: Is Altitude Training the
Answer?</h3>
<p>Lachlan 'Super Toe' Donald</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Praesent hendrerit
iaculis arcu.</p>
<p><a href="">Full Story</a></p>
</li>
<li>
<h3>Hack up the Place: Freestylin' Super Tips</h3>
<p>Jules 'Pony King' Szemere</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Praesent hendrerit
iaculis arcu.</p>
<p><a href="">Full Story</a></p>
</li>
<li>
<h3>The Complete Black Hat Hacker's Survival Guide</h3>
<p>Mark 'Steel Tip' Harbottle</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Praesent hendrerit
iaculis arcu.</p>
<p><a href="">Full Story</a></p>
</li>
<li>
<h3>Five Tricks You Didn't Even Know You Knew</h3>
<p>Simon 'Mack Daddy' Mackie</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Praesent hendrerit
iaculis arcu.</p>
<p><a href="">Full Story</a></p>
</li>
</ul>
</div>
</div> <!-- content -->
To create some space between the features list and the border of the containing box, let's add a margin to #content .inner in the style sheet:
Example 8.46. styles.css (excerpt)
#content .inner {
margin: 10px 20px 10px 40px;
}
If you view your layout in the browser, you should see the space that this margin creates. We can now address the content of this section.
First, let's style the heading. In our layout image, the heading has a blue underline that stretches across the entire width of the content—an effect we can create using a bottom border. Let's also add a small amount of padding to the bottom of the h2, to insert some space between the text and this border:
Example 8.47. styles.css (excerpt)
#content .inner h2 {
color: #245185;
padding-bottom: 0.2em;
border-bottom: 1px solid #b9d2e3;
font-size: 110%;
}
Next, let's add a rule to remove the margin and list bullets from the list of feature items. While we could simply create this rule for #content .inner ul, as there's only one list in this page's layout, that approach might cause problems on other pages whose content includes lists that are not like this special features list. So let's add a class="features" attribute to the ul element first, so we can style this particular list—and others like it—without affecting any normal, non-feature lists within page content:
Example 8.48. index.html (excerpt)
<div class="inner">
<h2>Recent Features</h2>
<ul class="features">
<li>
Example 8.49. styles.css (excerpt)
#content .inner ul.features {
margin: 0;
padding: 0;
list-style: none;
}
Each feature has a level three heading; we'll style these by increasing the font size:
Example 8.50. styles.css (excerpt)
#content .inner h3 {
font-size: 130%;
}
Let's also make each of these headings act as a link to the appropriate article on the Footbag Freaks site. We can style the link and visited pseudo-classes, as well:
Example 8.51. index.html (excerpt)
<li>
<h3><a href="">Head for the Hills: Is Altitude Training the
Answer?</a></h3>
<p>Lachlan 'Super Toe' Donald</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Praesent hendrerit iaculis
arcu.</p>
<p><a href="">Full Story</a></p>
</li>
<li>
<h3><a href="">Hack up the Place: Freestylin' Super Tips</a></h3>
<p>Jules 'Pony King' Szemere</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Praesent hendrerit iaculis
arcu.</p>
<p><a href="">Full Story</a></p>
</li>
Example 8.52. styles.css (excerpt)
#content .inner h3 a:link, #content .inner h3 a:visited {
color: #245185;
}
Finally, let's style the page's paragraph text by making it a dark gray and decreasing the font size to 90%:
Example 8.53. styles.css (excerpt)
#content .inner p {
color: #666666;
font-size: 90%;
}
The Author Images
We want to display an image of the author alongside each feature article listing. Add the image to each feature item, after the heading, like so:
Example 8.54. styles.css (excerpt)
<li>
<h3><a href="">Head for the Hills: Is Altitude Training the
Answer?</a></h3>
<img src="img/lachlan.jpg" alt="Lachlan Donald" height="48"
width="35" />
<p>Lachlan 'Super Toe' Donald</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Praesent hendrerit iaculis
arcu.</p>
<p class="more"><a href="">Full Story</a></p>
</li>
This markup produces the display shown in Figure 8.30.
Figure 8.30. Displaying author images in the document
Let's use the float: left declaration to move these author shots to the left of the paragraph text. Note that we don't need to include the image's width here, as each img already has a width defined.
Example 8.55. styles.css (excerpt)
#content .inner .features li img {
float: left;
margin: 0 5px 5px 0;
}
Here, we've used a selector that will address only those images that are within an li element with the class="features" attribute. This way, we avoid affecting any other images that might be added to your content.
We've set the image to float left, and added a margin so that the text doesn't sit right next to the image—it has a little breathing room, as Figure 8.31 shows.
Figure 8.31. Floating the author image
In our layout graphic, author names appear in bold text, so let's give the paragraph surrounding the author name a class attribute with the value author, and use a CSS rule to style it bold. We're not doing this with any <strong> or <b> tags because we're styling the author names purely for aesthetic reasons—not for any structural purpose. By keeping the author name styles out of the page markup, we're sticking to our goal of separating content from presentation. And, since we're using CSS, if we want to change the way the author name displays in future, we can simply edit the rules for the appropriate class, instead of finding every page on which an author's name is displayed and changing it there. Here's the change we need to make to the page markup, followed by the CSS rule that will make all suitably marked-up author names bold:
Example 8.56. index.html (excerpt)
<img src="img/lachlan.jpg" alt="Lachlan Donald" height="48"
width="35" />
<p class="author">Lachlan 'Super Toe' Donald</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Praesent hendrerit iaculis arcu.</p>
Example 8.57. styles.css (excerpt)
#content .inner p.author {
font-weight: bold;
}
The final page element that we need to style for this section is the "Full Story" links that appear beneath each feature. Add a class of more to each link's opening <p> tag, then add the following rules to your style sheet:
Example 8.58. styles.css (excerpt)
#content .inner p.more{
margin-top: 0;
text-align: right;
}
#content .inner p.more a:link, #content .inner p.more a:visited {
color: black;
background-image: url(img/more-bullet.gif);
background-repeat: no-repeat;
background-position: center left;
padding-left: 14px;
font-size: 90%;
color: #1e4c82;
}
As I'm sure you've noticed, this styling is very similar to that of the "Read More" link within the feature article section at the top of the page.
Your layout should now look a lot like the original layout graphic. Our progress is shown in Figure 8.32. The page is very close to completion: we have only the sidebar left to style!
Figure 8.32. Displaying the page after styling the main content area