Learning Web Design Third Edition- P34 pot

Part III: CSS for Presentation 316 Elastic Layouts Elastic Layouts A third layout approach is growing in popularity because it marries resizable text with predictable line lengths. Elastic (also called jello) layouts expand or contract with the size of the text. If the user makes the text larger, the box that contains it expands proportionally. Likewise, if the user likes her text size very small, the containing box shrinks to fit. The result is that line lengths (in terms of words or characters per line) stay the same regardless of the text size. This is an advantage over liquid layouts where line lengths can get too long, and fixed layouts where very large text may result in awkwardly few charac- ters per line. Figure 16-6 shows the Elastic Lawn design by Patrick Griffiths at CSS Zen Garden (www.csszengarden.com/?cssfile=/063/063.css), an often-referenced example of an elastic layout at work. Notice that when the text size gets big- ger in each sample, so does the content area of the page. However, instead of rewrapping in the larger layout space, the line breaks are the same. 48 em 48 em Line length and line breaks stay the same Figure 16-6. The Elastic Lawn design by Patrick Griffiths at CSS Zen Garden is a classic example of elastic page layout. As any layout approach, elastic layouts come with their own pros and cons: Advantages Disadvantages Provide a consistent layout experience while allowing flexibility in text size. Tighter control over line lengths than liquid and fixed layouts. Images don’t lend themselves to rescaling along with the text and the rest of the layout. The width of the layout might exceed the width of the browser window at largest text sizes. This can be prevented with proper planning and/or the max-width property (unsupported in IE6 and earlier). Elastic Layouts Patrick Griffiths, the creator of Elastic Lawn, has written some good tutorials and demos of elastic layouts, available here: “Elastic Designs” article at A List Apart (alistapart.com/articles/ elastic) Elastic layout demo at HTML Dog (www.htmldog.com/articles/ elasticdesign/demo/) t I P Elastic Layouts Patrick Griffiths, the creator of Elastic Lawn, has written some good tutorials and demos of elastic layouts, available here: “Elastic Designs” article at A List Apart (alistapart.com/articles/ elastic) Elastic layout demo at HTML Dog (www.htmldog.com/articles/ elasticdesign/demo/) t I P N o t e AOL.com also uses an elastic layout (as of this writing), demonstrating that this approach is a viable option for large sites with lots of detailed information on the home page. N o t e AOL.com also uses an elastic layout (as of this writing), demonstrating that this approach is a viable option for large sites with lots of detailed information on the home page. Elastic Layouts Chapter 16, Page Layout with CSS 317 How to create elastic layouts The key to elastic layouts is the em, a unit of measurement that is based on size of the text. For example, for an element with 12-pixel text, an em is 12 pixels. In Chapter 12, Formatting Text, we learned that it is always preferable to specify font size in ems because it allows the text to be resized with the zoom feature in all modern browsers (remember that IE6 and earlier do not zoom text sized in pixels). In elastic layouts, the dimensions of containing elements are specified in ems as well. That is how the widths can respond to the text size. For example, if the text size is set to 76% (equal to about 12 pixels on most browsers), and the page is set to 40 em, the resulting page width would be 480 pixels (40 em x 12px/em). If the user resizes the text up to 24 pixels, the page grows to 960 pixels. Note that this is getting close to the available canvas space in browsers on 1024-pixel wide monitors. If the page were set much more than 40 ems wide, there would be the risk of the right edge extending beyond the browser window at extremely large text sizes. Elastic layouts are created by specifying widths in em units. Elastic layouts are created by specifying widths in em units. Users who are totally blind may use screen readers to access web content. However, there are many visually impaired users who have enough vision to view sites on computer monitors as long as the type is large and the contrast is good. A new layout technique, called zoom layouts (Figure 16-7), has emerged to address the special requirements of these low- vision users. The hallmarks of zoom layouts include:` A single column layout Extremely large type (set in ems for scalability) High-contrast text and background (both light-on-dark and dark-on-light versions are often supplied) Simplified navigation that appears at the beginning of the document Some visual elements such as color and simple graphics to create an experience consistent with that of the site’s normal presentation. Zoom layouts are usually provided as an alternative to the site’s normal design. They're made accessible to those who need it via a link at the top of the page. The champion of the zoom layout is accessibility expert, Joe Clark. For more information, these links to Mr. Clark’s publications are a good place to start.      The Zoom Layout Page joeclark.org/access/webaccess/zoom/ Zoom Layout presentation at @media 2005 joeclark.org/atmedia/atmedia-NOTES-2.html “Big, Stark, and Chunky,” article at A List Apart alistapart.com/articles/lowvision Figure 16-7. A zoom layout designed by Doug Bowman at stopdesign.com. Zoom Layouts for Low-Vision Users Part III: CSS for Presentation 318 Page Layout Templates Which one should I use? As you can see, each layout approach has its own advantages and drawbacks. Developers tend to have their favorites, and if you read through comments left on CSS-design-related web sites, you’ll find that there are some passion- ate opinions for and against each approach (see the sidebar, The Liquid vs. Fixed Debate). I’m of the opinion that there is no “right” way to lay out all web pages. I find that the best solution is usually a function of the nature of content and design of the site I am working on. You will probably find the same thing to be true. But now you know the various options and can take them into consideration when it is time to lay out the page. Page Layout Templates Here it is the section you’ve been waiting for: how to create two- and three- column layouts using CSS and absolutely no tables. The code examples in this section should give you a good head start toward formatting your pages, but they are not universal solutions. Your content may dictate more compli- cated solutions. You may also prefer one of the more robust templates listed in the More Layout Templates and Tutorials sidebar. This section provides templates and techniques for the following: Multicolumn layouts using floats (two- and three-column) Multicolumn layouts using positioning (two- and three-column, with and without footer) A centered fixed width page Using the templates The sample pages in this section aren’t pretty. In fact, I’ve stripped them down to their bare minimum to help make the structure and strategy as clear as possible. Here are a few notes regarding the templates and how to use them. Simplified markup The DOCTYPE declaration, and other document structure markup (html, head, title, and body elements) have been omitted from the tem- plates to save space. Be sure that your documents have the proper struc- tural markup. Headers and footers I’ve included a header and footer element on many of these examples, but either one or both could easily be omitted for a minimal two- or three- column layout. • • • The Liquid vs. Fixed Debate The “liquid or fixed” question has sparked impassioned debate among professionals in the web design community. There has been an undeniable trend toward fixed-width layouts (presumably to control line lengths), but there are still staunch proponents of liquid designs as best for a medium where the canvas size is unknown. Many designers from both sides are switching to elastic layouts as a solid compromise solution. To get caught up with both sides of the debate, start with these articles and blog entries (they all have links to additional points of view): “On Fixed vs. Liquid Design,” by Doug Bowman (experimenting with fixed width design at www. stopdesign.com/log/2003/12/15/ fixedorliquid.html) “More on fixed widths,” by Richard Rutter (pro–liquid design article at clagnut.com/blog/269/) “Fixed Fashion,” by Jeremy Keith (pro–liquid designpost at www. adactio.com/journal/980)    The Liquid vs. Fixed Debate The “liquid or fixed” question has sparked impassioned debate among professionals in the web design community. There has been an undeniable trend toward fixed-width layouts (presumably to control line lengths), but there are still staunch proponents of liquid designs as best for a medium where the canvas size is unknown. Many designers from both sides are switching to elastic layouts as a solid compromise solution. To get caught up with both sides of the debate, start with these articles and blog entries (they all have links to additional points of view): “On Fixed vs. Liquid Design,” by Doug Bowman (experimenting with fixed width design at www. stopdesign.com/log/2003/12/15/ fixedorliquid.html) “More on fixed widths,” by Richard Rutter (pro–liquid design article at clagnut.com/blog/269/) “Fixed Fashion,” by Jeremy Keith (pro–liquid designpost at www. adactio.com/journal/980)    Page Layout Templates Chapter 16, Page Layout with CSS 319 Dominant main column One thing to be aware of is that all of these examples are based on the best-case scenario where the main content column is longer than the side column(s), which of course is not always the case in the real world. If your side columns are longer, you may need to make adjustments or use a dif- ferent structure altogether. Color-coding I’ve included two views of each layout. The one on the left is plain and simple and shows off the potential of the layout. In the right view, I’ve added a garish background color to help you match the markup and style sheet code with what is happening in the browser. The background colors are also helpful for visualizing the boundaries and placement of element boxes. Make it yours The example style sheets contain the minimum number of rules to create a flexible and usable page structure. There is obviously a lot more that could be done with text, backgrounds, margins, padding, and borders to make these pages more appealing. Once you’ve laid a framework with these templates, you should feel free to change the measurements and add your own styles. Values that can be replaced are indicated in italics in the style sheet examples. Multicolumn Layouts Using Floats The most popular way to create a column is to float an element to one side and let the remaining content wrap around it. A wide margin is used to keep the area around the floated column clear. One of the advantages of floats is that it is easier to start page elements such as a footer below the columned area of the page. The drawback of float-based layouts is that they are dependent on the order in which the elements appear in the source. Getting the layout effect you are after may result in the docu- ment source not being in the optimal order for users of non-visual browsers. The templates in this section reveal the general strategy for approaching two- and three-column layouts using floats and should serve as a good head start toward implementing your own layouts. More Layout Templates and Tutorials There are many approaches to creating multicolumn layouts with CSS. All layouts have benefits and drawbacks (usually in the form of browser support). To find a template that is right for you and to learn where things are likely to go wrong, I recommend these resources. The css-discuss Wiki has a list of links to two- and three-column layout tutorials. These pages are great starting places for more exploration and solutions to layout issues: css-discuss.incutio.com?page=Th reeColumnLayouts css-discuss.incutio.com?page=Tw oColumnLayouts “Creating Liquid Layouts with Negative Margins,” by Ryan Brill, published on A List Apart (www.alistapart.com/articles/ negativemargins/) “In Search of the Holy Grail,” by Matthew Levine, published by A List Apart (www.alistapart.com/articles/ holygrail/) “In Search of the One True Layout,” by Alex Robinson, published by Position Is Everything (positioniseverything.net/articles/ onetruelayout/) “3 Column All CSS Layout,” by Ben Hirsch, published on the Shadow Fox Network (www.shadow-fox.net/tutorial/3- Column-All-CSS-Layout-With- Fluid-Center-and-Two-Columns)        O n l I n e R e S O U R c e S More Layout Templates and Tutorials There are many approaches to creating multicolumn layouts with CSS. All layouts have benefits and drawbacks (usually in the form of browser support). To find a template that is right for you and to learn where things are likely to go wrong, I recommend these resources. The css-discuss Wiki has a list of links to two- and three-column layout tutorials. These pages are great starting places for more exploration and solutions to layout issues: css-discuss.incutio.com?page=Th reeColumnLayouts css-discuss.incutio.com?page=Tw oColumnLayouts “Creating Liquid Layouts with Negative Margins,” by Ryan Brill, published on A List Apart (www.alistapart.com/articles/ negativemargins/) “In Search of the Holy Grail,” by Matthew Levine, published by A List Apart (www.alistapart.com/articles/ holygrail/) “In Search of the One True Layout,” by Alex Robinson, published by Position Is Everything (positioniseverything.net/articles/ onetruelayout/) “3 Column All CSS Layout,” by Ben Hirsch, published on the Shadow Fox Network (www.shadow-fox.net/tutorial/3- Column-All-CSS-Layout-With- Fluid-Center-and-Two-Columns)        O n l I n e R e S O U R c e S Part III: CSS for Presentation 320 Page Layout Templates Two-column with footer Method: FLOAT Layout: LIQUID The markup and styles in this example produce a liquid two-column layout with a header area, a main column of content, a sidebar, and footer for copy- right information as shown in Figure 16-8. Aqua box indicates floated “main” div Footer appears at the bottom of the content (not at the botom of the browser window) Figure 16-8. Two-column layout with footer. The Markup <div id="header"> Masthead and headline </div> A <div id="main"> Main article </div> <div id="extras"> List of links and news </div> <div id="footer"> Copyright information </div> Markup Notes: The source document has been divided into four divs, one each for the header, content, extras, and footer. Page Layout Templates Chapter 16, Page Layout with CSS 321 The main content appears before the extras in the source document so that it is accessed first by users with non-graphical browsers. That means that we can’t float the “extras” div because it will not float above the pre- ceding block element to the top of the page. Instead, the main content div is floated and the following text (the “extras” div) wraps around it. The Style Sheet #header { background: #CCC; padding: 15px; } B #main { background-color: aqua; float: left; /* floats the whole main article to the left */ width: 60%; margin-right: 5%; /* adds space between columns */ margin-left: 5%; } C #footer { clear: left; /* starts the footer below the floated content */ padding: 15px; background: #CCC; } D #extras { margin-right: 5%} /* space on the right of the side column */ E body { font-family: verdana, sans-serif; margin: 0; /* clears default browser margins */ padding: 0; } li { list-style: none; margin: 10px 0; } Style Sheet Notes: The main content div is floated to the left and set to 60% of the page width. A margin is applied to the left and right sides of the floated “main” div to add space between columns. The “footer” div is cleared (with the clear property) so that it starts below the floated main content column. A margin is added on the right edge of the “extras” div to add space between it and the browser window. The margin and padding on the body element have been set to zero to clear the default browser settings. This allows the shaded header and footer areas to go right up to the edge of the browser window without any white gaps. A� B� C� D� E� Part III: CSS for Presentation 322 Page Layout Templates Three-column with footer Method: FLOAT Layout: FIXED This example uses floated elements to create a fixed-width three-column lay- out (a main content column flanked by left and right sidebars) with optional header and footer (Figure 16-9). Figure 16-9. Three-column layout using floats. The Markup Markup Notes A <div id="container"> <div id="header"> Masthead and headline </div> B <div id="links"> List of links </div> <div id="main"> Main article </div> <div id="news"> News and announcements </div> <div id="footer"> Copyright information </div> </div> All of the content elements in the docu- ment have been placed in a “container” div to which the fixed-width measure- ment will be applied. Remember that with floating, the order that the elements appear in the source document is significant. To get the narrow sidebars on either side of the content, I needed to move the “links” div before the “content” div to keep the style sheet straightforward. There are methods that allow the content to appear in any order, but they tend to get complicated. The last three resourc- es listed in the More Layout Templates and Tutorials sidebar address this issue. A� B� Page Layout Templates Chapter 16, Page Layout with CSS 323 The Style Sheet #container { width: 750px; C border: solid 1px; } #header { background: #CCC; padding: 15px; } D #links { background-color: fuchsia; float: left; E width: 175px; } D #main { background-color: aqua; float: left; E width: 400px; } D #news { background-color: green; float: left; E width: 175px; } F #footer { clear: both; /* starts the footer below the floated content */ padding: 15px; background: #CCC; } body { font-family: verdana, sans-serif; font-size: small; margin: 0; padding: 0;} G h2, ul, p { padding: 0px 8px; } /* adds space around content */ li { list-style: none; margin: 10px 0; } Style Sheet Notes A border has been added to the container to reveal its edges in this dem- onstration, but it can easily be removed. The style sheet floats the “links” “main,” and “news” divs to the left. The result is that they accumulate against the left edge of the containing block, thus creating three columns. Because there are no padding, border, or margin settings for each floated ele- ment, the sum of their widths is equal to the width of the outer container. The clear: both property has been added to the footer to make sure it starts below all of the floated elements. Space within each content div is added by applying padding on the ele- ments it contains (h2, ul, p, etc.). C� D� E� F� G� Part III: CSS for Presentation 324 Page Layout Templates Now it’s your turn to give it a try. In Exercise 16-1, you’ll use the same content to create a hybrid of the previous examples: a two-column, fixed-width layout using floats. exercise 16-1 | Float-based Layout In this exercise, we’ll create the fixed-width layout shown in Figure 16-10. The source document for this exercise, olympus.html, is available online at www. learningwebdesign.com/materials/. It contains the basic markup and the start of the style sheet for all the exercises in this chapter. Open olympus.html in your text editor and save it as a new file called olympus- 2col.html (that will keep a copy of the starter document fresh for the next exercise). We’ll start by getting the markup all set. Because this is a fixed-width layout, wrap all of the content (from the first h1 to the end of the last paragraph) in a div identified as the “container” (with the id attribute) just as we did in the three-column template earlier. Be sure to include the closing </div> tag. Next, add div s that identify the four content sections. Name them “header,” “main,” “extras,” and “footer.” Note that the “extras” div in this example contains both Links and News. 1. 2. Figure 16-10. Two-column, fixed-width layout. With the markup in place, you can move on to the style sheet. The style element and some basic text formatting rules have been added for you. Apply a width to the container div . This sets the width of the page area. Also, apply a border to make the boundaries of the page area clear (you can always remove it later). #container { width: 750px; border: 1px solid; } Next, let’s make the header and footer stand out. Give them some padding and a light background color. I’m using gray, but you can use any color you like. #header { padding: 15px; background: #CCC; } #footer { padding: 15px; background: #CCC; } Now give the main content div a width and float it to the right to make the second column, #main { float: right; width: 550px; } and clear the footer so it appears below the floated content, #footer { clear: both; padding: 15px; background: #CCC; } 3. 4. 5. exercise 16-1 | Float-based Layout In this exercise, we’ll create the fixed-width layout shown in Figure 16-10. The source document for this exercise, olympus.html, is available online at www. learningwebdesign.com/materials/. It contains the basic markup and the start of the style sheet for all the exercises in this chapter. Open olympus.html in your text editor and save it as a new file called olympus- 2col.html (that will keep a copy of the starter document fresh for the next exercise). We’ll start by getting the markup all set. Because this is a fixed-width layout, wrap all of the content (from the first h1 to the end of the last paragraph) in a div identified as the “container” (with the id attribute) just as we did in the three-column template earlier. Be sure to include the closing </div> tag. Next, add div s that identify the four content sections. Name them “header,” “main,” “extras,” and “footer.” Note that the “extras” div in this example contains both Links and News. 1. 2. Figure 16-10. Two-column, fixed-width layout. With the markup in place, you can move on to the style sheet. The style element and some basic text formatting rules have been added for you. Apply a width to the container div . This sets the width of the page area. Also, apply a border to make the boundaries of the page area clear (you can always remove it later). #container { width: 750px; border: 1px solid; } Next, let’s make the header and footer stand out. Give them some padding and a light background color. I’m using gray, but you can use any color you like. #header { padding: 15px; background: #CCC; } #footer { padding: 15px; background: #CCC; } Now give the main content div a width and float it to the right to make the second column, #main { float: right; width: 550px; } and clear the footer so it appears below the floated content, #footer { clear: both; padding: 15px; background: #CCC; } 3. 4. 5. Page Layout Templates Chapter 16, Page Layout with CSS 325 Save the document and take a look at it in the browser. It should look almost like the sample in Figure 16-10. The only problem is that the text is bumping up against the edges of the columns and the browser. We can fix that. Add margins on both sides of the floated main column and on the left side of the “extras” div . #main { float: right; width: 550px; margin: 0 10px; } /* adds 0 pixels top/bottom and 10px left/right */ #extras { margin-left: 10px; } Save the document again, and take a look. You should have a page that matches the example. The layout is officially done, but let’s play around with it a bit to get a better feel for what’s happening. First, make the background of the “main” div yellow by adding background-color: yellow; to the #main rule. Save the file and look at it in the browser. You should see that the color goes behind the content area of the floated box, but does not extend into the margin area, as expected. Now, make the background of the “sidebar” div red by adding background-color: red; to the #sidebar rule. Save the file and look at it in your browser. You will see that the red background color goes all the way across the page area, behind the floated column (as shown in Figure 16-11). This is because the sidebar text is just wrapping around the float. The normal behavior for wrapped text is that the content moves out of the way of the float, but the element box still takes up its normal width. The background of the wrapped text appears behind the float. You may remove the background colors once you’ve gotten the point. The yellow background stays in the content area of the floated “main” div. The element box of the “extras” div extends the width of the page area, as indicated by the red background. Figure 16-11. Adding background colors to reveal element structure. Obviously, there is more you could do to pretty up this page with color, text formatting, images, and so on. What is important here is that you get a feel for creating the structure using floats. Later in the chapter, I’ll show you a trick for adding colors to columns using a background image. We’ll also learn how to center a fixed- width layout like this one in the browser window. 6. 7. 8. 9. N o t e The margin will be added on the outside of the 550 pixel-wide content block. That means that the side column will be reduced by 20 pixels. If you want the left and right columns to stay 200 and 550 pixels respectively, you need to reduce the width of the main div to 530px. We’ll talk about this more in the final 3-column template example. N o t e The margin will be added on the outside of the 550 pixel-wide content block. That means that the side column will be reduced by 20 pixels. If you want the left and right columns to stay 200 and 550 pixels respectively, you need to reduce the width of the main div to 530px. We’ll talk about this more in the final 3-column template example. If things aren’t working, make sure that you didn’t miss a semicolon (;) at the end of a property or a curly bracket (}) at the end of a rule. Try saving and viewing the document after each step to see the effects of each change that you make.   e x e R c I S e t I P S If things aren’t working, make sure that you didn’t miss a semicolon (;) at the end of a property or a curly bracket (}) at the end of a rule. Try saving and viewing the document after each step to see the effects of each change that you make.   e x e R c I S e t I P S . Liquid Design, ” by Doug Bowman (experimenting with fixed width design at www. stopdesign.com/log/2003/12/15/ fixedorliquid.html) “More on fixed widths,” by Richard Rutter (pro–liquid design. Liquid Design, ” by Doug Bowman (experimenting with fixed width design at www. stopdesign.com/log/2003/12/15/ fixedorliquid.html) “More on fixed widths,” by Richard Rutter (pro–liquid design. (pro–liquid designpost at www. adactio.com/journal/980)    The Liquid vs. Fixed Debate The “liquid or fixed” question has sparked impassioned debate among professionals in the web design community.