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

FAQ

How do I know exactly what values to use for absolute positioning?

Lots of testing! When hand-coding a page that uses absolute positioning there is a lot of trial
and error. It is helpful to sketch the page or create a prototype using a graphics application. Be
patient—make your best guess, test, and repeat until the configuration is complete. The good
news is that Web authoring tools such as Adobe Dreamweaver provide a visual editor that
greatly streamlines this process.

Part 3—Test the Splash Page

Now that your styles are coded, test the splash.html page again. Your page should be
similar to the screenshot shown in Figure 6.15. If there are differences, verify the id val-
ues in your XHTML and check the syntax of your CSS. You may find the W3C CSS
validator at http://jigsaw.w3.org/css-validator helpful when verifying CSS syntax. The
student files contain a copy of wildflower.css and splash.html in the Chapter6 folder.

CHECKPOINT 6.1
1. State three reasons to use CSS for page layout on a commercial site being developed
today.
2. Describe the difference between relative and absolute positioning.
3. Describe the purpose of the z-index CSS property.

6.4 Exploring CSS Page Layout

You've just configured a Web page using CSS to position elements. You'll continue to
explore using CSS for page layout as you create another page for the Door County
Wildflowers site. As discussed earlier in this chapter, the CSS float property causes the
browser to display XHTML elements outside of the normal flow. Elements configured
with the float property appear to float on the right or left side of either the browser
window or another XHTML element such as a paragraph. For best results, elements
that float should have an intrinsic width (such as an image element) or have their width
configured. In the next Hands-On Practice you'll gain more practice using floats.

HANDS-ON PRACTICE 6.5

In the previous Hands-On Practice you created the splash page for the Door County
Wildflowers Web site. In this Hands-On Practice you'll add to this site—create a new
content page (page1.html) and modify the wildflower.css external CSS file to configure
page1.html to display similar to the one shown in Figure 6.18 (shown also in the color
insert section).