How to Centre a Horizontal Navigation Menu Bar in Dreamweaver

Centring/Centering the Horizontal Spry Framework Menu Bar


How to Centre a Horizontal Navigation Menu Bar in Dreamweaver

by Christopher Heng, thesitewizard.com

A number of visitors have asked me how they can centre (or "center" in US English) a horizontal menu using Dreamweaver. They had tried the trick given for centring the vertical navigation menu using Dreamweaver and found that they could not get it to work on a horizontal menu. This tutorial shows you how to do it.

Assumptions

To make sure that we are all on the same wavelength, let me state my assumptions:

If any of the above is not true, you should instead read the tutorial How to Centre a DIV Block Using CSS. Although the latter is more technical, dealing with the nitty-gritty of using "raw" Cascading Style Sheets, it may help you figure out what you need to do to centre your menu.

For those of you who are lost, and have arrived here looking for more information on how to design your own website, please start by reading the article How to Create / Make a Website: The Beginner's A-Z Guide. The Guide will take you through all the steps needed to design your own site in a systematic way, and is more relevant than this tutorial.

How to Centre the Horizontal Spry Menu Bar in Dreamweaver

  1. Open the page containing your horizontal menu bar in Dreamweaver. It doesn't matter if your page is a one, two or three column website.

  2. Move your mouse over the menu bar until you see the highlighted blue caption "Spry Menu Bar MenuBar1". (Note: if you have more than one menu bar on your page, the caption may give a number other than "MenuBar1". It doesn't matter what number it shows.) Click the blue caption.

  3. Expand the CSS STYLES panel on the right side of Dreamweaver. That is, doubleclick the "CSS STYLES" tab on the rightmost column of Dreamweaver to expand it. If by doing so, you inadvertently collapsed the panel instead, doubleclick it again to expand it. (You first encountered the CSS STYLES panel in chapter 3 of the Dreamweaver CS4 tutorial.)

  4. Drag the scroll bar (if any) in the CSS STYLES panel up and down to find the line "width auto". It's probably the last line in that pane. Doubleclick that line. (For example, doubleclick the word "width" if you don't know where on the line to click.)

  5. A dialog box should appear. The title of the dialog box (in Dreamweaver CS4) should begin with the words "CSS Rule Definition for ul.MenuBarHorizontal in" followed by a filename. If the title does not say the rule is for "ul.MenuBarHorzontal", it's possible that you've not clicked the correct spot on your page. Click the "Cancel" button, and retry the above steps again.

  6. Your dialog box should show a field labelled "Width", with a value of "auto". This means that when your web page is published, the web browser will automatically compute how wide your menu needs to be and display the menu accordingly, from left to right. If the menu does not need the entire width of the page (or column), the browser will simply leave the unused space to the right blank.

    To force the browser to centre the menu, you need to specify how wide you want the menu to be.

    Yes, you read that right. I know you don't know how wide the menu is yourself. And measuring the width of the menu isn't practical, since the width will change according to the text that is displayed in the menu, so if you modify the text on the menu, the width will increase or decrease.

    In spite of that however, you will still have to make a decision about how much space you want the menu to occupy on your web page. For example, you may decide that you want your horizontal menu to occupy, say, 400 pixels. Or perhaps you want it to occupy 80% of your web page (or column, if you are using a multi-column web page)

    Note that you can always change your mind later. That is, your decision is not set in stone. You can start by entering an arbitrary number like 80%, and then if you find that it is unsuitable, simply return to this dialog and enter a new number. In other words, nothing is going to stop you from using trial and error to find an appropriate value.

    Anyway, once you've decided on an appropriate width, click the field beside the word "Width". Delete the word "auto" in the field, and enter your new number, say, 80. Then click the down arrow on the drop down box beside "px" and select "%" (or whatever unit of measurement you want).

  7. Look for the word "Margin" in the dialog box. Directly underneath "Margin", uncheck the tick in the "Same for all" checkbox. Make sure that you uncheck the correct one: that is remove the tick in the box underneath "Margin" and not "Padding".

  8. When you do that, the "Right", "Bottom" and "Left" fields in the "Margin" section will become changeable. (It was previously disabled.)

    Click the drop down box for the "Right" field and select "auto".

  9. Do the same for the "Left" drop down box: that is, click it and select "auto".

  10. Click the "OK" button to dismiss the dialog box.

Your horizontal navigation menu bar should now be centred. If it is not exactly centred, for example, it is placed too much to the left, it means that you entered a width that is too big. You can see how big it is by looking at the blue outline that Dreamweaver gives to your menu bar when you hover your mouse over it. If the blue outline extends to the right of your menu bar, with no menu items populating that blank space, your width is probably larger than it needs to be. You can now go back and reduce the number you gave. (To go back, just repeat the steps above to get back the "CSS Rule Definition" dialog box again. This time, all you need to do is to change the number you entered earlier.)

More Tips on Centring / Centering

For the perfectionist, I should probably mention that there are limits to how much you can fine-tune the width of your menu to get the perfect output.

To put things in perspective, a web page is not like a printed page, where you can control everything down to the last detail. Web pages are designed to be viewed on systems with vastly different monitor resolutions, browser window sizes, font availability, and so on. The best that you can do is to design your page so that it looks reasonably decent on the majority of systems under normal circumstances.

For example, although I test my pages under different resolutions, I normally only make sure that it is viewable and usable for the majority of my users. (See the article How to Test Your Website Under Different Screen Resolutions under Windows the Easy Way if you're interested in knowing which resolutions I check.) If a visitor perversely tries to view thesitewizard.com in a browser resized to a very small size, everything will be hopelessly misaligned, skewed and otherwise unreadable.

What I'm trying to say is, don't be too obsessed about getting your menu centred with 100% accuracy. By all means, get it approximately centered, test your site under the most common resolutions to make sure the menu doesn't look too out-of-place, and then move on to other tasks. There's more to a website than its visual appearance. Besides, visitors who are computer-savvy enough to know how to resize their browsers to a very small size are usually also smart enough to know how to solve the viewing problems the narrow window causes (ie, by increasing the browser window size).

This article can be found at http://www.thesitewizard.com/dreamweaver/center-horizontal-menu-dreamweaver.shtml

Copyright © 2009-2013 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Centre a Horizontal Navigation Menu Bar in Dreamweaver





Home
Donate
Contact Us
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.