| home / programming / css_utopia / chap5 / |    [previous][next] |
|
|
|
Before we can move on to look at CSS positioning issues, there is one more CSS property we need to understand. It comes up infrequently, but when it does, it has a significant impact on page layout.
The display property determines how a browser displays an element—whether it treats it as a block, an inline text fragment, or something else. Although it can be assigned any of 17 legal values, browser support realities confine the list to six, only four of which are really important. For a full reference to display, see Appendix C, CSS Property Reference.
The six possible values for the display property are:
block
inline
list-item
none
table-footer-group
table-header-group
The default value varies from element to element. Block elements such as p, h1, and div default to block, while inline elements such as strong, code, and span default to inline. List items, quite obviously, default to list-item. Assigning non-default settings to elements (such as setting a div to display: inline) can produce some interesting effects (imagine a paragraph containing two divs and a list being displayed in the middle of a line of text).
If you supply a value of none, the element to which it applies is not shown and the space it would normally occupy is collapsed. This differentiates the display: none property-value pair from the visibility: hidden setting commonly used to hide the element but preserve the space it would occupy if it were visible.
The box model we’ve been examining so far in this chapter applies within groups of content. Generally, you use a <div> tag to group together collections of related content and to assign CSS styles to such a group.
But CSS Positioning (CSS-P) involves more than working with individual groups of related information. The connections between groups of content on an HTML page are equally important in determining the layout of the page. The primary CSS property involved in these connections is the position property.
The position property takes a single constant value. The value determines how the block is positioned on the page. The two most frequently used values for the position property are absolute and relative. Another value, static, is the default value, and is seldom used in CSS rules. A fourth value, fixed, is not supported by IE on Windows at all, which unfortunately means it’s almost unusable in practical sites. Refer to Appendix C, CSS Property Reference, for complete details on these more esoteric settings.
Positioning can be confusing in CSS because the coordinate system within which a block is placed depends on the positioning context of the block. There’s no universal set of coordinates to guide that placement, even when the absolute value is assigned to the position property. Each time a block is positioned on the page (with a position setting other than static), it creates a new positioning context for its descendants, in which the upper left corner of its content area has the coordinates (0,0). So, if you use CSS to position an element that is within the block, its position will be calculated relative to that new coordinate system—it's positioning context.
The best way to understand this concept is to look at a few simple, interrelated examples. I’ll start with a blank page. In this context, the upper left corner of the client area (also referred to in modern Web design parlance as the “document”) is where the initial (0,0) coordinates are located. In that context, place a simple bit of text in a div (which uses a style sheet rule associated with the class bigTitle, to make it more readable) as shown in Figure 5.18.
Here’s the HTML fragment that produces the result shown in Figure 5.18. The CSS properties top and left are used to position the div on the page.
<div class="bigTitle" style="position:absolute; left:125px; top:75px;"> This is the first line of text being positioned. </div>
Now put a second div completely inside the first one, as shown here:
<div class="bigTitle"
style="position:absolute; left:125px; top:75px;">
This is the first line of text being positioned.
<div class="bigTitle"
style="position:absolute; left:25px; top:30px;">
This is a second line.
</div>
</div>
The result is shown in Figure 5.19. Notice that the second line of text is indented 25 pixels from the left of the first line of text, because that first line sets the positioning context for the second. Notice, too, that its font size is huge. Why? Take a look at the style rule for the bigTitle class and you’ll understand:
.bigTitle {
font-family: Arial, Verdana, sans-serif;
font-size: 2em;
font-weight: bold;
}
As the second div is a child of the first, its font size is calculated relative to that of the first div. The style rule defines the font as being of size 2 ems, which instructs the browser to render the text at twice the size it would otherwise be. When that 2 em rule is applied to the first line, its size is doubled. But when it is applied to the second line, the font size of the first line is doubled to calculate that of the second.
The page now has two div elements, one nested inside the other. Both use absolute positioning. Now I’ll add a third element, this time a span element that will be contained in the second div block. Using relative positioning, the HTML turns out to look like this:
<div class="firstDiv"
style="position:absolute; left:125px; top:75px;">
This is the first line of text being positioned.
<div class="firstDiv"
style="position:absolute; left:25px; top:30px;">
This is<span style="position:relative; left:10px;
top:30px;">an example of</span> a second line.
</div>
</div>
The result of this bit of HTML can be seen in Figure 5.20. Notice that the words “an example of,” which are contained in the span, appear below, and slightly to the right of their original position. Relative positioning is always based on the positioned element’s original position on the page. In other words, the positioning context of an element that uses relative positioning is provided by its default position. In this example, the span is positioned below and to the right of where it would appear in the line if the positioning were removed, as it is in Figure 5.21.
In summary, the basic rules that determine the positioning context for an element when we’re using the CSS position property are:
Absolutely positioned elements are positioned relative to the positioning context in which they are located.
Relatively positioned elements create their own positioning context based on their static (original) location.
| home / programming / css_utopia / chap5 / | [previous][next] |
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
Created: March 11, 2003
Revised: June 16, 2003
URL: http://webreference.com/programming/css_utopia/chap5
