Applying CSS from Screen to Print to Handheld – Part 1: Preparation and Groundwork

Converting the Design to CSS

In this section, you will begin the transformation of the layout from tables to CSS. You will learn how to make good use of a wrapper div and investigate the merits of utilizing a zeroing selector within your style sheet.

Setting the Wrapper and Re-creating the Banner

Your first task will be to set the wrapper div. The wrapper acts as a container to all the other elements within your design. The current layout enables you to add any excess space in the browser's viewport to the right of the design; that is, the area to the right of the banner will flex to fill up the full width of the browser window. This can make a page look a little lopsided if it is left-aligned. Your first task is to center the design and make it a fixed-width design in keeping with the current layout's content area.

Setting the Default Selectors

When you create a new page, keep the page you generated earlier as a reference point for when you make your design changes. Save this new page into the root of your local site and name it health.html.

Next, create a new CSS file (if necessary, refer to my series Designing with CSS for details). Save this new CSS file to the CSSFiles folder you created earlier as health.css. You will link this to your health.html page shortly.

Eliminate the browser default values in your health.css file by implementing a zeroing selector at the top of the style sheet, as shown in the following example:

html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {  
    margin: 0; 
    padding: 0; 
    border: 0; 
}

Using a zeroing selector removes the browser default values, which can vary greatly from browser to browser.

Next, fix what I consider to be an annoying problem with Firefox: if a page is shorter than the viewport, it jumps around as Firefox removes the scroll bar and then adds it again for longer pages. This selector causes problems in the Macintosh version of Internet Explorer. To be on the safe side, hide this rule from that browser by using a comment filter, as shown in this example:

/* hide from IE mac \*/
html {
    min-height: 100%;
    margin-bottom: 1px;
}
/* end hiding from IE5 mac */

By setting the HTML height to 100% and then adding a one-pixel margin to the bottom, you can force Firefox to draw a scroll bar. This prevents the annoying page jump that you might see on shorter pages in that browser.

Finally, set up your default values on the body element:

body {
    
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
}

I discuss the odd default font in the previous series. It prevents some scaling bugs at smaller sizes in Internet Explorer. You will scale off this value in other selectors, as you will see shortly.

Now that your first three selectors are in place, you can link your health.css file to your health.html page. After the CSS file is linked, view your selectors in the CSS panel. Either edit your CSS code by hand or let Dreamweaver do some of the footwork for you. One change in the way you link CSS files in Dreamweaver 8 is that you now control the media type from the Attach Style Sheet dialog box. For this example, set the media type value to Screen.

• View the movie: Linking the CSS File

Follow these steps:

1. Click the Attach Style Sheet icon in the CSS panel.
2. Click the browse button to navigate to the health.css file.
3. Select the file and click OK to insert the file into the browse field.
4. Select the Media pop-up menu.
5. Choose the screen option and click OK.
6. Browse through the now-attached style sheet in the CSS panel to see the values you have set for each rule in the CSS file.

Creating the Wrapper and Header Divs

A good width for a wrapper is 770 pixels because viewers with a maximized browser using a screen resolution of 800 x 600 do not need to scroll horizontally to view your content. Horizontal scrolling is something you really want to avoid. There is little else that is more annoying!

Your header div doesn't need a width; you can allow it to expand to the full width of the wrapper. A div will always expand to the width of its containing element. This is a good thing because it prevents the need for specifying width values unless you want to constrain the width.

• View the movie: Setting the Wrapper and Header Divs

Follow these steps:

1. Click the New CSS Rule icon in the CSS panel.
2. Select the Advanced option button.
3. Type #wrapper into the Selector text box.
4. Click OK to open the CSS Rule Definition dialog box.
5. Select the Box category.
6. Enter 0 in the Top and Bottom margin text boxes.
7. Enter auto in the Left and Right margin text boxes.
8. Enter 770 in the Width text box and select pixels as the unit of measurement.
9. Select the Border category.
10. Select Solid from the Style list.
11. Enter 1 in the Width text box.
12. Click the color cube and select black (#000000).
13. Click OK to close the dialog box.
14. Create the header div as an ID just as you did with the wrapper.
15. Enter #header into the Selector text box.
16. Go to the Box category.
17. Enter 101 in the Height text box and select pixels as the unit of measurement.
18. Click the OK button to close the dialog box.
19. Save your work.

Adding the Wrapper and Header Divs to the Page

You now need to add the divs to your HTML file. Switch to code view and enter the following code:

<body>
<div id="wrapper">
<div id="header">
<!-- close header -->
</div>
<!-- close wrapper -->
</div>
</body>

• View the movie: Adding the Wrapper and Header to the Page

You will notice that I have commented the closing <div> tags. This is a good practice to get into because it is very easy to lose track of them—and time-consuming to track them down within a large page.

With your code in the health.html file, you can now switch to Design view and complete the following steps:

1. Place your cursor inside the header div.
2. Click the Image icon on the Common tool bar.
3. Navigate to mm_health_photo.jpg and double-click it to insert it on the page. This opens the Accessibility dialog box.
4. Type Health and Nutrition into the first text box and click OK to insert the image.
5. Open the CSS Panel and select the header selector.
6. Click the Add Property option.
7. Select the Background-color option from the select list.
8. Click the color cube and select the color value #D5EDB3 from the right edge of the image.
9. Save your work.

Figure 2 shows you what your work should look like at this point.

Figure 2. Banner and wrapper divs in position on the page

Where to Go from Here

You have made a good start on converting your site from tables to CSS. With the header and wrapper now in position, you can learn how to implement an inner-wrapper div and fake the appearance of 100% tall columns by using a background image. Part 2 shows you how to do this.

Applying CSS from Screen to Print to Handheld – Part 2: Layout and Background Images

Page 3 of 3

Previous Page