Center CSS Menu Writer menu on a page

1. Dreamweaver CS4 or higher.
   
2. Design Extender (alternately, CSS Menu Writer) installed and activated in Dreamweaver.
   
3. Site defined in Dreamweaver with a saved page and CSS-based layout. Watch video tutorial: Setting up a site in Dreamweaver.

The first step in centering requires you to measure your navigation menu. Start by determining the exact width of the menu, including any margins or padding applied to the left or right of the navigation elements. You can use WebAssist's CSS Menu Writer or Firefox's MeasureIt add-on to measure the full width of your menu in your browser.

Method one: CSS Menu Writer

1. Open a page containing the navigation menu on your Dreamweaver site.
   
   
   
   
   
2. In the Properties inspector, click the Edit Menu button to open the CSS Menu Writer interface.
   
   
   
   
   
3. Click the Theme Define button.
   
   
   
   
   
4. Total the values entered for the following options.
   
   1. Width for each div element.
      
   2. Any left or right margins applied to any div element.
      
   3. Any left or right padding applied to any div element.

   
   

   
   
   
5. The resulting number should be the total width of your menu. In this example, the menu's width is 330 px.

Option two: Firefox MeasureIt

1. Go to MeasureIt to install the Firefox add-on.
   
   
   
   
   
2. Open the page on your Dreamweaver site containing your menu in Firefox.
   
   
   
   
   
3. Select the icon installed by downloading the MeasureIt add-on.
   
   
   
   
   
4. Drag your cursor from the left edge of your menu to the right edge. The MeasureIt add-on will display the total width of the selected area.
   
   
   
   
   
5. Take note of the width of your menu that is displayed by MeasureIt.

The second step in centering your navigation menu is to create or modify the div element which positions it on your page.

1. Select the div element that your navigation menu is inserted in. Typically, this would be named topnavigation.
   
   
2. From the CSS Styles panel, choose Edit Rule. CS3 users choose Edit Style.
   
   
   
   
   
3. From the CSS Rule Definition window, choose the Box category, placing your cursor in the width field.
   
   
4. Enter the width you calculated for your menu. Make sure px is selected from the Width menu list
   
   
5. Uncheck the Margin Same for all checkbox.
   
   
6. Choose auto from the Margin Right and Margin Left menu.
   
   
   
   
   
7. Click OK to save your changes.
   
   
8. Save your page ( Ctrl or Cmd + S).
   
   
9. Preview your page in a browser (File > Preview in Browser).
   
   
   

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

Sign in to add comments