Part III: CSS for Presentation 306 Absolute Positioning Stacking order Before we close the book on absolute positioning, there is one last related concept that I need to introduce. As we’ve seen, absolutely positioned ele- ments overlap other elements, so it follows that multiple positioned elements have the potential to stack up on one another. By default, elements stack up in the order in which they appear in the document, but you can change the stacking order with the z-index property. Picture the z-axis as a line that runs perpendicular to the page, as though from the tip of your nose, through this page, and out the other side. z-index Values: (number) | auto | inherit Default: auto Applies to: positioned elements Inherits: no The value of the z-index property is a number (positive or negative). The higher the number, the higher the element will appear in the stack. Lower numbers and negative values move the element lower in the stack. Let’s look at an example to make this clear (Figure 15-19). Here are three paragraph elements, each containing a letter image (A, B, and C, respectively) that have been positioned in a way that they overlap on the page. By default, paragraph “C” would appear on top because it appears last in the source. However, by assigning higher z-index values to paragraphs “A” and “B,” we can force them to stack in our preferred order. Note that the values of z-index do not need to be sequential, and they do not relate to anything in particular. All that matters is that higher number values position the element higher in the stack. The markup: <p id="A"><img src="A.gif" alt="A" /></p> <p id="B"><img src="B.gif" alt="B" /></p> <p id="C"><img src="C.gif" alt="C" /></p> The style sheet: #A { z-index: 10; position: absolute; top: 200px; left: 200px; } #B { z-index: 5; position: absolute; top: 225px; left: 175px; } Fixed Positioning Chapter 15, Floating and Positioning 307 #C { z-index: 1; position: absolute; top: 250px; left: 225px; } You can change the stacking order with the z-index property. Higher values stack on top of lower values. By default, elements later in the document stack on top of preceding elements. z-index: 10 z-index: 5 z-index: 1 Figure 15-19. Changing the stacking order with the z-index property. To be honest, the z-index property is not often required for most page lay- outs, but you should know it’s there if you need it. If you want to guarantee that a positioned element always ends up on top, just assign it a very high z-index value, such as: img#essential { z-index: 100; position: absolute; top: 0px; left: 0px; } Fixed Positioning We’ve covered relative and absolute positioning, now it’s time to take on the remaining method: fixed positioning. For the most part, fixed positioning works just like absolute positioning. The significant difference is that the offset values for fixed elements are always relative to the browser window (or other viewport), which means the posi- tioned element stays put even when the rest of the page scrolls. By contrast, you may remember that when you scrolled the JenWARE page in Exercise 15- 2, the award graphic scrolled along with the document—even though it was positioned relative to the initial containing block (equivalent to the browser window). Not so with fixed positioning where the position is, well, fixed. Let’s switch the award graphic on the JenWARE page to fixed positioning to see the difference. WA R N I N G Unfortunately, fixed positioning is not supported in IE for Windows, versions 6 and earler. It is, however, supported in IE7 in Standards mode, so it will be a more reliable positioning method as older IEWin versions fade away. WA R N I N G Unfortunately, fixed positioning is not supported in IE for Windows, versions 6 and earler. It is, however, supported in IE7 in Standards mode, so it will be a more reliable positioning method as older IEWin versions fade away. Part III: CSS for Presentation 308 Fixed Positioning Now you’ve been introduced to all the tools of the trade for CSS-based lay- out: floating and three types of positioning (relative, absolute, and fixed). You should have a good feel for how they work for when we start putting them to use in the various design approaches and templates in Chapter 16. exercise 15-3 | Fixed positioning This should be simple. Open jenville.html (or jenville_2.html) and edit the style rule for the award div to make it fixed rather than absolute . #award { position: fixed; top: 35px; left: 25px; } Save the document and open it in a browser (Windows users, you’ll need to download Firefox or another non-Internet Explorer 6 browser to play along). At first look, it should appear the same as in Exercsise 15-2. However, when you scroll the page, you will see that the award now stays put where we positioned it in the browser window (Figure 15-20). Figure 15-20. The award graphic stays in the same place in the top-left corner of the browser window when the document scrolls. Test Yourself Chapter 15, Floating and Positioning 309 Test Yourself Before we move on, take a moment to see how well you absorbed the prin- ciples in this chapter. Which of the following is not true of floated elements? All floated elements behave as block elements. Floats are positioned against the padding edge (just inside the bor- der) of the containing element. Inline elements flow around a float, but the element box is unchanged. You must provide a width property for floated block elements. Which of these style rules is incorrect? Why? img { float: left; margin: 20px;} img { float: right: width: 120px; height: 80px; } img { float: right; right: 30px; } img { float: left; margin-bottom: 2em; } How do you make sure a “footer” div starts below a floated sidebar? Write the name of the positioning method or methods (static, relative, absolute, or fixed) that best matches each of the following descriptions. Positions the element relative to a containing block. Removes the element from the normal flow. Positions the element relative to the viewport. The positioned element may overlap other content. Positions the element in the normal flow. 1. a. b. c. d. 2. a. b. c. d. 3. 4. a. b. c. d. e. Part III: CSS for Presentation 310 Review: Basic Layout Properties The space the element would have occupied in the normal flow is preserved. The space the element would have occupied in the normal flow is closed up. You can change the stacking order with z-index. Positions the element relative to its original position in the normal flow. Calculate the width of the “sidebar” div element box based on this style rule. div#sidebar { width: 200px; margin: 25px; padding-left: 30px; padding-right: 10px; border: 1px solid #FFF; } Extra credit: What width would you have to provide for Internet Explorer 5 and 5.5 (Windows) to compensate for its box model problem? Review: Basic Layout Properties Here is a summary of the properties covered in this chapter, in alphabetical order. Property Description float Moves the element to the right or left and allows the following text to flow around it. clear Prevents an element from being laid out next to a float. position Specifies the positioning method to be applied to the element top, bottom, right, left Specifies the offset amount from each respective edge. z-index Specifies the order of appearance within a stack of overlapping positioned elements. f. g. h. i. 5. 311 IN THIS CHAPTER Fixed, liquid, and elastic page layouts Two- and three-column layout templates using floats Two- and three-column layout templates using absolute positioning Centering a fixed-width page Now that you understand the principles of moving elements around on the page using CSS floats and positioning, we can put these tools to use in some standard page layouts. This chapter looks at the various approaches to CSS- based web design and provides some simple templates that will get you on your way to building basic two- and three-column web pages. Before we get started, it must be said that there are seemingly endless varia- tions on creating multicolumn layouts with CSS. This chapter is intended to be a “starter kit.” The templates presented here are simplified and may not work for every situation (although I’ve tried to point out the relevant short- comings of each). You may know of better approaches. In fact, because there is so much to be said about CSS page layout, I’ve provided pointers to addi- tional samples and tutorials on the Web. New techniques turn up regularly. Page Layout Strategies Way back in Chapter 3, The Nature of Web Design, we established the fact that there is no way of knowing exactly how wide, skinny, tall, or short a user’s browser window will be. Users may set their browsers to fill the moni- tor at one of the standard resolutions or have them set to some other com- fortable dimension. The precise size of any given web page is an unknown. In addition, there is no way of knowing how large your text will be. You may prefer small tidy text, but a portion of your users will make their text larger, possibly much larger, to make it comfortable to read. Changing text size is likely to have an impact on the layout of your page. Over time, three general page layout approaches have emerged to deal with these inescapable facts. Liquid pages resize along with the browser window. Fixed pages put the content in a page area that stays a specific pixel width regardless of the browser’s dimensions. Finally, elastic pages have areas that get larger or smaller when the text is resized. Let’s look at how each strategy works as well as the reasons for and against using each of them. I’ll also brief- ly introduce zoom layouts that address the needs of users with low vision. PAGE LAYOUT WITH CSS CHAPTER 16 Part III: CSS for Presentation 312 Page Layout Strategies Liquid page design Liquid page layouts (also called fluid layouts) follow the default behavior of the normal flow. In other words, the page area and/or columns within the page are allowed to get wider or narrower to fill the available space in the browser window. There is no attempt to control the width of the content or line breaks—the text is permitted to reflow as required. Figure 16-1 shows W3.org, which is a good example of a liquid layout. Liquid layouts fill the browser window. Content reflows when the browser window and columns resize. www.w3.org Figure 16-1. Example of a liquid layout. Proponents of liquid web pages feel strongly that this is the best formatting method because it is consistent with the nature of the medium. Of course, it has both advantages and disadvantages. Advantages Disadvantages You don’t have to design for a specific monitor resolution. You avoid potentially awkward empty space because the text fills the window. Liquid pages keep with the spirit and nature of the medium. On large monitors, line lengths can get very long and uncomfortable to read. See the sidebar for more information. They are less predictable. Elements may be too spread out or too cramped at extreme browser dimensions. How to create liquid layouts Create a liquid layout by specifying widths in percentage values. You can also not specify a width at all, in which case the width will be set to the default auto setting, and the element will fill the available width of the window or other containing element. Here are a few examples. In this two-column layout (Figure 16-2), the width of each div has been specified as a percentage of the available page width. The main column will always be 70% of the width of the window, and the right column fills 25% (the remaining 5% is used for the margin between the columns), regardless of the window size. Optimal Line Length Line length is a measure of the number of words or characters in a line of text. The rule of thumb is that the optimal line length is 10 to 12 words or between 60 and 75 characters. When line lengths grow too long, the text becomes more difficult to read. Not only is it hard to focus long enough to get to the end of a long line, it is also requires extra effort to find the beginning of the next line again. Line length is at the heart of the debate over which layout technique is superior. In liquid layouts, line lengths might get too long when the browser is sized very wide. In fixed width designs, line lengths may become awkwardly short if the text is sized large within narrow and rigid column widths. The elastic layout introduced later in this chapter, however, offers predictable line lengths even when the text is sized larger. This makes it a popular option for balancing design and accessibility priorities. Optimal Line Length Line length is a measure of the number of words or characters in a line of text. The rule of thumb is that the optimal line length is 10 to 12 words or between 60 and 75 characters. When line lengths grow too long, the text becomes more difficult to read. Not only is it hard to focus long enough to get to the end of a long line, it is also requires extra effort to find the beginning of the next line again. Line length is at the heart of the debate over which layout technique is superior. In liquid layouts, line lengths might get too long when the browser is sized very wide. In fixed width designs, line lengths may become awkwardly short if the text is sized large within narrow and rigid column widths. The elastic layout introduced later in this chapter, however, offers predictable line lengths even when the text is sized larger. This makes it a popular option for balancing design and accessibility priorities. Create a liquid layout by specifying widths in percentages or not at all. Create a liquid layout by specifying widths in percentages or not at all. Page Layout Strategies Chapter 16, Page Layout with CSS 313 div#main { width: 70%; margin-right: 5%; float: left; background: yellow; } div#extras { width: 25%; float: left; background: orange; } 70% 25% 5% 5% 25%70% Figure 16-2. Liquid layout using percentage values. In the example in Figure 16-3, the secondary column on the left is set to a specific pixel width, and the main content area is set to auto and fills the remaining space in the window (I could have also left it unspecified for the same result). Although this layout uses a fixed width for one column, it is still considered liquid because the width of the page is based on the width of the browser window. div#main { width: auto; position: absolute; top: 0; left: 225px; background: yellow; } div#extras { width: 200px; position: absolute; top: 0; left: 0; background: orange; } 200px Resizes to fill browser window 25px 200px Resizes 25px Figure 16-3. Liquid layout combining fixed-width and auto sized columns. Dealing with line lengths Although long line lengths are possible in liquid layouts, it’s certainly a man- ageable situation and not a reason to reject this layout approach. In the vast majority of cases, users have their browsers sized reasonably, that is, somewhere between 800 and 1250 pixels. If your page is two or more Part III: CSS for Presentation 314 Fixed Layouts columns, you’re in luck, because it will be difficult for the line lengths to get too out of hand at these “reasonable” browser widths. Sure, line lengths will change when the browser is resized, and they may not be in the ideal range of 55 to 72 characters per line, but text is unlikely to be unreadable. If your page consists of only one column, I suggest using left and right mar- gins (in the 10 to 20% range, depending on preference) to reduce the resulting line length and also add valuable white space around the text. Finally, you can use the max-width property to limit the width of the content containers. Unfortunately, it is not supported by Internet Explorer (Windows) 6 and earlier, but those versions will eventually fall out of significant use. Fixed Layouts Fixed-width layouts, as the name implies, stay put at a specified pixel width as determined by the designer. This approach is based on traditional guiding principles of graphic design, such as a constant grid, the relationship of page elements, and comfortable line lengths. When you set your page to a specific width, you need to decide a couple of things. First, you need to pick a page width, usually based on common monitor reso- lutions. Most fixed-width web pages as of this writing are designed to fit in an 800 × 600 pixel browser window, although more and more sites are venturing into a (roughly) 1000 pixel page width. You also need to decide where the fixed-width layout should be positioned in the browser window. By default, it stays on the left edge of the browser, with the extra space to the right of it. Some designers opt to center the page, split- ting the extra space over left and right margins, which may make the page look as though it better fills the browser window. Figure 16-4 shows two fixed width layouts. Both use fixed-width pages, but position the content differently in the browser window. 750px 200px 25px 525px 750px 200px 25px 525px Extra space on right #wrapper {width: 750px; position: absolute; margin-left: auto; margin-right: auto; border: 1px solid black; padding: 0px;} #extras {position: absolute; top: 0px; left: 0px; width: 200px; background: orange; } #main {margin-left: 225px; background-color: yellow;} Extra space split on left and right sides Figure 16-4. Examples of fixed layouts (left-aligned and centered). Fixed Layouts Chapter 16, Page Layout with CSS 315 One of the main concerns with using fixed-width layouts is that if the user’s browser window is not as wide as the page, the content on the right edge of the page will not be visible. Although it is possible to scroll horizontally, it may not always be clear that there is more content there in the first place. Take a look at O’Reilly Media’s web site (www.oreilly.com) in Figure 16-5. The page was designed to fill a browser window maximized to a 1024 × 768 moni- tor. Given the nature of the content and the audience it is intended for, it is a completely appropriate design decision. However, the figure on the right shows what a user with an 800 × 600 monitor would see. The entire right column is hidden. Fortunately, O’Reilly uses the right column for interesting, yet non- critical information, so even if it is overlooked, there is no serious harm done. Figure 16-5. Users may miss out on content on the right edge of a fixed layout if the browser is not as wide as the page area. Let’s review the pros and cons of using the fixed-width strategy. Advantages Disadvantages The layout is predictable. It offers better control over line length. Trends come and go; however, it is worth noting that many of the most well-known web designers use fixed-width designs as of this writing. Content on the right edge will be hidden if the browser window is smaller than the page. Text elements still reflow if the user resizes the font size, so it doesn’t guarantee the layout will stay exactly the same. Line lengths may grow awkwardly short at very large text sizes. How to create fixed-width layouts Fixed-width layouts are created by specifying width values in pixel units. Typically, the content of the entire page is put into a div (often named “con- tent,” “container,” “wrapper,” or “page”) that can then be set to a specific pixel width. This div may also be centered in the browser window. Widths of column elements, and even margins and padding, are also specified in pixels. We will see examples of this technique later in this chapter. Fixed-width layouts are created by specifying width values in pixel units. Fixed-width layouts are created by specifying width values in pixel units. . the various approaches to CSS- based web design and provides some simple templates that will get you on your way to building basic two- and three-column web pages. Before we get started, it. to addi- tional samples and tutorials on the Web. New techniques turn up regularly. Page Layout Strategies Way back in Chapter 3, The Nature of Web Design, we established the fact that there. length. Trends come and go; however, it is worth noting that many of the most well-known web designers use fixed-width designs as of this writing. Content on the right edge will be hidden if the browser