Professional Web Design: Techniques and Templates, Fourth Edition

214
Chapter 9 ■ Case Study: Low-Content CSS Design
There are several things to note about the code in Listing 9.5:
■
■
■
The a5-body-content container is renamed a5-body-content-sl because it
uses a different background image for the second-level pages that is lightened
to help make the text more visible on the pages where it is layered over
the woman. The a5-body-content-sl rule then calls this new image.
The margin-right:15px; code, as on the homepage, ensures that the text will
never touch the right side of the browser window if it is a liquid design that
expands to the full width of the screen.
The a5-sl-title rule is added to allow the designer to place a title on
every page so the user knows which page is selected. The main thing to note
about this code is that because the container is given padding, the Tantek
hack is used so the height of the row is the same in the tested browsers,
which included IE 5 and 5.5 for this design. A margin-bottom value of 10px
is also added to provide space between the title area and the text for
that page.
Adding a Floating Container for Additional Content
In the case study designs in Chapters 10, 11, 12, and 13, a third column is
added to allow for more layout options. In this design, however, a new is
merely added and floated to the right side of the text to allow for similar functionality.
Figure 9.18 illustrates what the new code (outlined in Listing 9.6) will
look like.
Note
The newly added code is bold to differentiate it from the existing code that is being built upon in this
case study.
Listing 9.6 Code for Figure 9.18
Design 121
Game Developing GWX