HTML and CSS Reference
In-Depth Information
Next, you'll change the left margins for the horizontal navigation list and the presi-
dent's message so they are offset from the page's left edge by 33% of the page body
width. You'll also resize the width of the navigation list to 66% of the total page width.
To change the margin spaces in the page:
1. Return to the cp_styles.css style sheet file in your text editor, and then directly
below the comment Horizontal Navigation List add the following style rule:
nav.horizontalNAV {
margin-left: 33%;
width: 66%;
2. Scroll down to the style rule for the president's message and add the following style:
margin-left: 33%;
Figure 4-27 highlights the new and revised styles in the style sheet.
Figure 4-27
Setting left margins
sets the width of the
navigation list to 66%
of the page width and
the left margin to 33%
of the page width
sets the left mar gin to
33% of the page width
3. Save your changes to the file and then reload cycle.htm in your Web browser.
Figure 4-28 shows the revised layout of the page.
Figure 4-28
Revised page layout
page content in the remaining
66% of the page width
33% left margin
Vaclav Volrab/
Margin styles also can be applied to the body element. For example, by setting the
margin around the page body to 0 pixels, you can remove the extra space many brows-
ers insert by default between the page content and the edge of the browser window.
Search WWH ::

Custom Search