Professional Web Design: Techniques and Templates, Fourth Edition

230
Chapter 10 ■ Case Study: Medium-Content CSS Design
■
■
The a5-body-center and a5-body rules are used to force the design to the left
side of the browser screen with a fixed width of 770 pixels. If the designer
wanted to fill the full width of the screen, the value of 770px would need to
be changed to 100%. If, however, the designer wanted to simply justify the
design to the left, the value of the text-align property in the a5-body-center
rule would need to be adjusted from center to left. The margin-left and
margin-right properties in the a5-body rule ensure that the extra white space
is evenly split on both sides. This system allows more than one site to be
built with ease and flexibility, using the same default code, allowing the
designer to adjust quickly to a client’s needs.
Both the a5-body-center and a5-body rules have their borders turned on
using the following code: border:1px solid #000000;. For demonstration
purposes, the code was added to both rules to show what the structure of
the tags looks like with no content added in them. Turning on
the borders also helps a designer when building a site because it is not always
apparent where elements are placed or where they are expanding. Rather
than removing these rules, it is easier to change the value of 1px to 0px,
turning the borders off. Troubleshooting often involves turning the borders
back on because it saves times and takes up little download size to keep
them in the style sheet.
■
Because the tag is nested inside the
tag, it is indented. This allows for quicker recognition of tags that
are nested inside each other, which becomes useful when the page has more
code added later.
Adding the Left Column
After the framework has been built, the left column needs to be added.
This section includes the logo, menu, and bottom-left image of the design.
Figure 10.5 shows what the design looks like after the code in Listing 10.2 has
been added.
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