Tài liệu Sams Teach Yourself CSS in 24 Hours- P7 ppt

50 1,513 0
  • Loading ...
1/50 trang

Thông tin tài liệu

Ngày đăng: 21/01/2014, 16:20

Fixed PositioningIn fixed positioning, a box placed on the screen doesn’t move even if the rest of the pagemoves; it seems to float on top of the page in a fixed location. This is useful if you wantto create a menu bar or graphic that never leaves the page. A box placed according tofixed positioning is located in relation to the whole page, not to its containing block orits original position. Like absolute positioning (and unlike relative positioning), no spaceis 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 bottommargin to the outer box. This is so that the effects of the fixed positioning can be seen byusing the scrollbars to move the page.LISTING 16.5 Style Sheet Using Fixed Positioning to Prevent an Element fromScrolling/* 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, usingone of the newer browsers that support CSS positioning.282 Hour 16Warning for Netscape 4 and Internet Explorer 4 and 5Older versions of Netscape and Internet Explorer don’t support fixed positioning.The top, right, bottom, and left PropertiesAs shown in the previous examples, the top and left properties can be used to set thedistance by which a positioned box is placed, in relation to the context box. The bottomand right properties also can be used to designate offsets. The types of values that canbe given to these offset properties are shown in Table 16.2. The default is auto,whichmeans that it is up to the browser to determine where something should be placed, whichis to say it places the box where it belongs according to normal flow.21 0672324091 ch16 6/13/02 10:41 AM Page 282Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.TABLE 16.2 Values for the Offset PropertiesValue Effectmeasurement 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 leftvalue of 4em actually moves the box to the right, a right value of 4em moves the box tothe left, and a top value of -4em moves the box up, not down. You will need to rememberthis when placing boxes.More examples are helpful to illustrate this in action, so the HTML page in Listing 16.6contains three boxes that can be positioned on the page with different offset values.Page Layout in CSS 28316FIGURE 16.7Objects fixed in position don’t movewhen the rest of thepage scrolls.21 0672324091 ch16 6/13/02 10:41 AM Page 283Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.LISTING 16.6 Three Boxes for Positioning<! offsets-16.6.html ><html><head><title>Offset Values in Positioning</title><style type=”text/css”>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; }</style></head><body><div id=”outer”><p>This is the outer box.</p><div id=”one”>One</div><div id=”two”>Two</div><div id=”three”>Three</div><p>And this is more content within the outer box.</p></div></body></html>Listing 16.7 is a style sheet that uses relative positioning to move the boxes a specifiednumber of ems from their original positions.LISTING 16.7 Relative Offsets Set via em Lengths/* offsets-16.7.css */#one { position: relative; top: 0px; right: 0px; }#two { position: relative; top: 2em; left: 4em; }#three { position: relative; bottom: 5em; right: 4em; }The effects of applying Listing 16.7 to the HTML page of Listing 16.6 are shown inFigure 16.8. The first box hasn’t been moved from where it should be; the second boxhas been moved down and to the right; and the third box has been moved up and to theleft, creating some overlap. Notice that the word “Three” is cut off, as it has been movedoff the left side of the screen.284 Hour 1621 0672324091 ch16 6/13/02 10:41 AM Page 284Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.Page Layout in CSS 28516FIGURE 16.8Boxes placed usingrelative offsets, shownin Netscape 6.The style sheet in Listing 16.8 differs from that in Listing 16.7 only in using absoluteinstead of relative positioning. Therefore, the numbered boxes will be placed in relationto the gray outer box that contains them all, and not relative to their original positions innormal flow.LISTING 16.8 Absolute Offsets Measured in em Lengths/* offsets-16.8.css */#one { position: absolute; top: 0px; right: 0px; }#two { position: absolute; top: 2em; left: 4em; }#three { position: absolute; bottom: 0em; right: 4em; }#outer { position: relative; }The effects of absolute positioning can be seen in Figure 16.9. One thing you will noticehere is that the boxes are not as wide as in Figure 16.8. A block box is normally as wideas its containing box, but when that box is removed from the normal flow, it will becomeas wide (or as narrow) as its content.21 0672324091 ch16 6/13/02 10:41 AM Page 285Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.286 Hour 16FIGURE 16.9Absolutely positionedboxes, à la Netscape 6.The examples so far have used ems as units. Percentages can also be used to specify theoffset, as in Listing 16.9. These boxes will be absolutely positioned as a fraction of theircontaining box.LISTING 16.9 Absolute Offsets as Percentages/* offsets-16.9.css */#one { position: absolute; top: 0%; right: 0%; }#two { position: absolute; top: 20%; left: 20%; }#three { position: absolute; bottom: -10%; right: 30%; }#outer { position: relative; }The positioned boxes are shown in Figure 16.10.In Hour 17, “Advanced CSS Layout,” you’ll learn how to explicitly set the sizeof display boxes by using the width property.21 0672324091 ch16 6/13/02 10:41 AM Page 286Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.A fixed box doesn’t scroll, and is fixed with respect to the whole display. Unfortunately,browsers don’t agree on what this means in terms of offset values for right and bottomproperties. Listing 16.10 is an example of those values in a style sheet.LISTING 16.10 Fixed Positioning and Vertical Offsets/* offsets-16.10.css */#one { position: fixed; top: 0%; right: 0%; }#two { position: fixed; top: 20%; left: 20%; }#three { position: fixed; bottom: 2em; right: 2em; }#outer { margin-bottom: 30em; }Now take a look at Figure 16.11, which applies those styles to the HTML file fromListing 16.6. Where did boxes one and three go? Well, they’re offset from the right orPage Layout in CSS 28716FIGURE 16.10Percentages used toabsolutely place boxes, displayed inNetscape 6.It’s entirely possible to position a box off the visible part of the page. Forexample, if you use a value of -1000px for left and -800px for top, the boxwill probably be displaced completely off the page. Such a box still “exists”but just won’t be seen. This problem is especially likely when using fixedpositioning and values for right or bottom, based on how browsers interpretright and bottom offsets, as described next.21 0672324091 ch16 6/13/02 10:41 AM Page 287Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.bottom somewhere. But because a Web page could (theoretically) scroll infinitely ineither direction, they’re offset to 0% of infinity, or 2em from the corner of infinity andinfinity. In other words, they’re fixed out someplace they’ll never be seen.288 Hour 16FIGURE 16.11Fixed positioning is often fraught with trouble, as in Netscape 6.Not all browsers will do it this way; Internet Explorer will position them according to thecurrent width of the viewing window. But because of these irregularities, I recommendusing fixed positioning only when setting the top and left properties.Floating ContentAnother way to place content within the page layout is to float it. Floating boxes move toone side or another according to the value of the float property, and other content flowsaround them in a liquid fashion. The clear property can be used to indicate when therest of the content should stop flowing around the floating box.An example of floating content can be seen in Figure 16.12; the picture is positioned onthe left, and the subsequent text content wraps around it on the right side and then flowsback out to the full width when the picture ends. (I’ll present the HTML and style sheetfor this page shortly.)21 0672324091 ch16 6/13/02 10:41 AM Page 288Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.This effect should be familiar to experienced HTML developers who have used thealign attribute on <img> or <table> tags to position floating content on either side ofthe page layout. The clear attribute on the <br> tag has been used to control when thefloating should end. The CSS properties float and clear can be used on any HTMLelements and therefore greatly extend the types of content that can be set to float or tostop flowing.Floating content is especially useful for pictures (with or without captions), pull quotes,and sidebar text.The float PropertyThe values for the float property are shown in Table 16.3; the default value is none,meaning that the box and subsequent content are laid out according to the normal flow.TABLE 16.3 Values for the float PropertyValue Effectleft The box moves to the left, and text flows around the right side.none The box doesn’t move, and text is not flowed around it.right The box moves to the right, and text flows around the left side.inherit Use the float value of the containing box.Page Layout in CSS 28916FIGURE 16.12Floating content to the left.21 0672324091 ch16 6/13/02 10:41 AM Page 289Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.When a box is floated, it is positioned within its containing box’s content section. Unlikeabsolute positioning, the floating box remains within the margin, border, and padding ofthe containing box; it simply moves to the right or left side as appropriate. Any subse-quent content is placed alongside the floating box for the length of that box.The source for the page in Figure 16.12 is shown in Listing 16.11. The paragraphshave id attributes so that you can refer to them later when setting rules using the clearproperty.LISTING 16.11 An HTML File with a Picture That Will Be Floated<! floats-16.11.html ><html><head><title>Demonstration of floating elements</title><style type=”text/css”>body { font-family: Verdana, sans-serif; }#outer { border: 3px solid black; padding: 1em;background-color: white; margin: 1em; }#inner { font-style: italic; }</style><link type=”text/css” rel=”stylesheet”href=”floats-16.11.css”></head><body><div id=”outer”><h1>Kim</h1><div id=”inner”><img src=”kim.jpg” alt=”[Kim]”><br> Kim</div><p id=”a”>This is a picture of Kim, a Tibetan Mastiff.</p><p id=”b”>Tibetan Mastiffs are a rare breed of dog, and asthe name indicates, they are originally fromTibet.</p><p id=”c”>Kim’s full name is Drokkytshang Nying Chhem-Po,which means “Brave,” or literally “Big Heart.”He was born on Christmas Day, 1989.</p><p id=”d”>Kim loves to sleep, eat, sleep, eat, and sleep.His siblings are Angie, Ketra, and Nying. Hewas born in England, but currently resides inCalifornia.</p></div></body></html>The screenshot in Figure 16.3 was created by adding the following line to the embeddedstyle sheet:#inner { float: left; }290 Hour 1621 0672324091 ch16 6/13/02 10:41 AM Page 290Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.To place the dog’s picture on the right side of the text, you can simply change that rule toread float: right instead. This is shown in Figure 16.13.Page Layout in CSS 29116FIGURE 16.13Floating the content to the right.The clear PropertyTo stop subsequent text from flowing around a floating box, you can set the clear prop-erty on the first element you don’t want to flow. This will move that element down farenough so that it won’t be wrapped around the floating box. This effectively increases the top margin of the element with the clear property on it by an amount calculated by thebrowser to provide enough space to make it past the floating box.The values for clear are shown in Table 16.4; naturally, the default value is none. Othervalues specify whether the content should stop the flow around all floating boxes or onlyboxes on either the left or right side.Other properties can be set on floated elements, of course, and some of themost useful are the margin properties, which can be used to affect how closesubsequent content will flow. For example, margin-left on a right-floatingelement will keep the flowing text at a respectable distance.21 0672324091 ch16 6/13/02 10:41 AM Page 291Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.[...]... there are gaps in the sequence 316 Hour 17 LISTING 17.10 Style Sheet to Change the Order of Layering /* layers-17.10 .css */ #name { z-index: 2; } #name2 { z-index: 1; } #kimpic { z-index: 10; } #text1 { z-index: 15; } Applying this style sheet to the HTML page in Listing 17.9 results in the layering order shown in Figure 17.13 FIGURE 17.13 The layers are now in the desired order Replacing HTML Layout... Advanced CSS Layout LISTING 17.1 301 Continued SAMS Teach Yourself Cascading Style Sheets in 24 Hours, written by IMI’s co-founder and Chief Technologist, Kynn Bartlett, was published recently and is available at finer bookstores everywhere Add CSS skills to your repertoire; pick up a copy today! The intent of the embedded style sheet within Listing 17.1... The constraints for width are set using the min-width and max-width properties; for height, the values are min-height and max-height Listing 17.5 is a style sheet that sets constraints on the boxes in Listing 17.1 LISTING 17.5 A Style Sheet to Constrain the Maximum and Minimum Sizes of Display Boxes /* sizes-17.5 .css */ #banner { height: 5.5em; } #menu { min-width: 200px; width: 5%; } #headline { width:... flows around the floating box, wrapping around the outer margin The clear property can be used to move content down the page until it is no longer flowing Browser Support Report Card CSS Feature Grade Notes Relative positioning B+ Unreliable in Netscape 4 Absolute positioning B+ Unreliable in Netscape 4 Fixed positioning B- Unreliable in Netscape 4, unsupported in Internet Explorer (Windows) Offsets based... Layout Tables with CSS Rules One of the ultimate goals many people have in learning CSS is to fully separate content from presentation, and that includes the layout presentation Positioning CSS, floating and flowing content, layers, and content sizing can all be used in combination to remove markup from your HTML pages Advanced CSS Layout 317 Why replace your tables with CSS? That’s a good... measurements inherit Use the value of clip set on the containing box When using the rect() function to define a clipping area, you’re defining a sub-box relative to the display box The values top, right, bottom, and left are measurements that define where each edge begins, relative to the upper left corner of the box The easiest way to think of these values is to consider them a pair of points, the first in. .. recommend using CSS for layout, but only cautiously and only after lots of testing My own personal site doesn’t use CSS layout, although this book’s site does, at http://CSSin24hours.com/ My personal site is in good company, though; the W3C’s homepage (http://w3.org/) also uses tables for layout! To update an existing page from tables to CSS, you’ll first need to do some thinking and planning What I’ve... href=”wea.html”>Weather Idyll Mountain News Welcome Laura Bishop Idyll Mountain Internet is pleased to introduce our newest employee, Laura Bishop, who is actually not new to IMI at all! Laura worked part-time for Idyll Mountain in 1996 She rejoined us in April 2002 as a Site Maintenance Specialist, supporting our Web clients ... what you learned this hour If you want to test yourself, skip this next listing and come back to it in the activity The style sheet I used to create the layout in Figure 16.2 is shown in Listing 16.12 294 Hour 16 LISTING 16.12 The Style Sheet for the Layout Shown in Figure 16.2 /* bookstore-16.12 .css */ body { font-family: Arial, sans-serif; margin: 0px; padding: 0px; background-color: green; } h1, h2,... pixels of margin on each side, 40 pixels of padding, and 10 pixels of border The box width of this element is 500 pixels The boxes are displayed properly when viewed by Internet Explorer, as seen in Figure 17.7 Advanced CSS Layout 307 FIGURE 17.7 The workaround has solved the problem in Internet Explorer 17 This bug was fixed in Internet Explorer 6 for Windows; however, . within its containing box’s content section. Unlikeabsolute positioning, the floating box remains within the margin, border, and padding ofthe containing. (theoretically) scroll infinitely in either direction, they’re offset to 0% of infinity, or 2em from the corner of infinity andinfinity. In other words, they’re
- Xem thêm -

Xem thêm: Tài liệu Sams Teach Yourself CSS in 24 Hours- P7 ppt, Tài liệu Sams Teach Yourself CSS in 24 Hours- P7 ppt, Tài liệu Sams Teach Yourself CSS in 24 Hours- P7 ppt

Từ khóa liên quan

Mục lục

Xem thêm

Gợi ý tài liệu liên quan cho bạn