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

Save the file. Launch a browser and test your page. It should look similar to the lower
Web page shown in Figure 6.9. The student files contain a sample solution at
Chapter6/trillium.html. Note that even though the unordered list is coded in the page
after the paragraph, it's displayed immediately after the heading. This is because the
paragraph is absolutely positioned ( position: absolute ). Browsers render absolutely
positioned elements outside of normal flow.

Note : This Hands-On Practice used embedded CSS for ease of editing. However, for an
actual Web site with more than one page the most efficient solution is to use an exter-
nal CSS file. See Chapter 3 if you'd like to review using external style sheets. You'll use
external style sheets later in this chapter.

FAQ

What's a good name for a class or id and how do I decide which to use?

That's actually two questions, but here goes... A class or id name should be descriptive of
the purpose (such as nav , news , footer , and so on) rather than being descriptive of the
presentation (such as redText ). According to Google's Web Authoring Statistics Study,
http://code.google.com/webstats, the 10 most commonly used class names are footer ,
menu , title , small , text , content , header , nav , copyright , and button .

If the style can be used on more than one element on a page, configure the style as a class.
Use the . (dot) notation in the style sheet. Use the class attribute in the XHTML.

If the style is specific to only one element or if the element will be manipulated using DHTML
(see Chapter 11), configure the style as an id. Use the # notation in the style sheet. Use the id
attribute in the XHTML.

The float Property
Elements that seem to float on the right or left side of either the browser window or
another element are often configured using the float property . The browser renders these
elements using normal flow, and then shifts them as far as possible within their container
(usually either the browser window or a <div> ) to either the right or left. Use CSS to spec-
ify a width for a floated element unless the element already has an implicit width—such as
an img element. Other content will flow around the float. Only block-level elements (such
as divs , paragraphs , and images ) can be configured to float. When floating an image, the
margin property is useful to configure empty space between the image and text on the page.

Figure 6.10 shows a Web page (see the student files, Chapter6/float.html) with an image
that has been configured with float:right .

Figure 6.10
The image is
configured with
float:right