HTML and CSS Reference
In-Depth Information
2. Configure the CSS.
Open painter.css in Notepad. Edit the style rules as follows:
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 150 pixels wide.
●
#leftcolumn { float: left;
width: 150px;
}
Configure the navigation area. Remove the nav id. Add a descendent selector
style rule for the
navigation
class to configure the anchor tags within the
leftcolumn
id as follows: with bold font, a 15 pixel margin on the right, bot-
tom, and left sides, and displayed as a block element (with line breaks above
and below) by the browser.
●
#leftcolumn a { font-weight: bold;
margin: 0 15px 15px 15px;
display: block;
}
Configure the right column area. Add a new style rule for the
rightcolumn
id
to configure an area with a 150 pixel left margin and a 10 pixel top margin
(margin: 10px 0 0 150px)
.
●
Configure an area that floats to the right. Add a new style rule for the
floatright
class.
●
.
floatright { float: right;
padding: 5px;
}
Save the painter.css file.
3. Modify the index.html File.
Add
<div>
elements and modify the code as follows:
●
Configure the logo area. Assign the
<h1>
to the id
logo
.
●
Configure the left column. The navigation links are the only content in the left
column. Change <
div id="nav"
> to <
div id="leftcolumn"
>. Remove
other code, including any
characters that may be present.
●
Configure the right column. This area contains the content (paragraph and
unordered list elements) and the footer section. Code a
<div>
that surrounds
this area. Assign the
<div>
to the
rightcolumn
id.
Save the index.html file. It should look similar to the Web page shown in Figure
6.30. Remember that validating your XHTML and CSS can help you find syntax
errors. Test and correct this page before you continue.
4. Modify the services.html and testimonials.html Files.
Modify these Web page files
in a similar manner as you did in Step 3. Configure the room images on the
testimonials.html page—on the opening image tag for each room photo, remove
the
align="left"
attribute and add
class="floatright"
.
5. Save and Test Your Pages in a Browser.
As you test your pages, use the CSS and
XHTML validators to help you find syntax errors.
6. Bonus Style.
Figure 6.31 shows an alternate design for the testimonials.html page.
Notice how the
<h2>
elements are styled differently—it is set to float and is con-
figured with a
negative
top margin. This allows the dark green box to stand out
better on the page. The paragraph elements in this area are each assigned to a
new class named
.desc
that configures a top border of the same color green and
Search WWH ::
Custom Search