Chapter 9: Laying Out Pages with

Chapter 9: Laying Out Pages with CSS 227 As a result, you ll want to order your div elements so the content is readable when styles are removed. Say, for example, you have the following in your document:

If you remove the styles, the navigation is going to appear at the top of the page. If you prefer to have the navigation appear at the bottom of the page when styles are removed, simply switch the order of the div elements, as follows:

Because the div positioning is based on your CSS, not the order in which the information appears in the document, the visual output in a CSS-compliant browser will be exactly the same. warning While this works well for positioned div elements, one of the downsides of using floats for layout is that you can t do this with floated divisions. They must appear in the correct location of the HTML or XHTML document to render properly. Secret #154: @import for Graceful Degradation If you are attempting to gracefully degrade your CSS layouts and have to support Netscape 4.x version browsers, you might want to consider using the @import workaround as a solution to ensure your site degrades the way you d like it to. The problem: Netscape 4.x versions have partial support for CSS. Layouts are especially prone to breaking. The solution: Netscape 4.x versions impartial CSS support is a partial blessing, because there s no support for the @import rule. This allows designers to split their CSS into two style sheets: Site-wide styles. This style sheet will contain font, color, and other CSS properties used for just about everything but layout information. Layout styles. This style sheet contains the layout information for the site. If you had a site-wide style sheet, styles.css, and a layout style sheet, layout.css, split up in the way previously described, you dthen link to the styles.css, but import

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost JSP Web Hosting services

226 Part II: HTML, XHTML, CSS, and Accessibility

226 Part II: HTML, XHTML, CSS, and Accessibility Listing 9-7: (continued) }

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In vestibulum vestibulum elit. Ut porta. Duis vulputate bibendum tellus. Vivamus dictum egestas mi. Cras justo. Vestibulum nisl mauris, convallis a, vestibulum et, accumsan vel, lacus. Morbi mattis viverra turpis. Pellentesque blandit quam in sapien. Proin pellentesque, purus sit amet mollis sollicitudin, lacus leo rhoncus enim, nec vestibulum urna tellus at magna. Ut adipiscing.

Morbi ut sem non diam fringilla tincidunt. Maecenas nunc tellus, adipiscing eget, tincidunt ut, venenatis ut, enim. Sed posuere turpis at nisl. Sed at sem. Nullam sagittis tincidunt magna. Duis tempus. Proin dui turpis, consequat quis, porttitor ut, molestie vel, libero. Phasellus sodales venenatis urna.

Maecenas ipsum risus, fringilla rutrum, porta id, congue id, leo. Fusce augue nulla, vestibulum at, euismod ut, ultrices in, felis. Cras vitae pede ac mi lobortis fermentum. Phasellus viverra. Ut ultrices, neque ac congue varius, justo quam elementum mi, at nonummy urna elit quis augue. Praesent feugiat pede a turpis. Duis libero diam, volutpat id, dictum vitae, aliquet sed, lorem.

This method works in a far greater range of browsers, and you can use the technique for creating vertically aligned CSS layouts. note Be sure to read the CSS Hacking Strategies secret later in this chapter for information on how to deal with hacks more efficiently. Secret #153: Ordering DIVs for Backward Compatibility When you re creating CSS layouts, the order of your positioned div elements will make a difference in the way in which text is ordered when styles are removed, but won t make a difference in terms of how the CSS is interpreted on-screen.

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost JSP Web Hosting services

Chapter 9: Laying Out Pages with

Chapter 9: Laying Out Pages with CSS 225 Figure 9-10: Centering using the center hack won t work in some browsers. So, to make your containing box as cross-browser compatible as possible, you have to use both the right way and the hack, as expressed in Listing 9-6. Listing 9-6: Combining correct vertical centering and the centering hack < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

224 Part II: HTML, XHTML, CSS, and Accessibility

224 Part II: HTML, XHTML, CSS, and Accessibility Listing 9-5: (continued) text-align: center; } #content { width: 400px; height: 400px; text-align: left; }

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In vestibulum vestibulum elit. Ut porta. Duis vulputate bibendum tellus. Vivamus dictum egestas mi. Cras justo. Vestibulum nisl mauris, convallis a, vestibulum et, accumsan vel, lacus. Morbi mattis viverra turpis. Pellentesque blandit quam in sapien. Proin pellentesque, purus sit amet mollis sollicitudin, lacus leo rhoncus enim, nec vestibulum urna tellus at magna. Ut adipiscing.

Morbi ut sem non diam fringilla tincidunt. Maecenas nunc tellus, adipiscing eget, tincidunt ut, venenatis ut, enim. Sed posuere turpis at nisl. Sed at sem. Nullam sagittis tincidunt magna. Duis tempus. Proin dui turpis, consequat quis, porttitor ut, molestie vel, libero. Phasellus sodales venenatis urna.

Maecenas ipsum risus, fringilla rutrum, porta id, congue id, leo. Fusce augue nulla, vestibulum at, euismod ut, ultrices in, felis. Cras vitae pede ac mi lobortis fermentum. Phasellus viverra. Ut ultrices, neque ac congue varius, justo quam elementum mi, at nonummy urna elit quis augue. Praesent feugiat pede a turpis. Duis libero diam, volutpat id, dictum vitae, aliquet sed, lorem.

