Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 44 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
44
Dung lượng
2,55 MB
Nội dung
P1: GIG WY021-08 WY021-Holzshlag-v2 May 25, 2004 17:17 ࡗ 200 Part II: HTML, XHTML, CSS, and Accessibility ࡗ ࡗࡗ Listing 8-8: (continued) padding: 10px; } </style> </head> <body> <ul id="links"> <li><a href="http://www.wiley.com/">Wiley<span>Wiley is the publisher of this book.</span></a></li> <li><a href="http://www.molly.com/">Molly<span>Molly is the author of this book.</span></a></li> <li><a href="http://www.sidesh0w.com/">Ethan<span>Ethan is the technical editor of this book.</span></a></li> </ul> </body> </html> Figure 8-20 shows the results. Figure 8-20: Text mouseovers using CSS work well in today’s modern Web browsers. tip Add additional features to your links styles to enhance the look. Or, create an awesome list-based navigation, as described earlier in this book, to create horizontal as well as vertical navigation options with this technique. P1: GIG WY021-08 WY021-Holzshlag-v2 May 25, 2004 17:17 ࡗ ࡗࡗࡗ Chapter 8: Style Tips for Type and Design 201 ࡗࡗࡗ Secret #143: Text and Image Mouseovers You can use the same swapping technique using images. In this case, you’ll be placing an image element directly into the anchor element and, instead of using the display element to hide and then reveal the image, you’ll set the image to have no height and width until the hover state, in which you’ll include width and height (see Listing 8-9). Listing 8-9: CSS mouseovers using images <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Text Mouseovers</title> <meta http-equiv="Content-Type" content="text/html; charset=iso- 8859-1" /> <style type="text/css"> #links { position: absolute; top: 100px; left: 25px; width: 150px; height: 300px; font: 14px Arial, sans-serif; } #links a { display: block; font-weight: bold; text-decoration: none; text-align: center; padding: 10px; color: #c00; border: 1px solid black; } #links a:hover { color: #c00; background-color: #FFF; } #links a span { display: none; } (continued) P1: GIG WY021-08 WY021-Holzshlag-v2 May 25, 2004 17:17 ࡗ 202 Part II: HTML, XHTML, CSS, and Accessibility ࡗ ࡗࡗ Listing 8-9: (continued) #links a img { height: 0; width: 0; border-width: 0; } #links a:hover img { position: absolute; top: 75px; left: 255px; height: 50px; width: 190px; } li { list-style-type: none; padding: 10px; } </style> </head> <body> <ul id="links"> <li><a href="http://www.wiley.com/">Wiley<img src="wiley.gif" /></a></li> <li><a href="http://www.molly.com/">Molly<img src="molly.gif" /></a></li> <li><a href="http://www.sideshow.com/">Ethan<img src="sideshow.jpg" /></a></li> </ul> </body> </html> Figure 8-21 shows the results. ࡗࡗࡗ Secret #144: Dynamic CSS Menus This technique is an extension of the ideas in the CSS mouseover techniques, but it applies the :hover pseudo class to other elements—this is actually a perfectly acceptable use of :hover, but, unfortunately, IE doesn’t support it. As a result, you’ll only have access to the primary links. So, while you can use this effect to create great menus (see Figure 8-22) without JavaScript, you can’t do it in IE (see Figure 8-23). However, because you’re simply styling lists, they will tend to degrade to nested lists in most browsers without CSS support (as shown in Figure 8-24). P1: GIG WY021-08 WY021-Holzshlag-v2 May 25, 2004 17:17 ࡗ ࡗࡗࡗ Chapter 8: Style Tips for Type and Design 203 Figure 8-21: CSS-based mouseovers with images. Figure 8-22: A CSS-based dynamic menu in action. note For more information about the mouseover and menu techniques discussed here, visit Eric Meyer’s CSS Edge, at www.meyerweb.com/eric/css/ edge/. A good explanation for hierarchical dynamic menus can be found at www.pixy.cz/blogg/clanky/csshiermenu/. P1: GIG WY021-08 WY021-Holzshlag-v2 May 25, 2004 17:17 ࡗ 204 Part II: HTML, XHTML, CSS, and Accessibility ࡗ ࡗࡗ Figure 8-23: IE will only display the top links of the menu. Figure 8-24: The same menu with styles completely disabled. P1: GIG WY021-08 WY021-Holzshlag-v2 May 25, 2004 17:17 ࡗ ࡗࡗࡗ Chapter 8: Style Tips for Type and Design 205 ࡗࡗࡗ Secret #145: Rounded Tabs Still another interesting effect offered up by Eric Meyer is a technique whereby you can use images to create a rounded tab effect in horizontal list navigation. Rounded tabs are a mainstay of navigation, providing a softer look than square tabs tend to offer. The beauty of this technique is that it is supported in all contemporary browsers (see Figure 8-25). Figure 8-25: Rounded tab technique from complex spiral consulting. note This technique is described in a white paper on Eric’s consulting Web site, at www.complexspiral.com/publications/rounding - tabs/. ࡗࡗࡗ Secret #146: Sliding Doors Another awesome effect for tabbed navigation is the “Sliding Doors’’ technique created by CSS designer Douglas Bowman. In this technique, you use two separate images, one small and one large, to create a sliding effect. This allows you to create dynamic navigation that is far more friendly to the resizing of fonts while maintaining the navigation design. Figure 8-26 shows the concept at work. P1: GIG WY021-08 WY021-Holzshlag-v2 May 25, 2004 17:17 ࡗ 206 Part II: HTML, XHTML, CSS, and Accessibility ࡗ ࡗࡗ Figure 8-26: The Sliding Doors effect. Figure 8-27: Horizontal rule fade effects. note To learn the Sliding Doors technique as well as some variants, see www.alistapart.com/articles/slidingdoors/. P1: GIG WY021-08 WY021-Holzshlag-v2 May 25, 2004 17:17 ࡗ ࡗࡗࡗ Chapter 8: Style Tips for Type and Design 207 ࡗࡗࡗ Secret #147: Cool Rules I stumbled upon this technique while writing this chapter. Ethan Marcotte (this book’s technical editor) and designer Dunstan Orchard worked together to find a means to style horizontal rules using background graphics. Through a bit of trial and error, Ethan and Dunstan came up with a means to create cross-browser horizontal rule effects including subtle fades. Figure 8-27 shows the results. note To read more about styling horizontal rules, see www.sidesh0w.com/ weblog/2004/03/17/sexily - styling - horizontal - rules.html. Summary Obviously, there are still concerns about the role CSS plays for certain audiences, but CSS has truly emerged as more than just a band-aid solution for font and color control. You can now enhance your pages in so many ways, and I really believe we have only just begun to understand where CSS will take us in terms of visual design. If you’re excited about CSS after this chapter—and I hope you are—you’llbe happy to know you get to spend another chapter with CSS, examining how CSS works for layout, how to manage workarounds, deal with hacks, and write CSS for other media types. P1: GIG WY021-08 WY021-Holzshlag-v2 May 25, 2004 17:17 208 P1: JYX WY021-09 WY021-Holzshlag-v2 May 25, 2004 17:21 Chapter 9 Laying Out Pages with CSS ࡗࡗࡗࡗࡗࡗࡗࡗࡗࡗࡗࡗࡗࡗࡗࡗࡗࡗࡗࡗࡗࡗࡗࡗࡗࡗࡗ Secrets in This Chapter #148: Two-Column Layout, Positioned Left Navigation 211 #149: Float-Based Layout 212 #150: Nested Float 214 #151: Three-Column Layout 218 #152: Vertical Centering in CSS 220 #153: Ordering DIVs for Backward Compatibility 226 #154: @import for Graceful Degradation 227 #155: CSS Hacking Strategies 228 #156: The Box Model Hack 230 #157: The High Pass Filter 231 #158: The Mid Pass Filter 232 #159: IE 5.0 Windows Band Pass Filter 232 #160: IE 5.5 Windows Band Pass Filter 233 #161: Opera Hacks 233 #162: Understanding CSS Media Types 234 #163: Alternate Style Sheet for Print 235 #164: Alternate Style Sheet for Small-screen Media 236 #165: Alternate Style Sheet for Projection 237 #166: CSS Best Practices 237 ࡗࡗࡗࡗࡗࡗࡗࡗࡗࡗࡗࡗࡗࡗࡗࡗࡗࡗࡗࡗࡗࡗࡗࡗࡗࡗࡗ [...]...ࡗ 210 Part II: HTML, XHTML, CSS, and Accessibility ࡗࡗࡗ A n intriguing development over the past several years has been the move away from table-based design to transitional designs using lighter tables and CSS, or out -and- out pure CSS layouts CSS ultimately frees the designer by providing much richer and more diverse means of presenting and delivering designs to various media including,... width: 250px; background: #ccc; margin: 0px 0px 10px 10px; } (continued) ࡗ 2 16 Part II: HTML, XHTML, CSS, and Accessibility ࡗࡗࡗ Listing 9-3: (continued) Home Books Articles Events Courses... Home Books Articles Events Courses Consultation About Molly Fun Stuff < /html> Figure 9 -6 shows the results... 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 Centering Combo body... Home Books Articles Events Courses Consultation About Molly Fun Stuff < /html> Figure 9-2 shows... 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 ࡗࡗࡗ Chapter 9: Laying Out Pages with CSS Figure 9 -6: The basic three-column layout... ࡗ 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/... Home Books Articles Events Courses Consultation About Molly Fun Stuff < /html> Figure 9-1 shows... positioning, you can create a two-column layout with a left column menu and right content area Listing 9-1 shows the CSS and markup used to create the layout Listing 9-1: Working with positioning in layout Layout Content Right, Navigation Left... 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 ࡗࡗࡗ Chapter 9: Laying Out Pages with CSS ࡗ 219 . navigation design. Figure 8- 26 shows the concept at work. P1: GIG WY021-08 WY021-Holzshlag-v2 May 25, 2004 17:17 ࡗ 2 06 Part II: HTML, XHTML, CSS, and Accessibility ࡗ ࡗࡗ Figure 8- 26: The Sliding. Band Pass Filter 232 # 160 : IE 5.5 Windows Band Pass Filter 233 # 161 : Opera Hacks 233 # 162 : Understanding CSS Media Types 234 # 163 : Alternate Style Sheet for Print 235 # 164 : Alternate Style Sheet. images <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < ;html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Text