› Dreamweaver tutorial: Creating a centered container for your page in Dreamweaver

Dreamweaver tutorial: Creating a centered container for your page in Dreamweaver

What you’ll learn in this Dreamweaver Tutorial:

  • Creating a centered container
  • Making layouts cross-browser compatible

This tutorial provides you with a foundation for working with Adobe Dreamweaver centered containers. It is the fifth lesson in the Adobe Dreamweaver CS5 Digital Classroom book. For more Adobe Dreamweaver training options, visit AGI’s Dreamweaver Classes.

Adobe Dreamweaver Tutorial: Creating a centered container for your page in Dreamweaver

The goal of this lesson is to create the home page for the Organic Utopia site. This page will look like the thumbnail below.

The home page will be a different design and layout than the rest of the site (this layout is covered in more detail in Lesson 6), and you will start by creating a container that will end up nesting the other sections of your page such as the header, sidebar and other elements. This container will have a fixed width of 770 pixels and also be centered within the browser window.

This container will use a combination of relative positioning and automatic margins to achieve the centering effect. Relative positioning allows you to position this box relative to the body of the page, and the automatic margins will force the fixed-width container to stay centered regardless of the browser window’s width.

1 In the Files panel, navigate to the dw05lessons folder and double-click the layout.html file to open it. This document has been partially prepared for you, with a background color and a page title added. Additionally, the default font, font color, and font size have been defined as Lucida Sans, grey, and small, respectively. Your first step will be to add a box, which will become your main column of text.

2 If it’s not already visible, open the Insert panel by choosing Window > Insert. The Insert panel features a list of objects that can be added to your pages easily.

3 In the bottom-left corner of your document window, click on the <body> tag. Remember, the body tag encloses all the other tags within a page. You will now create a new <div> element that will function as a container for the other layout elements. In the Insert panel, click on the Insert Div Tag button.

Click the Insert Div Tag to add a
container div element.

4 The Insert Div Tag dialog box appears. Click in the ID text field and type container, then click on the New CSS Rule button. In the New CSS Rule definition dialog box that appears, make sure that #container is listed as the Selector Name and then click OK. The CSS Rule definition dialog box appears and you can begin to style your container div.

5 Select the Box listing in the Category column on the left side of the dialog box. In the Width text field, type 770 and make sure px (pixels) is selected from the drop-down menu to the right. For Height, type 800 in the text field. In the Margin section, uncheck Same for All, then, from the Right margin drop-down menu, choose auto. Choose auto from the Left margin drop-down menu as well.

Choose the settings for the #container element.

You’ll explore using margins soon, but by setting a margin value of auto to the left and right side of the container, you are instructing the browser to put equal amounts of space on the right and left sides. The end result will be a box that is centered within the browser window.

6 Select the Background category on the left side of the dialog box, then click the Background-color swatch and choose the white (#FFF) swatch. This adds a background color of white to your entire container, separating it from the background.

7 Select the Positioning category on the left side of the dialog box and choose relative from the Position drop-down menu. This is key to the success of your next steps. By setting the position of the container to relative you will be able to position the page elements using the container as a frame of reference. Press OK in this dialog box, as well as OK for the Insert Div Tag dialog box that is still open.

8 Choose File > Save, then choose File > Preview in Browser. Your container will be centered in the middle of your browser window and Dreamweaver’s default placeholder text is aligned in the top left of your container. (Occasionally, we have noticed Dreamweaver does not add this placeholder text, if this is the case for you, type content for id “container” Goes Here.)

With position set to relative and auto margins the container element will always be centered.

Resize the browser width; the container stays centered until the window is narrower than 770 pixels, at which point the box is cropped. Close your browser. If your container div did not appear centered, it is possible you are using an older browser. Even if your container div is centered, there are a few additional steps you will now add to ensure the page centers in older browsers.

Pages

These tutorials are created by and the team of expert instructors at American Graphics Institute.