How Do I Center Web Pages on Any Monitor in Dreamweaver 8?

Using CSS to center a web page.

Designing a Web page can be a complex project. There are many things to consider when creating a Web page. You must choose fonts, colors and images that will be appealing while still fitting into the theme of your page. One point often overlooked is varying degrees of resolutions and screen sizes. Using the CSS rule and a div layer on a Web page will keep the contents centered regardless of the settings on the monitor viewing the page. For smaller views, the text will wrap and become longer. Larger screens will see more white space and spread out text.

Instructions

1. Open Dreamweaver 8 on your computer.

2. Design your page layout.

3. Move to the top of the screen and select the "Code" view tab.

4. Navigate to an area above the </header> tag in the top section of your code. Insert a line and type <div id = "wrap">.

5. Move to the bottom line of your code. Insert a line right above </html> and type </div>.

6. Go back to the "Design" view on the page by clicking the tab at the top of the screen.

7. Press the "Shift + F11" keys on your keyboard. This will open the CSS styles panel.

8. Click on the "+" icon to establish a new CSS rule.

9. Select "Text" then "CSS Styles" and "New CSS Rule."

10. Type the following into the rules text box:

    #wrap{
    margin: 0 auto;
    width: 760px;
    position: relative;
    }

11. Save the rule and test the page in a browser window (F12).

References

• Adobe: An Overview of CSS in Dreamweaver 8
• Adobe Live Docs: Defining CSS style positioning properties