Creating Page Layouts with CSS - HTML, CSS, and Dynamic HTML - page 255

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/Shutterstock.com

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.