Creating Spry Elements and Alternate Style Sheets - New Perspectives on Adobe Dreamweaver CS5, Comprehensive - page 494

◗

5. On the Style Rendering toolbar, click the Render Screen Media Type button

to display the home page with screen styles.

The Spry data set does not display useful information in the printed version of the
page because the interactivity is not available on paper. You will remove the Spry data
set from the print display. Even though the styles for the Spry data set are in another style
sheet, you can create an alternate style for print within the main style sheet. You will
create an alternate style for the .MasterDetail style that surrounds the entire Spry data set
that sets the display to none.

To modify the MasterDetail style for the Spry data set:

◗

1. Return to the nbf_styles.css style sheet.
◗

2. Scroll to the bottom of the page, and add a blank line directly above the closing
bracket for the print media attribute.

◗

3. In the blank line, type .MasterDetail { to start the new style, and then press the
Enter key.

◗

4. Type display: none; on the new line, and then press the Enter key.
◗

5. Type } to close the style, and then save the page. See Figure 8-51.

Figure 8-51 Code for the alternate MasterDetail style

add the MasterDetail
style above the
closing bracket for
the media tag

sets the Spry data set to
not display on the print
version of the page

◗

6. Return to the index.html page, and then, on the Style Rendering toolbar, click the
Render Print Media Type button to display the print version of the page. The
Spry data set has been removed from the print display. See Figure 8-52.