Professional Web Design: Techniques and Templates, Fourth Edition

Building the Structure 199
■
■
The a5-menu container contains the menu items that are styled to enable
easy mouseovers. The column is given a specific width to guarantee that the
first element is positioned correctly in all browsers.
The a5-menu a descendant rule is used to display and style each menu item.
The display property with the block value will output each item in the
in its own row. The text is then left justified, assigning the text-align
property a value of left. The line-height and vertical-align properties,
which need to be used together for the vertical-align property to be
interpreted, force the height of the menu item and how the text will be
vertically aligned. The padding-left:15px; rule forces the menu items 15
pixels from the left so they do not fall on the circular image at the very left
of the row. Because the menu is layered over the a5-body-content background
image to the right, the margin-bottom:1px; rule is added to ensure
that there is transparent spacing between the menu items so the layering
effect is noticeable (see Figure 9.12).
One of the most important properties of this rule is the shorthand background
property, which assigns a background image to a hyperlink and thus an item in
the menu. This property works in conjunction with the a5-menu a:hover rule,
Figure 9.12
The menu items are assigned a margin-bottom value of 1px to ensure that it is apparent that the menu is
layered over the background image in the a5-body-content rule.
Game Developing GWX