CSS Cookbook- P8

Chia sẻ: Thanh Cong | Ngày: | Loại File: PDF | Số trang:50

0
42
lượt xem
7
download

CSS Cookbook- P8

Mô tả tài liệu
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Tham khảo tài liệu 'css cookbook- p8', công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả

Chủ đề:
Lưu

Nội dung Text: CSS Cookbook- P8

  1. Figure 6-22. Moving the term to the left side of the definitions For the definitions, set their floats to the left as well and set their widths to be 100%, as shown in Figure 6-23: dd { float: left; width: 100%; } Figure 6-23. Adjusting the definitions’ width 6.12 Styling a Definition List | 325 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  2. Then adjust the margin and padding to reinforce the visual distinction between the definitions, as shown in Figure 6-24: dd { float:left; width:100%; padding: .2em 0 0 0; margin: 0 0 1em 0; } Figure 6-24. Adjusting the padding and margins of the definitions After that, style elements to taste for better visual rendering, as shown in Figure 6-25: dt { width: 4em; float: left; clear: left; margin:0 0 1em −5em; font-weight: bold; border-top: 1px solid #000; padding: .2em 0 0 0; } dd { float: left; width: 100%; padding: .2em 0 0 0; margin: 0 0 1em 0; color: #333; } 326 | Chapter 6: Lists Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  3. dt+dd { border-top: 1px solid #000; } Figure 6-25. Polishing the look of the definition list Discussion Placing a term next to its definition is a fairly common solution. By applying a margin to the definition list as a whole on its left side, you can make the terms slide into the open area. After that, using floats (along with judicious use of padding) finalizes the manipulation. Using generated content To indicate that there are definitions after a term, use the :after pseudo-element on the definition term: dt:after { content: ":"; } Since terms may have more than one definition, it’s possible to assign numbers to each definition. The CSS specification has a counter-mechanism that is suited for this purpose. 6.12 Styling a Definition List | 327 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  4. First, use the counter-reset property on the dt element: dt { counter-reset: item; } The counter-reset property either creates or resets a counter. As the dt elements are rendered and the CSS is associated with the element, the counter is initiated and then subsequently reset with each rendering of this element in the document. The next step is to tell the browser to output the number before each definition through the counters() function: dd:before { content: counters(item, "") ". " ; } Within the counters() function, two parameters are passed: the counter to be used and then a string. The string is used to separate subsections. Examples of separators within a counter include the period within Recipe 1.8 and the hyphen in Recipe 6.11. In this Solution, there aren’t any subsections, so the string is empty. To insert a period after the number and a space, quotation marks are used after the counters() function. With the counter output in place in the document, the next step is to tick the counter each time there is a new definition. This is done through the counter-increment prop- erty, which accepts the value of the counter name given to the counter-reset property: dd:before { content: counters(item, "") ". " ; counter-increment:item; } Figure 6-26 shows the final result. Generated content is not supported in versions of Internet Explorer for Windows earlier than IE8. All other modern browsers do support gen- erated content. See Also Robert O’Rourke’s original work on getting the definition list to look like a table at http://www.sanchothefat.com/dev/layouts/definition-lists-ugly.html, after being inspired by Bruce Lawson’s CSS Challenge at http://www.brucelawson.co.uk/2009/css-challenge/ 328 | Chapter 6: Lists Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  5. Figure 6-26. Using generated content in the definition list 6.13 Styling a Screenplay with the HTML5 dialog Element Problem You want to stylize a screenplay. Solution Mark up the content of the screenplay with the HTML5 dialog element: Cut to Int. Kitchen - Continuous Beth I told you the one about Salma Hayek? Beth walks closer to John. The innocuous baby monitor gets louder. Beth 6.13 Styling a Screenplay with the HTML5 dialog Element | 329 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  6. Nursing a hungry baby in some destitute African village? John (gasps)No. Beth This actually happened, but the commentator, I forget who, ended the piece with "your move, Jolie" Then apply style rules to adjust the formatting of the content to look like a screenplay: body { font-size: 62.5%; font-family: "Courier New", Courier, monospace; margin: 0 auto; width: 612px; } #screenplay { padding: 0 10.9em; } #screenplay h3 + p { text-transform: uppercase; } #screenplay h3 { text-transform: uppercase; text-align: right; background: white; } #screenplay h3:after { content: ":"; } dialog { font-size: 1.2em; } dt { text-transform: uppercase; text-align: center; margin-top: 1.6em; } dd { margin-left: 7.2em; } span.how { display: block; text-align: center; margin-right: 7.2em; padding-right: 5em; } #screenplay strong { text-transform: uppercase; } 330 | Chapter 6: Lists Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  7. Discussion The HTML5 specification brings in a new element, dialog, specifically for indicating conversation. The format the markup uses is the same as dt and dd elements, but it replaces the dl element with dialog. See Also The HTML5 specification for dialog at http://www.w3.org/TR/2008/WD-html5 -20080122/#the-dialog 6.14 Turning a List into a Directory Tree Problem You want to re-create a directory tree structure from a list. Solution First, set up a series of nested ordered lists to serve as the basis for the directory tree structure: Morning Sessions Troubleshooting IE6 Object Oriented CSS Fluid Typography Tomorrow's CSS3 Today Afternoon Sessions Web Form Elements Flexible Layouts Coding Layouts Future CSS & Markup Create three sets of small graphics: a vertical pipe or trunk; a branch; and an end branch graphic, as shown in Figure 6-27. 6.14 Turning a List into a Directory Tree | 331 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  8. Figure 6-27. Default rendering of the unordered lists Apply the vertical pipe graphic to the sides of the unordered lists, as shown in Fig- ure 6-28: .itinerary, .itinerary ul { list-style-type: none; background-image: url(pipe.gif); background-repeat: repeat-y; margin: 0; padding: 0; } .itinerary ul { margin-left: 12px; } Apply a branch graphic at each list item: .itinerary li { margin: 0; padding: 0 12px 0 28px; background-image: url(branch.gif); background-repeat: no-repeat; line-height: 1.5; } 332 | Chapter 6: Lists Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  9. Figure 6-28. The vertical lines set Then hardcode the last list item in each unordered list with a class attribute in the HTML: Morning Sessions Troubleshooting IE6 Object Oriented CSS Fluid Typography Tomorrow's CSS3 Today Afternoon Sessions Web Form Elements Flexible Layouts Coding Layouts Future CSS & Markup 6.14 Turning a List into a Directory Tree | 333 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  10. Now apply a class selector to bring in the end branch graphic, as shown in Figure 6-29: .itinerary li.branchend { /* matches background color of */ /* parent element or page */ background-color: #fff; background-image: url(branchend.gif); } Figure 6-29. Applying the end branches Discussion The technique for this Solution builds off Recipe 6.8, which uses icons placed in the background of the list item. This Solution calls for three different small images to be placed at certain areas in the ordered lists to pull off the effect. Using CSS3 To place the end branch of the directory tree, we had to include a class attribute in the markup for the Solution to work. 334 | Chapter 6: Lists Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  11. In CSS3, the :last-of-type pseudo-class can replace the need for that class attribute: .itinerary li:last-of-type { /* matches background color of */ /* parent element or page */ background-color: #fff; background-image: url(branchend.gif); } At the time of this writing, the :last-of-type pseudo-class is supported in Safari 3 and later and Opera9.5 and later. For a listing of CSS3 selectors, see Appendix D. See Also Michal Wojciechowski’s “Turning Lists into Trees” at http://odyniec.net/articles/turn ing-lists-into-trees/ 6.15 Creating a Star Ranking System Problem You want to display a star rating system that allows users to visually pick their own ratings. Solution The first step is to set up the HTML to include an unordered list with five options, as shown in Figure 6-30: CSS Cookbook Submit your review: 1 Star 2 Stars 3 Stars 4 Stars 5 Stars Next, create an image containing every combination of star ratings, along with an active hover state, as shown in Figure 6-31. (You may want to make each star a square shape, as it makes coding the CSS a little bit easier.) 6.15 Creating a Star Ranking System | 335 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  12. Figure 6-30. Default rendering of the star ranking HTML Figure 6-31. Every combination of star rankings in one image With the star image set, use CSS rules to restrict the width and height of the unordered list and bring in the star matrix: .rating { margin: 0; padding: 0; list-style: none; clear: both; width: 75px; height: 15px; background-image: url(stars.gif); background-repeat: no-repeat; 336 | Chapter 6: Lists Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  13. position: relative; } Next, float each list item (for IE6 support) while removing its text using a negative value with the text-indent property: .rating li { text-indent: −9999em; float: left; /* for IE6 */ } The next step is to absolutely position each list item’s link in a row within the 75 px boundary of the unordered list set previously: .rating li a { position: absolute; top: 0; left: 0; z-index: 20; height: 15px; width: 15px; display: block; } .rating .one a { left: 0; } .rating .two a { left: 15px; } .rating .three a { left: 30px; } .rating .four a { left: 45px; } .rating .five a { left: 60px; } With the blocks in place, you can apply the default rating to the product through CSS. For example, a 2 out of 5 star review would need a simple background-position decla- ration block, as shown in Figure 6-32: #prod345781 .rating { /* background-position: 0 0px; 0 out of 5 */ /* background-position: 0 −15px; 1 out of 5 */ background-position: 0 −30px; /* 2 out of 5 */ /* background-position: 0 −45px; 3 out of 5 */ /* background-position: 0 −60px; 4 out of 5 */ /* background-position: 0 −75px; 1 out of 5 */ } 6.15 Creating a Star Ranking System | 337 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  14. Figure 6-32. A two-star rating To add the user feedback portion of the star ranking system, set each list item’s link to expand to fit the entire 75-pixel width and reinsert the star image as the background image: #prod345781 .rating li a:hover { z-index: 10; width: 75px; height: 15px; overflow: hidden; left: 0; background-image: url(stars.gif); background-repeat: no-repeat; } Then write specific rules that move the background image so that the second set of color stars appears. How far the background image moves upward depends on which star ranking the user is mousing over, as shown in Figure 6-33: #prod345781 .rating .one a:hover { background-position: 0 −105px; /* 1 out of 5 */ } #prod345781 .rating .two a:hover { background-position: 0 −120px; /* 2 out of 5 */ } #prod345781 .rating .three a:hover { background-position: 0 −135px; /* 3 out of 5 */ } #prod345781 .rating .four a:hover { 338 | Chapter 6: Lists Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  15. background-position: 0 −150px; /* 4 out of 5 */ } #prod345781 .rating .five a:hover { background-position: 0 −165px; /* 5 out of 5 */ } Figure 6-33. Hovering over the stars, which shows the user’s personal rating of a product or service Discussion This Solution relies on several techniques. The first crucial technique is the use of a CSS sprite, an image with several icons placed within the same image (see Recipe 4.33 for more information). Using the background image of the unordered list itself, the initial star rating is set through background positioning of the star image. The next technique is to change the positioning technique, called shackling (see Rec- ipe 2.25). By absolutely positioning each link within the unordered list side by side, the user is able to click on how many stars to assign the product or service. Finally, the last technique reuses the CSS sprite image. As the user selects which star rating to give the product or service, the width of the link changes to fill the entire width of all the stars. This allows the background image to come in and appear over the unordered list’s own background image. 6.15 Creating a Star Ranking System | 339 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  16. Even though these two elements are using the same background image, the link is placed higher or above the li property’s background. Therefore, the link’s background image is visible while the li property’s background is not. Setting the background-position value to a higher negative value moves the different set of star colors into position. See Also Paul O’Brien’s in-depth article about this star matrix technique at http://www.search -this.com/2007/05/23/css-the-star-matrix-pre-loaded/ 340 | Chapter 6: Lists Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  17. CHAPTER 7 Links and Navigation 7.0 Introduction Without links, the point of the Web would be lost. Links let you follow a trail of information from one web page to another and from one idea to another, regardless of where the site’s server is located in the world. In 1996, web usability expert Jakob Nielsen listed the use of nonstandard link colors as one of the top 10 mistakes in web design (see http://www.useit.com/alertbox/9605 .html). However, his advice to use blue for the link color for pages that the user hasn’t visited and purple or red to represent previously visited pages came from consistency concerns, not aesthetics. Thankfully, he has updated his thoughts on link colors for the new millennium (see http://www.useit.com/alertbox/link-list-color.html). Links, being an essential part of the World Wide Web, can be both consistent and visually pleasing. This chapter shows how to improve aesthetics by changing link styles. You’ll learn everything, from how to remove the underline from links to how to change cursors, create rollovers without the need for JavaScript, create a horizontal tab menu, and much more. 7.1 Easily Generating Text-Based Menus and Submenus Problem You want to quickly generate the markup for a navigation list along with premade styles. 341 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  18. Solution Go to Accessify’s menu builder, List-O-Matic (see http://accessify.com/tools-and-wiz ards/developer-tools/list-o-matic/). Fill out labels for navigation menus, link addresses, and the optional title attributes, as shown in Figure 7-1. Figure 7-1. Online web application for generating accessible menus with unordered lists 342 | Chapter 7: Links and Navigation Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  19. Next, pick the style of navigation menu, as shown in Figure 7-2. Figure 7-2. Examples of the menu designs Click “Show me the markup” to get the markup and CSS rules that can be added directly to your web page. Discussion Utilizing both unordered lists and links (see Recipe 1.10), Accessify’s List-O-Matic handles the heavy lifting of coding and styling a navigation menu. To fit a style within your site, be sure to customize the CSS rules to your site’s design. See Also A video tutorial on how to use List-O-Matic, with a voiceover by someone with a British accent, at http://accessify.com/screencasts/list-o-matic/ 7.2 Removing Underlines from Links (and Adding Other Styles) Problem You want to remove the default underlining of links, as shown in Figure 7-3. 7.2 Removing Underlines from Links (and Adding Other Styles) | 343 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
  20. Figure 7-3. Links without underlines Solution Use the text-decoration property with the pseudo-class selector for unvisited and vis- ited links: a:link, a:visited { text-decoration: none; } Discussion Use the :link and :visited pseudo-classes to apply styles to links within a web docu- ment. The :link pseudo-class applies to links that the user has not visited. The :visited pseudo-class corresponds to links that the user has visited. The text-decoration property can take up to five settings, shown in Table 7-1. 344 | Chapter 7: Links and Navigation Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Đồng bộ tài khoản