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.
To make sure that we are all on the same wavelength, let me state my assumptions:
You are using either Dreamweaver CS3 or CS4. Later versions, like Dreamweaver CS5.5 and Dreamweaver CS5, should work too, provided you're using the Spry framework menu in those versions. However, as far as I know, earlier versions of Dreamweaver do not have the Spry framework menu facilities, so this tutorial does not apply to those using Dreamweaver 8.
Note, though, the description of the procedure below is for CS4. I suspect it is similar, if not identical, for the other version (CS3, CS5, etc).
You have inserted a horizontal menu using the "Insert | Spry | Spry Menu Bar" menu item in Dreamweaver (any version) and have chosen the horizontal menu.
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.
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.
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.
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.)
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.)
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.
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).
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".
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".
Do the same for the "Left" drop down box: that is, click it and select "auto".
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.)
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.
If you used a percentage for your menu width, like "80%", remember that "80%" is a relative number. It's like saying someone is "tall" or "short". It's relative to the context. 80% of a 1024 pixel wide monitor is narrower than 80% of 1680 pixel wide monitor. What appears perfect on your monitor may not necessarily be perfect on your visitor's monitor.
Using a fixed unit, like "400px", for your menu width means that your menu will be fixed at that width, no matter how wide or narrow your visitor's browser window is. At first glance, this may seem like the perfect solution, since your menu will remain stable at the size you designed it regardless of the user's system. However, before you go out to celebrate, remember that your menu does not exist in a vacuum. It is surrounded by your other content, some of which may have widths specified in relative units. In a browser window that is resized too small, your menu may still go out of alignment.
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
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.
This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.
It will appear on your page as: