User:Bartlett/18
./ ADD NAME=CH18.HTML
Hour 18. Box Sizing and Offset
What You'll Learn in This Hour:
|
./ ADD NAME=CH18LEV1SEC1.HTML
Sizing Content
When laying out a page, it's not always enough to specify only where content should be placed, as you can do with the float property (or the positioning properties, which you'll learn about in this hour and the next). To create effective layouts, you need to set the size of display boxes. In HTML, this is done with the height and width attributes; unsurprisingly, those are the names of the CSS properties that control a content box's dimensions.
To illustrate the use of the width and height attributes, I've created a sample HTML page that is used use for most of this hour. You can see this in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18ex01 Listing 18.1], or you can download it from the book's website.
Listing 18.1. This HTML Page Has Unsized Boxes
<!-- sizes-18.1.html --><br /><html><br /><head><br /><title>Tucson Valley News</title><br /><style type="text/css"><br />body { font-family: Verdana, sans-serif; }<br />h3 { font-style: oblique;<br />font-weight: normal; }<br />#nav { float: right; }<br />#nav ul { padding-left: 0; }<br />#nav li { display: block; }<br /><br />div { border: 1px solid black; margin: 1em; }<br /></style><br /></head><br /><body><br /><div id="banner"><br /><h1>Tucson Valley News</h1><br /></div><br /><div id="nav"><br /><h4>Tucson Valley News Quick Navigation<br />Links</h4><br /><ul><br /><li><a href="/breaking/">Breaking<br />News</a></li><br /><li><a href="/current/">Current<br />Issue</a></li><br /><li><a href="/editorial/">Editorial<br />Page</a></li><br /><li><a href="/subscribe/">Subscriptions<br /></a></li><br /></ul><br /></div><br /><div id="main"><br /><h2>Desert Museum hires webmaster</h2><br /><h3>Congrats to Liz Bartlett</h3><br /><p>The <a href="http://www.desertmuseum.org/"><br />Arizona-Sonora Desert Museum</a> has hired<br /><a href="http://www.khyri.com/">Liz<br />Bartlett</a> to be their new webmaster.</p><br /><p>Founded in 1952 by William Carr and Arthur<br />Pack, the Desert Museum is a private, nonprofit<br />organization dedicated to the conservation<br />of the Sonoran Desert.</p><br /><p>Liz Bartlett has over 11 years' experience in<br />web design, and was a founder of Idyll<br />Mountain Internet in 1995. She now lives in<br />Tucson with her husband Kynn.</p><br /></div><br /></body><br /></html><br /> |
The intent of the embedded style sheet within [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18ex01 Listing 18.1] is to create a very simple "newspaper" layout, with a headline at the top, a navigation menu at the right, and an article to the left and middle. To help you keep track of the display boxes involved, CSS rules add borders and margins to each
headline in the navigation bar expands that box out to fill the available space. It's not the best design, especially because the isn't line-wrapping nicely.
Figure 18.1. The browser tries to determine the size and placement of each box, and doesn't do very well. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/18fig01_alt.jpg [View full size image]]File:18fig01.jpg
The width and height Properties
The width and height Properties
To correct the problems displayed in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18fig01 Figure 18.1], you need to use the width and height properties. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch17.html#ch17 Hour 17], "Styling Tables," briefly introduced width, and in this hour you'll learn to use it with all block content, as well as with its fraternal twin, height.
A CSS display box actually has two widths: the content width and the box width. The content width is, as you might imagine, the width of the box's content area; it is the area where the box's content exists, within the padding, the border, and the margin; this is what's set by the width property. The box width is the width of the entire box, including the left and right padding, the left and right border, and the left and right margin, as well as the content width. You can see this visually displayed in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18fig02 Figure 18.2].
File:18fig02.jpg
The content height and box height are determined in the same way. The CSS properties width and height are used to control the size of the content width; the box width and box height can't be set directly. Instead, you can control the box width and height by setting appropriate padding, border, and margin values that add to the content width and height.
Values for width and height can be measurements, such as 3em or 5px. They can also be percentage values, such as 20%. The percentage is based on the height or width of the parent box's content area. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18ex02 Listing 18.2] shows a style sheet that fixes the text wrap problem from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18fig01 Figure 18.1] by using height and width properties to help lay out the page.
Listing 18.2. Setting height and width Values via CSS
#banner { width: 80%; height: 4em; }<br />#nav { width: 20%; }<br />#nav { height: 15em; }<br />#main { width: 60%; }<br /> |
This sets a height and width on the banner, making it at least 4ems tall, and with a width of 80% of the available screen space. The navigation bar is 20% wide, and the height is 10ems. The main article space is 60% wide.
In [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18fig03 Figure 18.3], you can see the result of applying this style sheet to the HTML page of [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18ex01 Listing 18.1]. Because a width has been set on the navigation bar, the text is forced to wrap. Also, there is extra white space at the bottom of the navigation bar; the height has been set, and the space is reserved even if the content does not fill that space. There is no height for the #main
You should notice one more thing here. The #banner element is 80% wide, and the #nav element is 20% wide. You'd think they'd line up, right? But look carefully at [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18fig03 Figure 18.3]. If the two boxes were right on top of each other, they'd intersect. Why is that?
The width property sets only the content width, not the actual size taken up by the box. The true box width includes the margin (which is 1em in this example), the border (which is 1px) and any margins set. So the #banner's content width may be 80%, but the box width is 80% + 2em + 2pxremember to add in both the left and right sides!whereas the #nav element is 20% + 2em + 2px. Together they add up to 100% of the screen, plus 4em, plus 4px. Oops.
The Internet Explorer width Bug
Unfortunately, previous versions of Internet Explorer for both Windows and Macintosh have a bug that miscalculates content width. Internet Explorer prior to version 6 doesn't consider the content width to be just the width of the content area of a box; instead, it includes the padding and the border width, as well. This is shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18fig04 Figure 18.4].
File:18fig04.jpg
This bug was fixed in Internet Explorer 6; however, to get correct width calculations, you need to use a correct DOCTYPE statement at the beginning of your document. If you don't use a DOCTYPE statement, IE 6 displays the page using a backward-compatible method identical to IE 5, which means the buggy version. For more on DOCTYPE switching, see http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp. Keep in mind that some Internet Explorer users are still using Internet Explorer 5.0 or 5.5, so the type of workaround described in this hour may still be necessary on your site even if you use the correct DOCTYPE.
Minimum and Maximum Dimensions
Sometimes you might not want to set specific sizes for dimensions; instead, you might want more flexible designs that allow something to range in size between two values. A constraint is a value beyond which a box isn't allowed to grow or shrink; if the size is smaller than the minimum constraint, the size is that minimum, and if it's larger than the maximum constraint, the size is that maximum value.
For example, you might want a navigation bar to be as wide as 20% of the screen most of the time, but if the browser's window is only 500 pixels across, this may be too small to display your navigation links. A minimum size of 10em would therefore be a constraint placed on the width.
The constraints for width are set with the min-width and max-width properties; for height, the values are min-height and max-height. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18ex03 Listing 18.3] is a style sheet that sets constraints on the boxes in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18ex01 Listing 18.1].
Listing 18.3. A Style Sheet to Constrain the Maximum and Minimum Sizes of Display Boxes
/* sizes-18.3.css */<br />#banner { width: 60%;<br />min-width: 500px;<br />min-height: 5em;}<br />#nav { width: 30%; min-width: 200px; }<br />#nav { max-height: 15em; }<br />#main { min-width: 300px;<br />width: 50%;<br />max-width: 600px; }<br /> |
You can see the results of using this style sheet in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18fig05 Figure 18.5].
This style sheet gives the navigation menu a width of 30%, which works decently enough unless the browser window is small. In such cases, the minimum width is set to 200px. The #banner is 60% of the space available, or a minumum of 500 pixels wide; it is also a minimum height of 5em, although there is no extra content to fill in that space, which is just left blank. The #main section varies between 300 and 600 pixels, based on the width of the browser window. If the browser display space is less than 600 pixels, #main is 300px (the min-width value); between 600 and 1200 pixels wide, #main is 50% of the display space; and if the browser's display area is more than 1200 pixels wide, the max-width constrains it to 600px and no more.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18fig06 Figure 18.6] demonstrates what happens when the display area changesin this case, the browser window has been decreased to about two thirds of the screen, and the minimum values are being used for each window.
./ ADD NAME=CH18LEV1SEC2.HTML
Content Overflow
If a display box's height hasn't been set by the height property, the height is calculated automatically to take up enough room for all the content. But what happens if a height property has been set that doesn't allow enough space for all the content? This creates a situation called overflow. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18ex04 Listing 18.4] is a style sheet specifically designed to create overflow.
Listing 18.4. A Style Sheet Where the Size of the Content Exceeds the Height
/* sizes-18.4.css */<br />#banner { width: 80%; height: 1.5em; }<br />#nav { width: 20%; }<br />#nav { height: 8em; }<br />#main { width: 500px; height: 450px; }<br /> |
As shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18fig07 Figure 18.7], the content of the columns simply spills out the bottom of the box because there's not enough room. This is the default behavior for overflow, but you can change it by using the overflow property.
The overflow Property
To change what happens when a box's content overflows, you can set the overflow property to one of the values shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18table01 Table 18.1]. The default value is visible, which has the effect shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18fig07 Figure 18.7].
| Value | Effect |
| auto | The browser determines what to do with overflowing content, choosing either scroll or visible. |
| hidden | Overflowing content is clipped and not displayed. |
| scroll | A scrollable box is used to provide access to all content. |
| visible | The overflowing content spills out of the box. |
| inherit | Use the value of overflow set on the containing box. |
The scroll value provides scrollbars at the edges of the display box that let the user access all the content. The hidden value prevents that content from being displayed, so it should be used with care. A value of auto leaves the decision up to the browser; because this can vary from browser to browser, I advise against relying on it.
Two examples of the overflow property are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18ex05 Listing 18.5], a style sheet that sets one column to scroll, and the other to hidden.
Listing 18.5. A Style Sheet Using the overflow Property
/* sizes-18.5.css */<br />#banner { width: 80%; }<br />#nav { width: 20%; }<br />#nav { height: 8em;<br />overflow: scroll; }<br />#main { width: 500px; height: 300px;<br />overflow: hidden; }<br /> |
As you can see in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18fig08 Figure 18.8], a scrollbar gives access to the content in the menu bar. How do you see the content in the left column? You don't. Only the content that fits in the box is visible. This is known as clipping, a term that refers to cutting away (and not displaying) all the extra content that won't fit. To prevent your content from being lost to clipping, you can avoid using overflow: hidden and instead set overflow: scroll on elements that might exceed the space you've allocated.
| Try it Yourself: Create Scrollable Panels with CSS
One of the more controversial HTML tags has historically been <frame>, which enables you to make distinct panels for content, which can be scrolled separately from the rest of the page. The <frame> tag (and its sibling <iframe>) is considered harmful by some web development gurus because of accessibility problems and other perceived flaws. Using what you learned this hour, you can now make separately scrollable sections of your web page without using <frame> or <iframe>. Follow these steps:
|
Relative Positioning
CSS offers several ways to position boxes on the screen. You've already learned about the float property in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch15.html#ch15 Hour 15], "Alignment." You can also use the position property to designate a box's location on the screen.
A box that has been placed according to relative positioning has been located relative to the position in which that box would normally appear, modified by an offset. This offset is designated by the top, left, right, and bottom properties.
You declare a box to be relatively placed by setting the position property on it with a value of relative. The possible values for position are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18table02 Table 18.2].
| Value | Effect |
| absolute | Position the box relative to the containing box. |
| fixed | Position the box relative to the containing box, and don't move it even if the page scrolls. |
| relative | Position the box relative to its normal position. |
| static | Position the box where it should normally be placed. |
| inherit | Use the position value of the containing box. |
You'll learn about the position values absolute and fixed in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch19.html#ch19 Hour 19], "Absolute and Fixed Positioning." The value static simply tells the browser to not apply any special positioning and to ignore the four offset values.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18ex06 Listing 18.6] is an HTML page with an embedded style sheet to relatively position one of the boxes outside of its normal position.
Listing 18.6. Relative Positioning Shown via a Style Sheet
<!-- relative-18.6.html --><br /><html><br /><head><br /><title>Three Boxes in a Row</title><br /><style type="text/css"><br />.demobox {<br />border: 3px solid black; width: 8em;<br />font-family: Verdana, sans-serif;<br />background-color: white;<br />padding: 1em; margin: 0.5em; }<br />#mars { position: relative;<br />left: 5em; top: 2em; }<br /></style><br /></head><br /><body><br /><div class="demobox" id="earth"><br />Earth</div><br /><div class="demobox" id="mars"><br />Mars</div><br /><div class="demobox" id="jupiter"><br />Jupiter</div><br /></body><br /></html><br /> |
As shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18fig09 Figure 18.9], the space that would normally be taken up by the box has still been set aside for it, although the box itself is now located 5 ems to the right and 2 ems down from where it would normally be.
File:18fig09.jpg
The top, right, bottom, and left Properties
As shown in the previous example, the top and left properties can be used to set the distance by which a relatively positioned box is placed, with respect to the static position. 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 [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18table03 Table 18.3]. The default value is auto, which means that it is up to the browser to determine where something should be placedwhich is to say it places the box where it belongs according to normal (static) flow.
| 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 offsets 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 need to remember this when placing boxes. Positive values are toward the middle of the box, and negative are away from the middle.
You can also use negative values to move a box away from the center of its normal location. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18ex07 Listing 18.7] is a style sheet that can be used to position the planet-named boxes from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18ex06 Listing 18.6].
Listing 18.7. Moving Boxes with Relative Positioning
.demobox {<br />border: 3px solid black; width: 8em;<br />font-family: Verdana, sans-serif;<br />background-color: white;<br />padding: 1em; margin: 0.5em; }<br />#earth {<br />position: relative;<br />top: -2em; right: -5em; }<br />#mars {<br />left: 5em; top: 2em; }<br />#jupiter {<br />position: relative;<br />left: 10em; }<br /> |
The effects of applying [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18ex07 Listing 18.7] to the HTML page of [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18ex06 Listing 18.6] are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18fig10 Figure 18.10]. The Earth box has been moved up and right; in fact, the top of the box is off the screen entirely. Likewise, the Jupiter box has moved far to the rightremember that the left value moves the box to the right when positive. A horizontal scroll bar has appeared for Jupiter; you can scroll to the right to see the whole box, even though you can't scroll up to see the Earth box.
File:18fig10.jpg
The Mars box didn't move this time. Why not? Because there is no position property for #mars in this style sheet, the left and top values are ignored. The default value for position is static, and unless you set position: relative, the box isn't offset.
./ ADD NAME=CH18LEV1SEC3.HTML Summary
The CSS language provides a number of properties for fine-tuning your layout, giving functionality that actually exceeds that of HTML layout tables, such as scrollable display boxes.
These properties include the width and height properties for setting a box's dimensions, as well as the min-width, min-height, max-width, and max-height properties that constrain a box's dimensions.
Content that naturally exceeds the dimensions of its display box is said to have overflowed. The overflow property can be used to determine whether the excess content is shown, clipped, or shown with a scrollbar.
In addition to sizing boxes, you can also move them from their original positions with relative positioning. Setting the position property to relative turns on relative positioning for that box, and the four offset propertiestop, right, bottom, and leftcan be used to adjust the box's location.
./ ADD NAME=CH18LEV1SEC4.HTML Workshop
The workshop contains a Q&A section, quiz questions, and an exercise to help reinforce what you've learned in this hour. If you get stuck, the answers to the quiz can be found after the questions.
Q&A
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18qa1q1a1 Q.] | What's the difference between relative positioning, absolute positioning, and fixed positioning? |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18qa1q1 A.] | Giving a position rule to a box is the way to set all these types of positioning initially, but each is very different in practice. Relative positioning always involves moving a box from its original location, and always reserves the space for that box in the layout. Absolute and fixed positioning, which you'll learn about in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch19.html#ch19 Hour 19], place the box relative to a containing block, not the original position of the box, and neither of these types of positioning reserves the space where the box would normally appear. |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18qa1q2a2 Q.] | When would I use relative positioning instead of absolute or fixed positioning? |
| > | > |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18qa1q2 A.] | Relative positioning is useful if you need to make small changes in the location of a box, such as moving a header a little to the left or adjusting the vertical position of a box. You can also use a position: relative rule without any offset properties to establish a containing box for absolute positioning, as you'll learn in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch19.html#ch19 Hour 19]. In fact, this is probably the most common use for the relative value for position. It's rare to create style sheets that actually use relative positioning for offsets. |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18qa1q3a3 Q.] | You wrote that there's a bug in Internet Explorer 5 related to box dimensions. Do I really need to worry about that in this day and age? |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18qa1q3 A.] | Yes! At least, as of early 2006, Internet Explorer versions 5 and 5.5 are still used by a decent portion of the web-navigating population. You wouldn't want one user in twenty to experience problems on your site, would you? As described in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch03.html#ch03 Hour 3], "Browser Support for CSS," IE 5 and 5.5 are quirky browsers, and require special considerations. The method described in this hourusing two s to set box propertiesis one such approach, and using a browser filter is another. You'll learn about browser filters in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch24.html#ch24 Hour 24], "Troubleshooting and Browser Hacks."
|
Quiz
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18qa2q1a1 1.] | The browser's display window is 500 pixels wide. How wide will an be, assuming it's the first element of the <body> and that the following CSS rule applies to it?
h1 { width: 20%; min-width: 125px;<br />max-width: 200px; }<br /> |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18qa2q2a2 2.] | Which of these rules will make scrollbars on a blockquote?
#
blockquote { height: 175px; scroll: auto; }
|
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18qa2q3a3 3.] | Which of the following best describes relative positioning?
#
Subsequent text is flowed around the positioned box, relative to the box's new left or right location.
|
| > | > |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18qa2q4a4 4.] | Which of these offset declarations moves a display box 20 pixels to the right?
#
right: 20px;
|
Answers
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18qa2q1 1.] | The tag will be 125 pixels wide, the minimum width. The calculated width, 100 pixels (20% of 500), is smaller than the min-width value, so it is increased to the value of min-width. Because it is not larger than the max-width value of 200px, the final size is 125 pixels. |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18qa2q2 2.] | The correct answer is (d). There is no CSS property named scroll, and the height property is necessary or else the content doesn't overflow. |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18qa2q3 3.] | Choice (c) is a description of relative positioning, (a) describes floating content (from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch15.html#ch15 Hour 15]), (b) describes fixed positioning, and (d) defines absolute positioning. (You'll learn about those latter two in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch19.html#ch19 Hour 19].) |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch18qa2q4 4.] | Both (b) and (d) shift a box to the right. Remember that positive offsets are toward the middle of the box, and negative offsets are away from it. |
Exercise
One of the trickier things to understand about relative positioning is that box properties offset in a funny direction. If you want to move something to the right, you set a positive left value, or a negative right value. To move something down, you set the top value. To get a grasp on the way that box offsets always point toward the middle of the box, create a web page with a relatively positioned box and then play with the various options for offset properties. This will be good practice for [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch19.html#ch19 Hour 19] because offset properties are also used with the other possible values for the position property.
./ ADD NAME=CH19.HTML