Page Layout with CSS - Web Development and Design Foundations with XHTML - page 260

Hands-On Practice Case

1. Create a Folder. Create a folder called fishcreekcss. Copy all the files from your
Chapter 4 fishcreek folder into the fishcreekcss folder. You will modify the
fishcreek.css file and each Web page file (index.html, services.html, and
askvet.html) to implement the two-column page layout, as shown in Figure 6.27.
See the new Fish Creek home page, as shown in Figure 6.28 (shown also in the
color insert section).

Figure 6.28
The new Fish Creek
two-column
index.html

Go to the end of the
book for a full color
version of this figure

2. Configure the CSS. Open fishcreek.css in Notepad. Edit the style rules as follows:

Configure a subtle background image for the body selector. Use the
gradientblue.jpg file found in the student files (Chapter6/gradientblue.jpg).

●

Configure the logo area. Remove the h1 selector and style rules. Create a new
id named logo with 55 pixels of padding on the left side ( padding-left:
70px ).

●

Configure the left column area. Add a new style rule for the leftcolumn id to
configure an area that floats to the left and is 140 pixels wide.

●

#leftcolumn { float: left;
width: 140px;

}

Configure the navigation area. Remove the imgnav id. Add a property to the style
rules for the img selector—configure 10 pixels of padding ( padding: 10px ).

●

Configure the right column area. Add a new style rule for the rightcolumn id
to configure an area with a 170 pixel left margin.

●

Configure the category class. Since the page now uses a gradient background
image, remove the background-color style rule from this class.

●