Your box is now centered. Or is it? In Internet Explorer (IE) 6 and Netscape 4.x it is (even though the height and border styles aren t supported). But in Mozilla and Opera, the box isn t centered (see Figure 9-10). note The fact that the box does not center properly using this method in Mozilla and Opera is not a fault of those browsers. They re actually rendering the CSS properly. You re using a hack, which more sophisticated browsers tend not to like.

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Linux Web Hosting services

Chapter 9: Laying Out Pages with

Chapter 9: Laying Out Pages with CSS 223 Figure 9-9: Centering a box using the correct method works in complying browsers such as Mozilla. work in a wider range of browsers. The workaround is controversial for a couple of reasons: You re applying a property meant for text, not for positioning, so you re not using the language correctly, which is why this is considered a hack. You have to write extra CSS to override the text-align: center property and value, because you re going to use the text-align: center property on the body element. So, any text within the body is now going to be aligned to the center, unless you override the text-align property elsewhere. Listing 9-5 shows the CSS and markup for the centering hack. Listing 9-5: Centering hack < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Unix Web Hosting services

222 Part II: HTML, XHTML, CSS, and Accessibility

222 Part II: HTML, XHTML, CSS, and Accessibility lengths in a fluid design is difficult, if not impossible, without sacrificing some other aspect of the design. These issues most likely are responsible for the move back from liquid design to controlled, centered designs, as we are beginning to see with sites such as A List Apart, www.alistapart.com/, and many of the CSS Zen Garden designs, www.csszengarden.com/. Figure 9-8: Centered designs in CSS are making a comeback. While CSS offers a logical means to center designs, a problem exists with browser implementation. It s more than a bit frustrating, because with table-based layouts this was very easy, but the same difficulties with accessibility and limited design options exist when using tables. You d simply use the align=”center” attribute to center the containing table, and the entire layout would then be centered. So how do you achieve the same effect in CSS? You have to employ a workaround to support multiple browsers. The correct way to horizontally center a box is to set the left and right margins of a given box to a width of auto. This is going to be true of any box within your design, not just the containing box you re using to center the design itself. #mainbox { margin-left: auto; margin-right: auto; } By doing this, any box will center neatly, and in complying browsers, it does (see Figure 9-9). However, because some browsers don t implement the correct CSS to manage your containing boxes, you have to look at workarounds or hacks. The most common hack in use is to apply the text-align property to the containing box, setting the alignment to a value of center. This technique will

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Linux Web Hosting services

220 Part II: HTML, XHTML, CSS, and Accessibility

220 Part II: HTML, XHTML, CSS, and Accessibility Listing 9-4: (continued)

Maecenas ipsum risus, fringilla rutrum, porta id, congue id, leo. Fusce augue nulla, vestibulum at, euismod ut, ultrices in, felis. Cras vitae pede ac mi lobortis fermentum. Phasellus viverra. Ut ultrices, neque ac congue varius, justo quam elementum mi, at nonummy urna elit quis augue. Praesent feugiat pede a turpis. Duis libero diam, volutpat id, dictum vitae, aliquet sed, lorem.

Figure 9-6 shows the results. Add a little CSS pizzazz, and you end up with a fully styled site, such as that shown in Figure 9-7. Secret #152: Vertical Centering in CSS Recently, designers have got back to fixing their CSS designs. In other words, instead of having the design flow dynamically to the browser size, the design is fixed to a certain pixel width (see Figure 9-8). note While some designers prefer fixed designs, other camps strongly advocate fluid or liquid designs those designs that flow to fill the browser window. Advantages of liquid design include that no browser space is wasted, and no matter how you size your browser, the design will flow to fit it. Liquid design means less control of aspects of the overall design, and managing text line

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Java Web Hosting services

Chapter 9: Laying Out Pages with

Chapter 9: Laying Out Pages with CSS 219

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In vestibulum vestibulum elit. Ut porta. Duis vulputate bibendum tellus. Vivamus dictum egestas mi. Cras justo. Vestibulum nisl mauris, convallis a, vestibulum et, accumsan vel, lacus. Morbi mattis viverra turpis. Pellentesque blandit quam in sapien. Proin pellentesque, purus sit amet mollis sollicitudin, lacus leo rhoncus enim, nec vestibulum urna tellus at magna. Ut adipiscing.

Morbi ut sem non diam fringilla tincidunt. Maecenas nunc tellus, adipiscing eget, tincidunt ut, venenatis ut, enim. Sed posuere turpis at nisl. Sed at sem. Nullam sagittis tincidunt magna. Duis tempus. Proin dui turpis, consequat quis, porttitor ut, molestie vel, libero. Phasellus sodales venenatis urna.

(continued)

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost JSP Web Hosting services

218 Part II: HTML, XHTML, CSS, and Accessibility

218 Part II: HTML, XHTML, CSS, and Accessibility #content #nav { border-right: 1px solid #000; border-bottom: 1px solid #000; float: left; width: 250px; background: #ccc; margin: 0px 0px 10px 0px; } Figure 9-5 shows the reverse. Figure 9-5: Reversing the float. Add a little style to the page and you ve got an easy, useful float-based layout. Secret #151: Three-Column Layout This is a very popular layout, used frequently to emulate the three-column layouts to which we re accustomed in table-based designs. In this case, each of the flanking columns is a fixed width, and the center content column will adjust dynamically (see Listing 9-4). Listing 9-4: Dynamic three-column layout < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Cheap Web Hosting services