Page Layout

In addition to the attributes discussed so far, CSS also provides attributes that let you control whether an element is displayed, the location of an element on the screen, and the relative position of each element.

Two-Dimensional Positioning Attributes

CSS Positioning, also known as CSS-P, is part of the official Cascading Style Sheets level 2 specification. The primary tools for positioning an element are the position, top, and left attributes, which are demonstrated in Code Listing 13-10. Figure 13-10 shows the results.

The top and left attributes are set using standard CSS units of measurement. These settings specify how far away the top or left edge of an element (defined as the edge of the element's margin) will be located from a base point. The base point is determined by the position attribute setting. To use either the top or left attribute, you must first set the position attribute.

Code Listing 13-10.

 <H\TML> <HEAD> <TITLE>Listing 13-10</TITLE> <STYLE> .span1 {position: absolute; top: 0px; left: 0px;         background: blue} .span2 {position: absolute; top: 25%; left: 25%;         width: 50%;          background: lightgrey} .span3 {position: relative; top: 3px;         background: red} .span4 {position: absolute; top: 75px; left: 25px;          width: 50%;         background: green}  </STYLE> </HEAD> <BODY> <SPAN CLASS="span1">SPAN #1 has position set to absolute.</SPAN> <SPAN CLASS="span2">   SPAN #2 has position set to absolute.   The following word <SPAN CLASS="span3">relative</SPAN>   is in SPAN #3, which has position set to relative.   <SPAN CLASS="span4">     SPAN #4 is contained by SPAN #2 and has position      set to absolute.   </SPAN>   This is the last text in SPAN #2. </SPAN> </BODY> </HTML> 

click to view at full size.

Figure 13-10. Using the position, top, and left attributes to position elements on a page.

The position attribute has three possible settings: static, absolute, and relative. The default is static, which means that the browser should position the element in its normal place and ignore settings for the top and left attributes.

Setting the position attribute to absolute allows you to place an element an exact distance from the top left corner of its parent element (the element that contains it). For example, the parent element for SPAN #1 in Code Listing 13-10 is the BODY element, or in other words, the entire page. Setting position to absolute and both top and left to 0 places the SPAN element at the upper left of our page. Because the parent element of SPAN #4 is SPAN #2, its values for the top and left attributes are based on the top left corner of SPAN #2 rather than on the BODY element.

The relative setting allows you to position an element a specified distance from its normal location. Using relative positioning, SPAN #3 is placed 3 pixels lower than its normal location.

NOTE
Code Listing 13-10 is rendered somewhat differently by different vendors' browsers. Whenever you're using positioning, it is especially important to test it in all your target browsers.

It is often thought that the difference between absolute and relative settings is that absolute sets the distance in pixels and relative sets the distance in percentages. This is incorrect. Both absolute and relative allow both pixels and percentages as units of measurement.

Positioning in the Third Dimension

It is possible to use positioning to place two elements on a page at the same location. Normally, the item that is listed last in the HTML code appears on top. You can control this by using the z-index attribute to position elements in front of or behind one another. Code Listing 13-11 provides an example of setting the z-index attribute. In Figure 13-11, you can see the different effects it created.

In Code Listing 13-11, we used two images and one SPAN element containing text. The z-index attribute of the SPAN element was set to 0, while the z-index attributes of the images were set to -1 and 1. The image whose z-index setting is 1 appears in front of the SPAN text (z-index of 0), whereas the image whose z-index setting is -1 appears behind the text. Like top and left, the z-index attribute works only on elements whose position attribute has been set to either absolute or relative. Though Navigator 4 has problems with this code, Navigator 5 will most likely support z-index.

Code Listing 13-11.

 <HTML> <HEAD> <TITLE>Listing 13-11</TITLE> <STYLE>   .img1  {position: absolute; top: 100px; left: 150px; z-index: 1}   .span1 {position: absolute; top: 90px; left: 60px; z-index: 0}   .img2  {position: absolute; top: 100px; left: 330px; z-index: -1} </STYLE> </HEAD> <BODY> <IMG CLASS="img1" SRC="one.gif" > <SPAN CLASS="span1">   This SPAN has a z-index value between those of the two images. </SPAN> <IMG CLASS="img2" SRC="two.gif"> </BODY> </HTML> 

click to view at full size.

Figure 13-11. You can use the z-index attribute to place elements in front of or behind other elements.

Display and Visibility

So far, you have learned to control how and where an element is placed on the page. The display and visibility attributes let you control whether an element appears on the page at all. Code Listing 13-12 uses both these attributes. Figure 13-12 shows the resulting display in the Internet Explorer window.

Code Listing 13-12.

 <HTML> <HEAD> <TITLE>Listing 13-12</TITLE> </HEAD> <BODY> <IMG SRC="one.gif" STYLE="visibility: visible"> <IMG SRC="two.gif" STYLE="visibility: hidden"> <IMG SRC="three.gif"> <IMG SRC="four.gif" STYLE="display: none"> <IMG SRC="five.gif" STYLE="display: inline"> <IMG SRC="six.gif" STYLE="display: block"> <IMG SRC="seven.gif" STYLE="display: list-item"> </BODY> </HTML> 

click to view at full size.

Figure 13-12. The display and visibility attributes let you control whether an element is displayed on your page.

Both the display and visibility attributes allow you to prevent an element from being shown. Setting the visibility attribute to hidden makes the element invisible, although it still takes up space on the screen. The default setting for the visibility attribute is visible, which means that the element is displayed and takes up space on the screen as usual.

Setting the display attribute to none not only causes the element to disappear from view but also frees up space on the screen, thereby allowing other elements to collapse into this unoccupied space. Notice, for example, how in Figure 13-12, because image four's display attribute is set to none, the space it would normally occupy is filled by image five. Setting this attribute to any value other than none—setting it to block, inline, or list-item—causes the element to be displayed. In Internet Explorer 4, block, inline, and list-item are treated identically. In Internet Explorer 5, they cause the element to display as a block element (with a line break in front of it), an inline element (flowing normally like one word in a sentence), or as standard text. Future versions of Internet Explorer might give better support for list items.

Controlling Partial Display

You've already seen how the height and width attributes can control the size of elements on the screen. The overflow CSS attribute lets you decide what happens to parts of an element that do not fit within the prescribed height and width. Code Listing 13-13 demonstrates the overflow attribute. Figure 13-13 shows how Internet Explorer displays this code. Netscape Navigator 4 does not support the overflow attribute.

Code Listing 13-13.

 <HTML> <HEAD> <TITLE>Listing 13-13</TITLE> <STYLE>   DIV {     background: darkgray;     width: 75;     height: 75;     margin: 10;     float: left;     } </STYLE> </HEAD> <BODY> A global style sheet sets the background color, height, width,  margin, and float for all DIVs. The float allows the DIVs to  display on the same line. Notice how wide lines (a series of  W's) are handled in each case. <DIV>   WWWWWWWW A standard DIV, with no additional styles specified.   It expands beyond the height specified to hold all the text. </DIV> <DIV STYLE="overflow:visible">   WWWWWWWW This DIV specifies an overflow of visible.    It also expands beyond the height specified. </DIV> <DIV STYLE="overflow:hidden">   WWWWWWWW This DIV specifies an overflow of hidden.    This one is completely restricted to the specified size. </DIV> <DIV STYLE="overflow:scroll">   WWWWWWWW This DIV specifies an overflow of scroll.    Both scroll and both vertical and horizontal scrollbars appear. </DIV> <DIV STYLE="overflow:auto">   WWWWWWWW This DIV specifies an overflow of auto.    This means that scrollbars appear where needed. </DIV> <DIV STYLE="overflow:auto">   This DIV specifies an overflow of auto.    Without the W's, only a vertical scroll bar appears. </DIV> </BODY> </HTML> 

click to view at full size.

Figure 13-13. The overflow attribute controls how a constrained-size element is displayed on your page.

Figure 13-13 displays six different DIVs. A global stylesheet has specified a height and width of 75 pixels for all DIV elements. It also specifies other attributes, including float, which will be covered later in this chapter. Note how the first DIV, which has no overflow attribute set, expands to fit the text. The rest of the DIVs on the page use the overflow attribute, which has four possible values, visible, hidden, scroll, and auto. The second DIV has overflow set to visible. This is the default value for overflow, and the element behaves identically to the first DIV. The third DIV sets overflow to hidden. This causes the element to cut off any part that does not fit into the prescribed width and height. Setting overflow to scroll makes both horizontal and vertical scroll bars appear. This is true whether or not scroll bars are required for content. Finally, the auto value causes scroll bars to appear only where necessary. Notice how the fifth DIV contains both a horizontal scroll bar (which allows you to scroll across the series of W's) and a vertical scroll bar (which allows you to scroll down through the text). Because the W's are removed from the final DIV, it has only a vertical scroll bar. The clip attribute allows you to control which parts of an element are displayed. For example, with clip you can make just the center, top right, or bottom half of an object visible. Code Listing 13-14 demonstrates the clip attribute, while Figure 13-14 displays its results.

Code Listing 13-14.

 <HTML> <HEAD> <TITLE>Listing 13-14</TITLE> <STYLE> IMG {position:absolute} </STYLE> </HEAD> <BODY> <IMG SRC="three.gif" STYLE="left: 0"> <IMG SRC="three.gif" STYLE="left: 40; clip: auto"> <IMG SRC="three.gif" STYLE="left: 80; clip: rect(0 20 20 0)"> <IMG SRC="three.gif" STYLE="left: 120; clip: rect(5 30 30 5)"> <IMG SRC="three.gif" STYLE="left: 160; clip: rect(5 20 auto 0)"> </BODY> </HTML> 

click to view at full size.

Figure 13-14. The clip attribute lets you crop an object to a particular size.

Using the clip attribute is like cropping an image in desktop publishing. Clip specifies a rectangular piece of the element to display. Clip has two potential values, auto and rect (top right bottom left). The auto setting is the default and causes the entire element to display. The rect setting lets you specify four values that define a rectangle through which you view the element. The four settings specify how far from the top and left edges of the element the top, right, bottom, and left edges of the viewing window should be. For example, the first setting is how far the topmost part of the viewing rectangle should be located from the top of the element. Notice that the third IMG element in Figure 13-14 has the top component of the rect value set to 0, and the entire top of the image is displayed; whereas the fourth IMG, which is set to 5, has 5 pixels cut off the top. In the fourth IMG, the viewing window begins 5 pixels from the top and left of the element and extends to 30 pixels from the left and the top of the element. Any of the four rect settings can be set to auto. This setting allows that edge of the viewing window to extend to the edge of the element. To use this attribute, the elements must be positioned with the absolute setting. Note that clip is not supported by Navigator 4 or Opera 3.5.

The float and clear Attributes

In Code Listing 13-13 we used the float attribute to cause DIV elements to line up next to one another, rather than on top of one another. The float attribute is used to take elements out of their normal place in the document and let other elements wrap around them. The clear attribute lets you specify where floating elements are not allowed. Code Listing 13-15 demonstrates both the float and clear attributes. Figure 13-15 shows how Internet Explorer displays this code.

Code Listing 13-15.

 <HTML> <HEAD> <TITLE>Listing 13-15</TITLE> <STYLE> DIV {width: 100; background: darkgray} </STYLE> </HEAD> <BODY> <DIV STYLE="float: left">This DIV uses float left.</DIV> <SPAN> The DIV element has a value set for float. Note how it floats on the side specified. </SPAN> <P> <DIV STYLE="float: left">This DIV uses float left.</DIV> <SPAN STYLE="clear: left"> In this SPAN, the clear CSS attribute has been set to left. This means that it will not allow floating elements to its left. </SPAN> </BODY> </HTML> 

Figure 13-15. The float and clear attributes let you control the flow of text around objects.

Figure 13-15 displays two different SPANs. Before each SPAN is a DIV with a value set for float. Float may be set to left, right, or none. None causes it to behave as though it had no float. Because the DIV is set to float left, it appears to the left of the SPAN.

NOTE
Although float is supported by many different HTML elements, when it is used on a SPAN or DIV, the element must have a width specified.

The clear attribute is demonstrated in the second SPAN in Figure 13-15, which has clear set to left. This means that elements are not allowed to float on its left side. The clear attribute allows settings of none, left, right, and both. The default setting of none allows elements to float freely. A setting of both restricts elements from floating on either the left or the right.

The CSS attributes that we have used so far have dealt primarily with text and other standard Web components. In the next chapter, we will look at using CSS to control other browser features such as the cursor, tables, lists, and printing.



Dynamic HTML in Action
Dynamic HTML in Action
ISBN: 0735605637
EAN: 2147483647
Year: 1999
Pages: 128

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net