Tài liệu Pro CSS Techniques- P4 docx

Figure 7-7. Problem solved! If we resize the text somewhat, you’ll notice that the page reflows accordingly, as shown in Figure 7-8. Figure 7-8. Same page with resized text CHAPTER 7 ■ CSS LAYOUTS122 732Xch07FINAL.qxd 11/1/06 1:59 PM Page 122 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. The addition of the footer (admittedly, a footer with no actual content), which is then given the clear:both; CSS property/value pairing, solves the problem of the outer element collapsing underneath these floated items—but it’s including additional markup for the sake of it, some might argue. There are ways that you can avoid inserting seemingly superfluous markup like this and still manage floated items effectively, something which we cover later in this chapter. The main issue with this fixed-width layout is still that it won’t allow text to resize com- pletely. Eventually you’ll run out of horizontal room for the text. So with that in mind, let’s look at a more flexible CSS layout. The Liquid Layout As its name suggests, a liquid layout is one that reflows to fill the available space. Some people swear by this layout as it gives the person viewing your site control (“I want my window this size”). However, this layout has its own dangers: • If the window is resized to maximum, reading large blocks of text can become difficult; scanning from the end of a line to a new line is not easy. • If the window is sized down quite a lot, elements of the page may collapse in on each other and overlap in all sorts of weird and not-so-wonderful ways if you don’t do your math correctly. In short, the flexibility that a liquid layout offers may come at a price, depending on how your site visitors set their browsers. But caveat emptor! Here’s the CSS for a liquid layout of the same page design. Rather than set a specific width for the wrapper container, we’ve specified a margin in the body element (40 pixels at each side). Because a block-level element will take up 100 percent of the available width by default, the wrapper will stretch to fill whatever size the browser window is; there’s no need to specify a width here. CHAPTER 7 ■ CSS LAYOUTS 123 732Xch07FINAL.qxd 11/1/06 1:59 PM Page 123 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. body { margin:10px 40px; padding:0; text-align:center; background: #f0f0f0 url(body-bg.gif) repeat-x top; } #wrapper { text-align:left; background:#dade75; border:1px solid silver; } #header { background: #272727 url(header-bg.gif) repeat-x bottom left; padding:10px 15px 10px 13px; } #content-wrapper { background:#fff url(nav-to-content-trans.gif) repeat-y left; float:right; width:75%; } #content-inner { padding:5px 15px 0 15px; } #navigation { width:25%; float:left; padding-top:15px; } #footer { clear:both; } See Figure 7.9 for the result, at various widths. CHAPTER 7 ■ CSS LAYOUTS124 732Xch07FINAL.qxd 11/1/06 1:59 PM Page 124 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Figure 7-9. Liquid layout at different sizes The width of the navigation and the content add up to 100 percent (75 percent + 25 percent). However, if you were to add a border to either of these elements (even a one-pixel border), you wouldn’t have enough room for the two elements to sit side by side, since they are floated. One item would wrap underneath the other (as shown in Figure 7-10). Try not to mix and match in this way or, if you must, shave off the percentage values just a little—perhaps 24% and 74%— and try resizing the screen to see what effect this has. CHAPTER 7 ■ CSS LAYOUTS 125 732Xch07FINAL.qxd 11/1/06 1:59 PM Page 125 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Figure 7-10. Be careful when adding widths of floated items; if they add up to more than 100 percent, wrapping like this can occur. ■ Tip You may have wondered why we included both a content-wrapper and a content-inner div — why not just one container for the content? This is a simple workaround to a problem you’ll encounter when calculating widths of elements, especially when using a flexible design. When you’re adding padding to an area, such as around the text in the main content, padding adds to the widths you’ve defined and may take the total over 100 percent. It is often much less problematic to use an outer container on which you specify the width, and then apply the padding, border, or margin properties on the inner container. That way, these properties can work independently and won’t cause issues with calculating widths. Purists might argue that adding another div is a waste of markup, but we feel it is a minor inconvenience to make the CSS work cross-browser. As long as you use sensible id attributes for these div s, it’s a highly practical compromise. The issue is related to how browsers understand the Box Model, which defines how the width of content in a block-level element is calculated and rendered alongside borders, margins, and padding widths. Earlier versions of IE got the calculation wrong, thus causing untold problems for cross-browser designs. We dis- cuss the Box Model problem—and the hack that solves a lot of the problems associated with it—in Chapter 6 (we also present a hack-less alternative). Elastic Layouts As you learned from the previous example, with the liquid layout the browser window is stretched wide and the content becomes difficult to read. What you really want is a page width that works CHAPTER 7 ■ CSS LAYOUTS126 732Xch07FINAL.qxd 11/1/06 1:59 PM Page 126 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. alongside the font size so that the two aspects are linked in some way. If the font size is reduced, the line length—and along with it the page width—comes down accordingly, and vice versa. Thankfully, there is a method for accomplishing this goal: the elastic layout. In an elastic layout, when you change the font size, other elements scale up or down accordingly. You use em measurements rather than pixels or percentages. An em is directly related to the size of the typeface, so if you specify a width for the wrapper in terms of ems, when you increase the font size the width of the wrapper goes up as well. The first step is to set a sensible baseline. On most browsers, the default font size is 16 pix- els. If you can knock the default down to 10 pixels in the CSS for the body, calculations will be a lot easier from that point on. You can do this by setting font-size in the body to 62.5% (62.5 percent of 16 = 10): body { font-size:62.5%; } Then, knowing that each em represents 10 pixels at the default font size, you can use ems for subsequent measurements. For example: h1 { font-size:2em } would give you level 2 headings of 20 pixels at the default font size, but these headings would scale up if the user prefers. Let’s look at the amended style sheet for the elastic layout. As before, the HTML is unchanged; only the CSS is different. The significant changes are highlighted in bold: body { margin:0; padding:0; text-align:center; background: #f0f0f0 url(body-bg.gif) repeat-x top; font-size:62.5%; } #wrapper { font-size:1.4em; width:56em; margin:10px auto; text-align:left; background:#dade75; border:1px solid silver; } #header { background: #272727 url(header-bg.gif) repeat-x bottom left; padding:10px 15px 10px 13px; } #content-wrapper { float:right; background:#fff url(nav-to-content-trans.gif) repeat-y left; CHAPTER 7 ■ CSS LAYOUTS 127 732Xch07FINAL.qxd 11/1/06 1:59 PM Page 127 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. width:40em; } #content-inner { padding:5px 15px 0 15px; } #navigation { width:15em; float:left; padding-top:15px; } #footer { clear:both; } The effect is best demonstrated with another comparative screen shot (Figure 7-11). This one shows the page in IE 6/Win set at the five font-size intervals available in the View ➤ Text Size menu. Figure 7-11. Elastic design in IE at five font sizes CHAPTER 7 ■ CSS LAYOUTS128 732Xch07FINAL.qxd 11/1/06 1:59 PM Page 128 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. The two-column widths scale up, as does the text content; the only item that does not scale up is the heading, as this is a fixed-width img element. Given that, you could just as easily use scaling text for that area. When Elastic Layouts Attack! Predictably, there’s another gotcha to mention now. An elastic layout is perhaps too helpful to users. What if they scale things up so much that the page doesn’t fit in the browser window? Silly them, you might be tempted to say, but there will be times when you’ll want to take back some control. Here’s where a hybrid layout comes in. Elastic Layout: Constrained In the constrained version—a slight tweak of the previous version—you use ems for sizing the text and the widths of the wrapper, navigation, and content divs. However, you stop them from growing too big by setting a percentage for the max-width property. For the wrapper div, let’s tell the browser that the maximum it should go up is 95 percent of the browser viewport. The navi- gation and content are constrained to 25% and 75%, respectively. Here is the amended CSS: body { margin:0; padding:0; text-align:center; background: #f0f0f0 url(body-bg.gif) repeat-x top; font-size:62.5%; } #wrapper { font-size:1.4em; width:56em; max-width:95%; margin:10px auto; text-align:left; background:#dade75; border:1px solid silver; } CHAPTER 7 ■ CSS LAYOUTS 129 732Xch07FINAL.qxd 11/1/06 1:59 PM Page 129 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. #header { background: #272727 url(header-bg.gif) repeat-x bottom left; padding:10px 15px 10px 13px; } #content-wrapper { float:right; background:#fff url(nav-to-content-trans.gif) repeat-y left; width:73%; max-width:73%; } #content-inner { padding:5px 15px 0 15px; } #navigation { width:25%; max-width:25%; float:left; padding-top:15px; } #footer{ clear:both; } ■ Note Notice that the two widths are 73% and 25% for the content and the navigation, respectively. Choos- ing 75% and 25% causes IE/Win to show the unsightly wrapping effect demonstrated earlier in this chapter. For best effect, try this version and compare it to the previous version using a browser such as Firefox, Netscape 7 or 8, or Opera. Internet Explorer? Ah, well, this will only work if you are using IE 7 or above. Earlier versions do not support the max-width CSS property. However, IE 6 and earlier also don’t offer limitless scope for scaling fonts up like other browsers do, so you probably don’t need to worry about this problem too much. You aren’t likely to be able to scale the page design up so that it’s bigger than the browser window anyway. Figure 7-12 shows the web page at the default size, then notched up a bit in the second screen. In the third screen, the width goes no further but the text scales up further within the upper boundaries that have been set. CHAPTER 7 ■ CSS LAYOUTS130 732Xch07FINAL.qxd 11/1/06 1:59 PM Page 130 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Figure 7-12. Elastic design with an upper width constraint CHAPTER 7 ■ CSS LAYOUTS 131 732Xch07FINAL.qxd 11/1/06 1:59 PM Page 131 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... underlying construction, then the style switcher approach is not really relevant This approach—using CSS attributes to show or hide portions of a page—is most effective and appropriate when you want to have a single-page template that adapts to different circumstances, and you’re most likely to use it when implementing in a CMS or using the templating feature in programs like Dreamweaver or GoLive It’s perfectly... his site, Simon uses a combination of • CSS (for the default styling options) • JavaScript (to check for window resize events) • DOM scripting (JavaScript that dynamically changes CSS display property values of the affected elements) Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 732Xch07FINAL.qxd 11/1/06 1:59 PM Page 133 CHAPTER 7 ■ CSS LAYOUTS ■ Note It is possible to use...732Xch07FINAL.qxd 132 11/1/06 1:59 PM Page 132 CHAPTER 7 ■ CSS LAYOUTS ■ Just as you can use the max-width CSS property to set upper width constraints, you can also apply Tip limits the other way using the min-width property Try amending the code and see the effect for yourself Resolution-Dependent Layouts An interesting technique that... www.verypdf.com to remove this watermark 732Xch07FINAL.qxd 11/1/06 1:59 PM Page 149 CHAPTER 7 ■ CSS LAYOUTS Managing Floats Earlier in this chapter we mentioned that one of the problems with floating blocks of content in CSS is that the parent container collapses down behind the floated content, as shown in Figure 7-25 What you probably wanted was an effect more like that shown in Figure 7-26 Figure 7-25 Collapsed... a few ways of dealing with this issue Earlier we suggested adding some CSS to the footer div (a footer with no content): #footer { clear:both; } Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 149 732Xch07FINAL.qxd 150 11/1/06 1:59 PM Page 150 CHAPTER 7 ■ CSS LAYOUTS When you use the clear property in CSS, you are telling the user agent or browser to no longer honor previous... watermark 135 732Xch07FINAL.qxd 136 11/1/06 1:59 PM Page 136 CHAPTER 7 ■ CSS LAYOUTS It is a mistake to assume that each page needs to be built differently Using CSS, you can create a page structure that contains all the necessary hooks Think of placeholders in your CMS or editable areas in a template on something like Dreamweaver, but use CSS to display or hide sections depending on what type of page you... or may not need to populate with content and use CSS to decide what gets shown Wave goodbye to CMS solutions that require different page templates for what may be fairly trivial cosmetic tweaks and let CSS take the strain Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 732Xch07FINAL.qxd 11/1/06 1:59 PM Page 145 CHAPTER 7 ■ CSS LAYOUTS Faux Columns: Using Background Images... background image (which will be tiled) In the CSS, we pick an appropriate element to attach it to An easy one is the outermost wrapper div; everything else sits inside this container and will appear to sit over the top of this background image The image will be • Aligned to the right of the container element • Repeated along the y-axis Here’s the shorthand CSS that achieves this: #wrapper { background:#fff... layout Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 137 732Xch07FINAL.qxd 138 11/1/06 1:59 PM Page 138 CHAPTER 7 ■ CSS LAYOUTS Fictional TravelCo ™... 11/1/06 1:59 PM Page 141 CHAPTER 7 ■ CSS LAYOUTS Figure 7-17 This page has ignored the contextual styles applied to the three content areas So, make sure that you have the correct id in the tag (cols3) and the browser will know which piece of the CSS it should use to render the web page ■ Note We’ve used cols3 as the id rather than 3cols—which would be a more appropriate name— because an id cannot . no actual content), which is then given the clear:both; CSS property/value pairing, solves the problem of the outer element collapsing underneath these. wrong, thus causing untold problems for cross-browser designs. We dis- cuss the Box Model problem—and the hack that solves a lot of the problems associated with