HTML and CSS Reference
In-Depth Information
with different parents. Figure 4-74 shows a diagram in which the object with a high
z-index value of 4 is still covered because it is nested within another object that has a
low z-index value of 1.
Figure 4-74
Nesting stacked elements
z-index: 1
nested object
z-index: 4
z-index: 3
z-index: 2
You do not need to include the
z-index
property in your style sheet as none of the
page elements are stacked upon another.
The only remaining page section to include in the Cycle Pathology home page is the
page footer and the Cycle Pathology address. You'll display the footer only after the left
margin is clear of fl oating elements, and you'll apply a left margin of 33%. You'll also
center the address text in the footer, remove any italic from the font style, and reduce the
font size. Add these styles to the Cycle Pathology style sheet now.
To style the page footer and address:
◗
1.
Go to the
cp_reset.css
file in your text editor. Scroll to the bottom of the file and
delete the entire style rule that hides page elements—which contains only the
footer
selector now—along with its style comment. No page elements should
now be hidden in the page. Close the file, saving your changes.
◗
2.
Return to the
cp_styles.css
file in your text editor. At the bottom of the file, insert
the following style rules for the page footer:
/* Page footer styles */
footer {
clear: left;
margin-left: 33%;
width: 66%;
}
◗
3.
Directly below the
footer
style rule, add the following style rule for the
address
element:
footer address {
color: rgb(182, 182, 92);
font-size: 80%;
font-style: normal;
padding-top: 10px;
text-align: center;
}
Figure 4-75 shows and describes the newly inserted style rules.
