Professional Web Design: Techniques and Templates, Fourth Edition

Building the Structure 235
■
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 line-height is set to 20 pixels. Unlike the design
in Chapter 9, the vertical-align property is not assigned here because it
will move the text in relation to the background image, which is declared
using the following shorthand code: background: url(images/bg-menu-off.
gif) no-repeat 0px 0px;.
■
Note
The a5-menu a:hover rule is used to reassign the background image from
bg-menu-off.gif to bg-menu-on.gif and the color of the text from #ffffff
to #F9F68C when the user mouses over the text.
There is a case difference between the color of the a link and the hover link (that is, #ffffff and
#F9F68C). The reason for this is that #ffffff was entered manually while building the site,
and #F9F68C was copied from the Color Picker in Photoshop when grabbing the exact HEX color
(see Figure 10.7).
■ The image-bottom-left.jpg image below the menu is added after the a5-
menu in the code. It has no styling added to it other than the
tags wrapped around it.
■
The a5-copyright rule positions the copyright text below the image-bottomleft.jpg
image, using padding around the text. The padding:20px 50px 10px
10px; code adds 20 pixels of padding to the top of the text, 50 pixels to the
right, 10 pixels to the bottom, and 10 pixels to the left.
Figure 10.6
Space that is added between the logo and the menu area in IE 5, 5.5, and 6 because
tags were not wrapped around the image.
Game Developing GWX