Learning Web Design Third Edition- P36 potx

Part III: CSS for Presentation 336 CSS Layouts in Review Test Yourself If you successfully created multiple-column layouts in the exercises, then you’ve gotten the main point of this chapter. Here are a few questions to make sure you got the finer details. Match each layout type with the factor that determines the final size of the page area. Fixed-width layouts a. The browser window Liquid layouts b. Font size Elastic layouts c. The designer Match each layout type with the unit of measurement used to create it. Fixed-width layouts a. Ems Liquid layouts b. Pixels Elastic layouts c. Percentages and/or auto Match each layout type with its potential advantage. Fixed-width layouts a. Predictable line lengths Liquid layouts b. No awkward “leftover” space Elastic layouts c. Predictable layout grid Match each layout type with its potential disadvantage. Fixed-width layouts a. Uncomfortably long line lengths Liquid layouts b. Images don’t resize with the page Elastic layouts c. Awkwardly short lines at large text sizes Based on the techniques in this chapter, which CSS layout method would you choose for each situation (floats or positioning)? My page has a full-width footer: _____________ I don’t want to change the order of my source code: _____________ I don’t want to have to worry about overlapping elements: __________ 1. 2. 3. 4. 5. 337 IN THIS CHAPTER Style properties for tables Changing list bullets and numbers Turning lists into navigation bars Replacing text with images CSS rollovers By now you have a solid foundation in writing style sheets. You can style text, element boxes, and even create page layouts using floats and positioning. But there are a few more properties and common CSS techniques that I want you to know about before we move on to creating web graphics in Part IV. This chapter is a grab bag of sorts. It starts with the CSS properties specifi- cally related to table and list formatting. It then moves on to common CSS- based design practices such as using lists as the basis for horizontal naviga- tion bars, using images in place of text in a way that is accessible to screen readers, and using the :hover pseudoselector to create rollovers (an effect that used to require JavaScript). N o t e This chapter merely scratches the surface of CSS techniques, so I encourage you to further your education starting with the CSS resources listed at the end of Chapter 11, Cascading Style Sheets Orientation. Style Properties for Tables We’ve already covered the vast majority of style properties you’ll need to style content in tables. For example, the appearance and alignment of the content within the cells can be specified using properties we covered in Chapter 12, Formatting Text and Chapter 13, Colors and Backgrounds. In addition, you can treat the table and cells themselves with padding, margins, and borders as covered in Chapter 14, Thinking Inside the Box. There are a few CSS properties, however, that were created specifically for tables. Some of them are fairly esoteric and are briefly introduced in the sidebar, Advanced Table Properties. This section focuses on properties that directly affect table display; specifically, the treatment of borders. CSS TECHNIQUES CHAPTER 17 Part III: CSS for Presentation 338 Style Properties for Tables Separated and collapsed borders CSS provides two methods for displaying borders between table cells: sepa- rated or collapsed. When borders are separated, a border is drawn on all four sides of each cell and you can specify the space between the borders. In the collapsing border model, the borders of adjacent borders “collapse” so that only one of the borders is visible and the space is removed (Figure 17-1). 5px border-collapse: separate; border-collapse: collapse; 15px 2px border 2px border Figure 17-1. Separated borders (top) and collapsed borders (bottom). The border-collapse property allows authors to choose which of these bor- der rendering methods to use. border-collapse Values: separate | collapse | inherit Default: separate Applies to: table and inline-table elements Inherits: yes Separated border model Tables render with separated borders by default, as shown in the top table in Figure 17-1. You can specify the amount of space you’d like to appear between cells using the border-spacing property. Unfortunately, Internet Explorer 6 (and earlier) for Windows does not support the border-spacing property, so the effect will be lost for those users. It is supported in IE7. border-spacing Values: length length | inherit Default: 0 Applies to: table and inline-table elements Inherits: yes Advanced Table Properties There are a few more properties related to the CSS table model that you are not likely to need if you are just starting out (or perhaps ever). Table layout The table-layout property allows authors to specify one of two methods of calculating the width of a table. The fixed value bases the table width on width values provided for the table, columns, or cells. The auto value bases the width of the table on the minimum width of the contents of the table. Auto layout may display nominally more slowly because the browser must calculate the default width of every cell before arriving at the width of the table. Table display values Chapter 14 introduced the display property used to specify what kind of box an element generates in the layout. CSS is designed to work with all XML languages, not just (X)HTML. It is likely that other languages will have the need for tabular layouts, but will not have elements like table , tr , or td in their vocabularies. To this end, there are a variety of table-related display values that allow authors of XML languages to assign table layout behavior to any element. The table-related display values are: table , inline- table , table-row-group , table- header-group , table-footer-group , table-row , table-column-group , table-column , table-cell , and table-caption . You could assign these display roles to other (X)HTML elements, but it is generally discouraged. Browser support for table display values is incomplete as of this writing. Advanced Table Properties There are a few more properties related to the CSS table model that you are not likely to need if you are just starting out (or perhaps ever). Table layout The table-layout property allows authors to specify one of two methods of calculating the width of a table. The fixed value bases the table width on width values provided for the table, columns, or cells. The auto value bases the width of the table on the minimum width of the contents of the table. Auto layout may display nominally more slowly because the browser must calculate the default width of every cell before arriving at the width of the table. Table display values Chapter 14 introduced the display property used to specify what kind of box an element generates in the layout. CSS is designed to work with all XML languages, not just (X)HTML. It is likely that other languages will have the need for tabular layouts, but will not have elements like table , tr , or td in their vocabularies. To this end, there are a variety of table-related display values that allow authors of XML languages to assign table layout behavior to any element. The table-related display values are: table , inline- table , table-row-group , table- header-group , table-footer-group , table-row , table-column-group , table-column , table-cell , and table-caption . You could assign these display roles to other (X)HTML elements, but it is generally discouraged. Browser support for table display values is incomplete as of this writing. Style Properties for Tables Chapter 17, CSS Techniques 339 The values for border-spacing are two length measurements. The horizontal value comes first and applies between columns. The second measurement is applied between rows. If you provide one value, it will be used both horizon- tally and vertically. The default setting is 0, causing the borders to double up on the inside grid of the table. These are the style rules used to create the custom border spacing shown in the top table in Figure 17-1. table { border-collapse: separate; border-spacing: 15px 3px; border: none; /* no border around the table itself */ } td { border: 2px solid purple; /* borders around the cells */ } Collapsed border model When the collapsed border model is chosen, only one border appears between table cells. This is the style sheet that created the bottom table in Figure 17-1. table { border-collapse: collapse; border: none; /* no border around the table itself */ } td { border: 2px solid purple; /* borders around the cells */ } Notice that although each table cell has a 2-pixel border, the borders between cells measure a total of two pixels, not four. Borders between cells are cen- tered on the grid between cells, so if cells are given a 4-pixel border, two pixels will fall in one cell and two pixels in another. For odd numbers of pixels, the browser decides where the extra pixel falls. In instances where neighboring cells have different border styles, a compli- cated pecking order is called in to determine which border will display. If the border-style is set to hidden for either of the cells, then no border will display. Next, border width is considered: wider borders take precedence over narrower ones. Finally, if all else is equal, it comes down to a matter of style. The creators of CSS rated the border styles from most to least precedence as follows: double, solid, dashed, dotted, ridge, outset, groove, and (the lowest) inset. Empty cells For tables with separated borders, you can decide whether you want empty cells to display their backgrounds and borders using the empty-cells property. N o t e Although the border-spacing default is zero, browsers add two pixels of space for the cellspacing attribute by default. If you want to see the doubling-up effect, you need to set the cellspacing attribute to 0 in the table element. N o t e Although the border-spacing default is zero, browsers add two pixels of space for the cellspacing attribute by default. If you want to see the doubling-up effect, you need to set the cellspacing attribute to 0 in the table element. Part III: CSS for Presentation 340 Changing List Bullets and Numbers empty-cells Values: show | hide | inherit Default: show Applies to: table cell elements Inherits: yes For a cell to be “empty,” it may not contain any text, images, or nonbreaking spaces. It may contain carriage returns and space characters. Figure 17-2 shows the previous separated table border example with its empty cells (what would be Cell 14 and Cell 15) set to hide. table { border-collapse: separate; border-spacing: 15px 3px; empty-cells: hide; border: none; } td { border: 1px solid purple; } Figure 17-2. Hiding empty cells with the empty-cells property. Before we move on, take a moment to get acquainted with table formatting, using these properties and many of the others we’ve covered so far, in Exercise 17-1. Changing List Bullets and Numbers As you know, browsers automatically insert bullets before unordered list items and numbers before items in ordered lists. For the most part, the ren- dering of these markers is determined by the browser. However, CSS provides a few properties that allow authors to choose the type and position of the marker, or replace the bullet with a custom graphic. Choosing a Marker Use the list-style-type property to select the type of marker that appears before each list item. This property replaces the deprecated type attribute in (X)HTML. Changing List Bullets and Numbers Chapter 17, CSS Techniques 341 list-style-type Values: none | disc | circle | square | decimal | decimal-leading-zero | lower-alpha | upper-alpha | lower-latin | upper-latin | lower-roman | upper-roman | lower-greek | inherit Default: disc Applies to: ul , ol , and li (or elements whose display value is list-item) Inherits: yes This exercise gives you a chance to apply all of your style sheet knowledge to match the table samples in Figure 17-3. The starter document, imagetable.html, is available with the materials for this chapter at www.learningwebdesign.com/ materials/. I recommend you save the document after each step to see the effects of each change. The final style sheet is in Appendix A. The sample table after Step 5 The final table after Step 7 Figure 17-3. Write the style rules to match these examples. Open the file imagetable.html in a text editor. The document contains the marked up table and a style rule for the table that sets its width and the font properties for its content. Note that the cellpadding and cellspacing attributes have been set to zero to remove default space added by the browser. Before you start adding styles, open the document in a browser to see your starting point. It’s kind of a jumbled mess, but we’ll fix that one step at a time. Start by writing a rule that formats the table cells ( td elements) in the following ways: Apply 6 pixels of padding to the top and bottom of each cell, but only 3 pixels on the left, and 12 pixels on the right. Use the shorthand padding property. Make sure the cell contents stay at the top of each cell ( vertical-align: top; ). 1. 2.   Add a 1-pixel solid olive border around each cell with the border shorthand property. Next, let’s whip those table headers into shape. Write a rule that formats th elements as follows: Make the background “olive” ( background-color ) and the text white ( color ). Left-align the text in each cell ( text-align property). Apply 3 pixels of padding on the top, left, and bottom and 12 pixels on the right edge ( padding ). Make sure the text falls at the bottom of each cell ( vertical-align ). Now we’ll add alternating background colors to the rows. Look in the markup and you’ll see that each tr element has been assigned a class of “odd” or “even.” Using class identifiers, write style rules to: Give “odd” rows a background color of #F3F3A6 (yellow- green). Give “even” rows a background color of #D4D4A2 (pale olive green). Save the document and look at it in a browser. The table is looking pretty good, but let’s play around with the border spacing to see what else we can do with it. First, in the rule for the table element, set the border-collapse property to separate and add 4 pixels of space between cells with the border-spacing property. If you use Internet Explorer 6 or earlier, you won’t see the effect of this change, but those using IE7, Firefox, or another standards-compliant browser should see a table that looks like the one in the top of Figure 17-3. Change the border-collapse property to collapse and remove the border-spacing property entirely. Take another look at the table in the browser. The border between cells should be 1 pixel wide. Finally, let’s get rid of borders on the sides of cells altogether to give the table the streamlined look of the table at the bottom of Figure 17-3. Do this by changing the border property for td elements to border-bottom . Save the file and see if it matches the sample in the browser.  3.     4.   5. 6. 7. exercise 17-1 | Styling a table Part III: CSS for Presentation 342 Changing List Bullets and Numbers Use the none value to turn the marker off for a list item. This is useful when using a semantically marked up list as the basis for navigation (as we’ll do later in this chapter) or form field entries. The disc, circle, and square values generate bullet shapes just as browsers have been doing since the beginning (Figure 17-4). Bullet size changes with the font size. Unfortunately, there is no way to change the appearance (size, color etc.) of generated bullets, so you’re basically stuck with the browser’s default rendering. disc circle square Figure 17-4. The list-style-type values disc, circle, and square The remaining keywords (Table 17-1) specify various numbering and letter- ing styles for use with ordered lists. The browser controls the presentation of generated numbers and letters, but they usually match the font properties of the associated list item. Table 17-1. Lettering and numbering system keywords in CSS2.1 Keyword System decimal 1, 2, 3, 4, 5 decimal-leading-zero 01, 02, 03, 04, 05 lower-alpha a, b, c, d, e upper-alpha A, B, C, D, E lower-latin a, b, c, d, e (same as lower-alpha) upper-latin A, B, C, D, E (same as upper-alpha) lower-roman i, ii, iii, iv, v upper-roman I, II, III, IV, V lower-greek α, β, γ, δ, ε Marker position By default, the marker hangs outside the content area for the list item, dis- playing as a hanging indent. The list-style-position allows you to pull the bullet inside the content area so it runs into the list content. List Item Display Role You may have noticed that the list style properties apply to “elements whose display value is list-item.” The CSS2.1 specification allows any element to perform like a list item by setting its display property to list- item . This property can be applied to any (X)HTML element or elements in another XML language. For example, you could automatically bullet or number a series of paragraphs by setting the display property of paragraph ( p ) elements to list-item as shown in this example: p.bulleted { display: list-item; list-style-type: upper- alpha; } List Item Display Role You may have noticed that the list style properties apply to “elements whose display value is list-item.” The CSS2.1 specification allows any element to perform like a list item by setting its display property to list- item . This property can be applied to any (X)HTML element or elements in another XML language. For example, you could automatically bullet or number a series of paragraphs by setting the display property of paragraph ( p ) elements to list-item as shown in this example: p.bulleted { display: list-item; list-style-type: upper- alpha; } N o t e CSS2 included additional numbering systems including hebrew, armenian, geor- gian, and various Japanese number sets, but these were dropped in CSS2.1 due to lack of support. N o t e CSS2 included additional numbering systems including hebrew, armenian, geor- gian, and various Japanese number sets, but these were dropped in CSS2.1 due to lack of support. Changing List Bullets and Numbers Chapter 17, CSS Techniques 343 list-style-position Values: inside | outside | inherit Default: outside Applies to: ul , ol , and li (or elements whose display value is list-item) Inherits: yes An example should make this more clear. I’ve applied a background color to the list items in Figure 17-5 to reveal the boundaries of their content area boxes. You can see that when the position is set to outside (left), the markers fall outside the content area, and when it is set to inside, the content area box extends to include the marker. li {background-color: #F99;} ul#outside {list-style-position: outside;} ul#inside {list-style-position: inside;} Unfortunately, there is no way to set the distance between the marker and the list item content in CSS2.1, but this functionality may be added in CSS3. WA R N I N G Internet Explorer for Windows (6 and earlier) always includes the bullet in the content area box. This can cause some inconsistent results when positioning list blocks or add- ing borders, padding, and margins to list items. Make your own bullets One nifty feature that CSS provides for lists is the ability to use your own image as a bullet using the list-style-image property. list-style-image Values: <URL> | none | inherit Default: none Applies to: ul , ol , and li (or elements whose display value is list-item) Inherits: yes The value of the list-style-image property is the URL of the image you want to use as a marker. The list-style-type is set to disc as a backup in case the image does not display, or the property isn’t supported by the browser or other user agent. The result is shown in Figure 17-6. ul { list-style-image: url(/images/happy.gif); list-style-type: disc; list-style-position: outside; } It is important to note that the URL is always interpreted as relative to the style sheet, whether it is embedded in the document or an external file else- where on the server. Site root relative URLs, as shown in the example, are the preferred method because the pathname always starts at the root directory of the server and is not dependent on the location of the style sheet. Outside Inside Outside Inside Figure 17-5. The list-style-position property. Outside Inside Outside Inside Figure 17-5. The list-style-position property. Figure 17-6. Using an image as a marker.Figure 17-6. Using an image as a marker. Part III: CSS for Presentation 344 Using Lists for Navigation The list-style shorthand property The three list properties (for type, position, and image) can be combined in a shorthand list-style property. list-style Values: <list-style-type> <list-style-position> <list-style-image> | inherit Default: see individual properties Applies to: ul , ol , and li (or elements whose display value is list-item) Inherits: yes The values for each property may be provided in any order and may be omit- ted. Keep in mind that omitted properties are reset to their default values in shorthand properties. Be careful not to override list style properties listed earlier in the style sheet. Each of these examples duplicates the rules from the previous example. ul { list-style: url(/images/happy.gif) disc outside; } ul { list-style: disc outside; url(/images/happy.gif) } ul { list-style: url(/images/happy.gif) disc ; } Using Lists for Navigation Back in Chapter 5, Marking Up Text, I showed an example of a semantically marked up unordered list that displays as a navigation toolbar using only style sheet rules. Twelve chapters later, here I am to tell you how that’s done. There are two methods for changing a list into a horizontal bar. The first makes the list items display as inline elements instead of their default block- level behavior. The second uses floats to line up the list items and the links. All of the examples in this section use this markup for an unordered list that contains five list items. Figure 17-7 shows how it looks using default browser styles. I’ve omitted real URL values in the a elements to simplify the markup. <ul id="nav"> <li><a href="#">Serif</a></li> <li><a href="#">Sans-serif</a></li> <li><a href="#">Script</a></li> <li><a href="#">Display</a></li> <li><a href="#">Dingbats</a></li> </ul> Inline list items Let’s begin with the inline list item method. This technique uses the display property (introduced in Chapter 14) to make the list item elements behave as inline elements instead of as block elements (their default display role). As a result, they line up next to one another instead of each starting on a new line. We’ll start with the minimum style rules for removing the bullets Figure 17-7. The default rendering of the example unordered list. Figure 17-7. The default rendering of the example unordered list. Using Lists for Navigation Chapter 17, CSS Techniques 345 (list-style-type: none) and making the list items appear next to each other instead of in a list (display: inline). The margins and padding are set to zero to prepare for styles that will be applied to the anchor (a) element within each li element. The result of the styles thus far are shown in Figure 17-8. ul#nav { list-style-type: none; margin: 0px; padding: 0px; } ul#nav li { display: inline; } Figure 17-8. Making unordered list items display inline instead of as block elements. Now that the items are on one line, we can apply any style to the a (anchor) elements. In this example, the link underlines have been removed and a bor- der, background color, and padding have been added. The resulting list is shown in Figure 17-9. ul#nav li a { /* selects only links in the "nav" list */ padding: 5px 20px; margin: 0px 2px; border: 1px solid #FC6A08; background-color: #FCA908; text-decoration: none; text-align: center; color: black; } Figure 17-9. Adding styles to the inline list. Floated list items The other method for creating horizontal lists uses the float property to line up the list items next to one another. Remember that when multiple consecu- tive items are floated to one side, they stack up against that edge. That’s the behavior we’ll be taking advantage of with this example. When using float, it is important to set the following element in the source to clear: both to ensure that no page content wraps around the list. . starter document, imagetable.html, is available with the materials for this chapter at www.learningwebdesign.com/ materials/. I recommend you save the document after each step to see the effects. creating web graphics in Part IV. This chapter is a grab bag of sorts. It starts with the CSS properties specifi- cally related to table and list formatting. It then moves on to common CSS- based design. display property used to specify what kind of box an element generates in the layout. CSS is designed to work with all XML languages, not just (X)HTML. It is likely that other languages will