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

● 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 20 pixels of right and
bottom padding ( padding: 0 20px 20px 0 ).
● Configure the images on the listings.html page to float to the left. Add a new
float:left style rule to the property class.
Save the prime.css file.
3. Modify the index.html File. Add <div> elements and modify the code as indicated
below.
● Configure the logo area. Assign the <h1> to the id logo .
● Configure the left column. The navigation image links are the only content in
the left column. Assign the <div> that contains the image links to the
leftcolumn id, <div id="leftcolumn"> . Remove other code, including
any &nbsp; characters that may be present.
● Configure the right column. This area contains the content (paragraphs,
unordered list, and text navigation links) 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.33. Remember that validating your XHTML and CSS can help you find syntax
errors. Test and correct this page before you continue.
4. Modify the listings.html and financing.html Files. Modify these Web page files in
a similar manner as you did in Step 3. Configure the property images on the
listings.html page—on the opening image tag for each property photo, remove
the align="left" attribute. 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.
5. Bonus Style. Figure 6.34 shows an alternate design for the financing.html page.
Notice the image near the center of the content with the text “Mortgage FAQs.”
Figure 6.34
New style rules for
the Mortgage FAQs
heading