Professional Web Design: Techniques and Templates, Fourth Edition

Building the Structure 237
This container is added because it will contain a background image in the second-level
pages. By building the design around it in the homepage, the secondlevel
pages, which are built from the homepage, are easier to construct because
the base foundation of the code is already incorporated into the code. Following
is the rule once it is added to the style sheet:
#a5-body-content {
position:relative;
margin-left:191px;
height:349px;
border:1px solid #000000;
}
There are three things to note about the preceding code:
■
■
■
The code has relative positioning so that it will flex to the full width of the
a5-body container within which it is nested. This helps ensure that the design
can also serve as a liquid design if the width of the a5-body rule is
changed to 100%.
The container is assigned a value of 191px to its margin-left property. This
forces its left side 191 pixels from the left side of the design, so it is placed
just past the left column.
The height property is added to ensure that the container is 349 pixels high,
which is the height of the background image that is added.
Adding the Top-Right Images
The first stage in adding the content in the right parent column is to add the topright
images. Figure 10.9 illustrates the design once the images are added into the
code, which is included in Listing 10.3.
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