How to Center Web Pages Horizontally in Dreamweaver Cs4
Centering a Web page in Dreamweaver involves using a container div to contain the page, which has a fixed width assigned. By setting equal left and right margins, you create an equal gap on either side of the container div, which centers the page. As you do not know the width of the visitor's browser, you cannot set a fixed value for the left and right margins, as the necessary width changes depending on the width of the browser. Use the Dreamweaver CS4 CSS auto-margin property to automatically create the correct margins and center the page.
Other People Are Reading
Instructions
-
-
1
Launch Dreamweaver CS4 and open a new HTML page.
-
2
Click "Insert" from the main menu along the top of the screen, then click "Layout Objects" and "Div Tag." This allows you to insert a HTML div which contains the main content for the page. Type "page" for the ID in the dialog box that appears.
-
-
3
Click the "New CSS Rule" button under the ID field in the dialog box. The selector "#page" is entered automatically for you. Click the "OK" button in the top-right corner of the dialog box in order to start entering the CSS properties to center the page.
-
4
Click on "Box" in the "Category" menu on the left side of the CSS properties box. This allows you to alter the size and margins for the "page" div. Type "960" into the "Width" box and make sure "px" is selected from the units drop-down menu. This sets the width of the page to 960 pixels.
-
5
Uncheck the "Same for all" check box in the "Margin" area, then select "auto" from the drop-down menus for the left and right margins. Setting the left and right margin to "auto" provides an equal distance for the left and right margins, which is calculated by the browser to ensure that the page is centered. Click the "OK" button to add the styles to the page.
-
6
Click "OK" to close the "Insert Div tag" dialog box and add the div to the page. Switch to "Design" view in Dreamweaver to see that the page is automatically centered and ready for you to add content inside the "page" div.
-
1
Tips & Warnings
Once you are happy with your new page, turn it into a template to use as a base for future pages.
