close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Web development tutorial

Center CSS Menu Writer menu on a page

Tutorial created by Kate Ford

Categories: Design Extender, CSS, Dreamweaver

rating

Depending on your site design, you may want your CSS Menu Writer navigation menu to be centered on your page. This can be achieved by modifying your existing CSS layout. This tutorial shows you the steps required for centering your navigation menu on a page using any CSS-based layout.

arrow downWhat do you need to start?

  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.

arrow downMeasure the menu

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.

arrow downModify the navigation div

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).

arrow downReviews and comments

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
rating

: 3 Years, 10 Months, 3 Weeks, 3 Days, 10 Hours, 44 Minutes ago

create menu item in dreameviewer8

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.