Hiding Specific Elements

I'm sure many of you have used the Dreamweaver show and hide layers functionality. What you are about to do is similar. Instead of using visibility: hidden; to hide elements, you are going to use display: none;.

The big difference here is that visibility: hidden; reserves the space for an element. So although you can't see it on the page, you can see the area that is reserved for it, assuming that element is in the document flow. By contrast, display: none; totally removes the element from the display and no space is reserved for it at all. It's as if it doesn't exist. This is ideal for removing elements from one media type that are required in another media type, such as the (unneeded) navigation I mentioned earlier.

If all you have to do is set a CSS property and value of display: none; to avoid showing any given element, then it makes absolutely good sense to create a grouped selector so that you can hide all your unwanted elements in one fell swoop. This is what you'll do once you have completed your assessment of the content that is on display.

Selecting the Elements to Hide

Let's assess the layout and see exactly which elements you do not want to appear for users who print a page:

• skip-navigation link
• rightcol div
• leftcol div
• header div

The skip-navigation link, rightcol div, and leftcol div are all screen types of navigation, so it's obvious why you wouldn't need those elements on a printable page. But what about the header div? That has some valuable information in it, right? Well, yes, it does but it is also problematic because it has a background color and a background image that won't print by default.

Furthermore, the logo says nothing about who you are and what you do. It is just simply a nice graphic that works when it appears in tandem with the background image of the header div, which you are no longer using. This makes the header div pretty much a nonentity, and the printable page will be much better off without it. You'll take care of the header for the printed page in a different way later on.

Complete the following steps in the HealthPrint.css file:

1. Below your #wrapper selector, type #header, #leftcol, #rightcol, #skip { and press Enter.
2. Type display: none; and press Enter.
3. Type } and press Enter.
4. Save your work.

5. View your health.html file in Design view. Your page should now look like Figure 5.

Figure 5. The health.html page in the Dreamweaver 8

As you can see from Figure 5, the four elements you named in the grouped selector have now been removed from the print version of the page.

Styling the Remaining Elements

Many of the styles you will want to use already exist within the health.css file. In this section of the tutorial, you will be copying and pasting several rules and editing their styles. To work along with this tutorial, you should have your health.html file and two CSS files open:

• View the movie: Styling for Print

1. Locate the body rule.
2. Change the font-family value to this: "Times New Roman", Times, serif;
3. Select the #content h1, #content h2, and #content p rules from the health.css file.
4. Paste them into the HealthPrint.css file.

5. Edit each of the rules so they look like this:

   #content h1 {
      
      color: #577f1c;
      }
   
   #content h2 {
      
      color: #577f1c;
   }
   
   #content p {
      
      margin: 12px;
   }
   

6. Select your #footer and #footer p rules from your health.css file.
7. Paste them into your HealthPrint.css file.

8. Make the edits as shown below:

   #footer {
      clear: both;
   }
   
   #footer p {
      
      color: #999;
      padding: 8px;
      text-align: right;
   }
   

9. Copy the .left rule from the health.css file and paste it into the HealthPrint.css file. This rule does not require any edits.
10. Copy the blockquote rule from the health.css file and paste it into your HealthPrint.css file.

11. Edit the blockquote rule so it looks like the following:

    blockquote {
       
       border: 1px solid #000;
       padding: 6px;
       font-family: Arial, Helvetica, sans-serif;
    }
    

12. Save your work.

13. Open your health.html in Design view. It should look like Figure 6.

    

    Figure 6. The health.html page in the Dreamweaver 8 print view

14. Preview the page in your browser.

15. Select File > Print Preview in your browser (or comparable menu option). You should now see something like Figure 7.

Figure 7. The finished page in the browser's print view

Where to Go from Here

In this tutorial you learned how to implement a print style. You saw how you can hide elements of your page from your users based on the media type with which they view your document.

I showed you how to change the font family and its related properties and values to those best suited to the given media type. For instance, you changed the default family to a serif font for printing, where you had been providing a sans-serif font for the screen. You also changed the size of the fonts from a percentage value to a printer-friendly point size.

In the next and final part of this series, you design a CSS style for handheld devices that are HTML-capable. I also show you how to switch headers to provide a more suitable display for the small screens you will be targeting.

Applying CSS from Screen to Print to Handheld – Part 7: Suitability for Handheld Devices

Page 4 of 4

Previous Page