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

The display Property
Recall from Chapter 2 that some XHTML elements, such as the paragraph and heading
elements, are block elements. A division ( <div> ) is also a block element. The browser
renders these elements with 100 percent of the available width and displays a line break
above and below—forming a “block.” Other elements, such as anchor tags and span
tags, are rendered directly inline—with no line break before or after them. These are
called inline elements.
The display property configures if and how an element is displayed. An element con-
figured with display:none will not be displayed. This is sometimes used when config-
uring styles to print a Web page. An element configured with display:block will be
rendered as a block element (even if it is actually an inline element, such as an anchor
tag). You will work with the display property in Chapter 7 and Chapter 8.
The z-index Property
The z-index property is used to modify the stacking order of elements on a Web page.
When using only XHTML there is no easy way to “stack” elements other than config-
uring backgrounds for pages or tables. The z-index property provides flexibility in the
display of elements. The default z-index value is "0" . Elements with higher z-index
values will appear stacked on top of elements with lower z-index values rendered on
the same position of the page. Figure 6.15 is configured using absolute positioning and
z-index properties.
Figure 6.15
This page uses
absolute positioning
and z-index
properties
Notice how the three flower photos and the logo are arranged. It would be difficult to
recreate this just using XHTML. This type of page design may be appropriate for the
splash page of a Web site. You will recreate this Web page when you complete the next
Hands-On Practice. The term splash page originates from client-server applications that
display an introductory (or splash) screen while the program loads. Splash pages, some-
times called splash screens, can set the tone or introduce a Web site.
You have been introduced to the position , float , clear , overflow , display , and
z-index properties. For your reference, Table 6.1 contains a list of CSS properties often
used with formatting and page layout.