Positioning the Sidebar
If the sidebar is wider than that margin, it will continue to display over the top
of the content div. To prevent this overlap, we give sidebar2 a width value:
File: styles.css (excerpt)
#sidebar2 {
position: absolute;
top: 0;
left: 0;
width: 159px;
border-top: 1px solid #b9d2e3;
border-left: 1px solid #b9d2e3;
border-bottom: 1px solid #b9d2e3;
background-color: white;
color: black;
margin: 0;
padding: 0;
}
I have also started to style this sidebar, giving it top, left, and bottom borders,
and a background color of white. Figure 9.4 shows our progress so far.
223
Licensed to siowchen@darke.biz
Chapter 9: Three-column Layouts
Figure 9.4. Giving sidebar2 a width so that it doesn’t overlap the
content
We can now style the individual elements within sidebar2.
File: styles.css (excerpt)
#sidebar2 .inner {
margin: 10px;
}
#sidebar2 .inner selects the wrapper around the sidebar contents (those that
have a class of inner) and applies a ten-pixel margin between the contents of the
sidebar and its border.
File: styles.css (excerpt)
#sidebar2 p {
font-size: 90%;
color: #666666;
}
#sidebar2 a:link, #sidebar2 a:visited {
color: #245185;
224
Licensed to siowchen@darke.biz
Positioning the Sidebar
font-weight: bold;
}
Let’s also create rules for the paragraphs within sidebar2, setting the text to 90%
and a dark gray color. We can also set the links within the sidebar2 div to be
blue and bold.
File: styles.css (excerpt)
#sidebar2 h3 {
color: #245185;
padding-bottom: 0.2em;
border-bottom: 1px solid #b9d2e3;
font-size: 110%;
}
The headings for the blog and newsletter are marked up as level three headings,
so we make these blue and give them a bottom border so that they look similar
to the text in these areas of the design. Figure 9.5 shows how these styles display.
Figure 9.5. After the text elements are styled
225
Licensed to siowchen@darke.biz
Chapter 9: Three-column Layouts
The Navigation
At the top of this sidebar is a list that contains navigation items. Let’s add some
specific rules to style these list items to fit with our design.
Set the list style to none to remove the bullets, then set margin and padding to
0 to line the list up with the paragraph text:
File: styles.css (excerpt)
#nav {
list-style: none;
margin: 0;
padding: 0;
}
We’ll also add a bottom border to each list item, and apply padding to create
space between the items (and between each item and its border):
File: styles.css (excerpt)
#nav li {
border-bottom: 1px solid #b9d2e3;
padding: 0.4em 0 0.2em 0;
font-size: 90%;
}
Finally, we can style the links, removing the underline from each, and setting its
weight to normal (previously, we set all links in sidebar2 to display in bold).
The results of this work are depicted in Figure 9.6.
File: styles.css (excerpt)
#nav li a:link, #nav li a:visited {
text-decoration: none;
color: #245185;
font-weight: normal;
}
226
Licensed to siowchen@darke.biz
Positioning the Sidebar
Figure 9.6. Styling the navigation
The Blog
Next, we have the blog section of the page. This area contains a featured item,
which we’ve wrapped in a div with an id of bloglatest, and a list of the three
most recently posted blog items. These listings would link through to the full
blog entries on the completed site.
To style the date on the featured blog entry, we need to style the h4 within the
div bloglatest to make it orange:
File: styles.css (excerpt)
#bloglatest h4 {
color: #ff4e00;
font-size: 100%;
font-weight: bold;
}
227
Licensed to siowchen@darke.biz
Chapter 9: Three-column Layouts
On our list of blog entries, let’s set margin to 0 and padding to 20 pixels. We’ll
also set the list bullets to use the more-bullet.gif image that we used elsewhere
in the layout:
File: styles.css (excerpt)
#blog {
margin: 0;
padding: 0 0 0 20px;
list-style: url(img/more-bullet.gif);
}
Finally, we’ll style the list items. For each item, the date displays in orange; the
link to the article appears in blue next to it. As we’ve already styled links to display
in blue font, we can make the entire list item appear in orange: the links will still
be blue. Figure 9.7 shows the finished display.
File: styles.css (excerpt)
#blog li {
font-size: 90%;
padding-bottom: 0.5em;
color: #ff4e00;
font-weight: bold;
}
228
Licensed to siowchen@darke.biz
Positioning the Sidebar
Figure 9.7. The blog section of sidebar2
The Newsletter
The newsletter subscription form is the very last thing we need to consider in
this layout. First, let’s create a rule to address the text field.
Style the text field: create a rule with the selector #newsletterform .text, then
set the text field’s width to prevent it from spilling out of the sidebar into the
content area:
File: styles.css (excerpt)
#newsletterform .text {
width: 135px;
border: 1px solid #45bac0;
}
Next, add a rule for #newsletterform .searchbutton:
File: styles.css (excerpt)
#newsletterform .searchbutton {
text-align: right;
229
Licensed to siowchen@darke.biz
Chapter 9: Three-column Layouts
margin-top: 4px;
}
Here, we create a rule that will be applied to the div that wraps the submit button.
This rule aligns the button to the right; we need to align the content of the but-
ton’s parent to the right to achieve this.
Finally, let’s add a rule for #newsletterform .btn to the style sheet:
File: styles.css (excerpt)
#newsletterform .btn {
border: 1px solid #45bac0;
background-color: #256290;
color: white;
font-size: 80%;
}
These rules style the submit button, and are similar to those we created for the
search form in the other sidebar. Figure 9.8 shows our progress.
Figure 9.8. The newsletter subscription form
230
Licensed to siowchen@darke.biz
Positioning the Sidebar
Great work! We’ve completed a three-column layout that displays in Internet
Explorer 6 as illustrated in Figure 9.9. I tend to develop CSS layouts using Fire-
fox—one of the more standards-compliant browsers—then check that my design
displays as expected in Internet Explorer. But as you can see, this layout is relat-
ively simple, and holds together well in IE6.
Figure 9.9. The completed three-column layout in IE 6 on Windows
This layout is a great choice for projects for which you need a basic three-column
layout with, or without, a header area. Absolute positioning provides good control
over the widths of the different columns, and makes it relatively easy to get
231
Licensed to siowchen@darke.biz
Chapter 9: Three-column Layouts
consistent results across browsers. However, there are times when this layout
isn’t the best choice. In the next section, we’ll take a look at the most common
problem designers experience with three-column layouts.
Adding a Footer
The layout we’ve created works really well … until you want to add a footer that
spans all three columns, that is. This variation on our layout is shown in the
mock-up in Figure 9.10.
If your center column is the longest of all three, then at first glance, adding the
footer seems pretty easy. To demonstrate, let’s add the following markup just
before the closing </div> tag of the wrapper div.
File: index.html (excerpt)
</div> <! main >
<div id="footer">
<p>Copyright 2006 - All Rights Reserved</p>
</div> <! footer >
</div> <! wrapper >
</body>
</html>
Add the following rules to your style sheet, to style the footer to match our design:
File: styles.css (excerpt)
#footer {
width: 100%;
border-top: 1px solid #b9d2e3;
border-bottom: 1px solid #b9d2e3;
margin-top: 10px;
}
#footer p {
font-size: 90%;
color: #256290;
margin: 0;
padding: 0.2em 0 0.2em 0;
}
So what’s the problem? As Figure 9.11 illustrates, the layout seems to work fine
in the browser!
232
Licensed to siowchen@darke.biz
Không có nhận xét nào:
Đăng nhận xét