HTML and CSS Reference
In-Depth Information
Figure 4-34
Formatted president's message
cursive heading
semi-tr
ansparent
background
background
image resizes with
the pre
s
ident's
message box
Vaclav Volrab/Shutterstock.com
◗
4.
If you have a widescreen monitor in which you can change the width of the
browser window from 1000 to 1400 pixels, resize the browser window and verify
that the placement of the page elements and the size of the
atwood.png
back-
ground image change in response.
The next item on the Cycle Pathology home page is the vertical navigation list. Dan
wants this list fl oated alongside the president's message. You'll redisplay that item and
fl oat it now.
To redisplay the vertical navigation list:
◗
1.
Return to the
cp_reset.css
style sheet in your text editor and remove the selec-
tor
nav.verticalNAV
and the comma that follows it from the last style rule. Save
your changes to the file.
◗
2.
Go to the
cp_styles.css
style sheet in your text editor. At the bottom of the
file, insert the following style rules to format the vertical navigation list (see
Figure 4-35):
/* Vertical Navigation List */
nav.verticalNAV {
float: left;
margin-left: 3%;
width: 23%;
}
nav.verticalNAV a {
color: rgb(182, 182, 92);
line-height: 2.2em;
}
