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

This was configured with CSS using an interesting technique. The XHTML is
straightforward:
< h3 class="home">Mortgage FAQs</h3> .
CSS creates the effect. Styles are declared for the home class with the following
properties: a background image that does not repeat and is positioned very care-
fully, a width of 200 pixels, light text, and generous padding.
. home { background-image: url(schaumburg.jpg);
background-position: -100px -260px;
background-repeat: no-repeat;
color: #ffffcc;
padding: 60px 5px 20px 5px;
width: 200px;
}
Notice that the background-position property is used with carefully chosen
values. As indicated in Table 6.1, the background-position property can use
two numeric pixel values—horizontal and vertical. The negative number s cause
the background image to shift 100 pixels to the left and 260 pixels down from
the top. The effect is somewhat abstract and ends up displaying just part of the
image. In this case, it is a part of a house to tie in with the home financing theme.
Padding is set quite high to allow room for the image to display around the text.
The text color is light in order to contrast well with the image.
Save the prime.css file. Modify the financing.html page as indicated above—add
class="home" to the <h3> element. Save the financing.html file. Test your pages
in a browser. Your financing.html page should look similar to the one shown in
Figure 6.34. The other pages should display as they did at the end of Step 4.
In this case study you changed the page layout of the Prime Properties Web site pages.
Notice that with just a few changes in the CSS and XHTML code, you configured a
two-column page layout.
Web Project
See Chapter 5 for an introduction to the Web Project case. As you completed the
Chapter 5 Web Project Case Study activities you completed a Web Project Topic
Approval, Web Project Site Map, and Web Project Page Layout Design. In this case
study you will use your design documents as a guide as you develop the pages for your
Web Project using CSS (external style sheet) for both formatting and page layout.
Hands-On Practice Case
1. Create a folder called project. All your project files and graphics will be organized
in this folder and subfolders as needed.
2. Refer to your Site Map to view the pages that you need to create. Jot down a list
of the file names. Add these to the Site Map.
3. Refer to the Page Layout Design. Make a list of the common fonts and colors
used on the pages. These may become the CSS you configure for the body ele-
ment. Note where typical elements used for organization (such as headings, lists,
paragraphs, and so on) may be used. You may want to configure CSS for these
elements. Identify various page areas such as logo, navigation, footer, and so on—