Sams Teach Yourself CSS in 24 Hours- P7

Sams Teach Yourself CSS in 24 Hours- P7: Times have changed, thankfully, since those Dark Ages of CSS. All major browsers aswell as some minor ones have increased support for Cascading Style Sheets in the latestversions. Web developers are aware of CSS and the vital role they play in designing greatWeb pages, and presumably you’ve got some idea of how important they are if you’vebought this book.
Nội dung trích xuất từ tài liệu:
Sams Teach Yourself CSS in 24 Hours- P7282 Hour 16 Fixed Positioning In fixed positioning, a box placed on the screen doesn’t move even if the rest of the page moves; it seems to float on top of the page in a fixed location. This is useful if you want to create a menu bar or graphic that never leaves the page. A box placed according to fixed positioning is located in relation to the whole page, not to its containing block or its original position. Like absolute positioning (and unlike relative positioning), no space is set aside for the box in its normal flow location. The style sheet in Listing 16.5 uses fixed positioning and also adds a very large bottom margin to the outer box. This is so that the effects of the fixed positioning can be seen by using the scrollbars to move the page. LISTING 16.5 Style Sheet Using Fixed Positioning to Prevent an Element from Scrolling /* demo-16.5.css */ #inner { position: fixed; top: 4em; left: 4em; } #outer { margin-bottom: 25em; } The effects of fixed positioning are shown in Figure 16.7. I recommend testing this your- self at http://www.cssin24hours.com/16/demo-16.5.html to see how it works, using one of the newer browsers that support CSS positioning. Warning for Netscape 4 and Internet Explorer 4 and 5 Older versions of Netscape and Internet Explorer don’t support fixed positioning. The top, right, bottom, and left Properties As shown in the previous examples, the top and left properties can be used to set the distance by which a positioned box is placed, in relation to the context box. The bottom and right properties also can be used to designate offsets. The types of values that can be given to these offset properties are shown in Table 16.2. The default is auto, which means that it is up to the browser to determine where something should be placed, which is to say it places the box where it belongs according to normal flow. Page Layout in CSS 283FIGURE 16.7Objects fixed inposition don’t movewhen the rest of thepage scrolls. 16TABLE 16.2 Values for the Offset Properties Value Effect measurement Offset the box by some amount, toward the “inside.” negative-measurement Offset the box by some amount, toward the “outside.” percentage Offset the box by a percentage, toward the “inside.” negative-percentage Offset the box by a percentage, toward the “outside.” auto Calculate the offset automatically. inherit Use the value of the offset property from the containing box. Because positive values are toward the center point of the context box, some of these off- sets can seem backward in effect from what you’d expect. For example, setting a left value of 4em actually moves the box to the right, a right value of 4em moves the box to the left, and a top value of -4em moves the box up, not down. You will need to remember this when placing boxes. More examples are helpful to illustrate this in action, so the HTML page in Listing 16.6 contains three boxes that can be positioned on the page with different offset values.284 Hour 16 LISTING 16.6 Three Boxes for Positioning Offset Values in Positioning body { font: 20pt bold Verdana, sans-serif; } #outer { border: 3px solid black; background-color: silver; margin: 1em; } #outer p { padding: 1em; } #one, #two, #three { background-color: white; padding: 1em; } #one { border: 5px solid black; } #two { border: 5px dotted black; } #three { border: 5px dashed black; } This is the outer box. One Two Three And this is more content within the outer box. Listing 16.7 is a style sheet that uses relative positioning to move the boxes a specified number of ems f ...