Professional Web Design: Techniques and Templates, Fourth Edition

310
Chapter 11 ■ Case Study: High-Content CSS Design
the code together or may want to break it up into separate style sheets for
more of a distinct separation.
Note
The rules added in the second-level template have –sl appended to their names to signify that they
are to be used for secondary pages.
■
■
The a5-column-right-left-sl rule is added to the style sheet for the secondlevel
template. It replaces the a5-column-right-left rule, which is the container
for the center column on the homepage. The only difference between
the two styles is that the content on the second-level page, which is styled by
the a5-column-right-left-sl rule, adds 10 pixels of padding to the top and
bottom of the container to position itself with the menu and to add extra
spacing on the bottom.
The a5-sl-title rule is added to include the page title for secondary pages
at the top of the page. This rule sets the height of the at 25 pixels,
using the height property. Padding also is used to position the title from the
top and left sides in the container. To ensure that the color of the bg-title.
gif is continued across the screen, the shorthand background property is
assigned a background color value of #DBDBDB. Because padding is used to
position the text within the container, the Tantek hack is added to ensure
that the height of the container is the same for both compliant and noncompliant
browsers.
Constructing a Second-Level Page with Two Columns
The full-width second-level template included with this design is the page the
designer comes to when clicking on the Menu Item 3 link in the menu.
The purpose of this template is to provide a page with more white space for the
designer to work with. Figure 11.16 shows what the design looks like when the
final code is added to the page and the right column is removed from the design
in Figure 11.16 (see Listing 11.6).
Note
The newly added code is bold to differentiate it from the existing code that is being built upon in this
case study.
Game Developing GWX