Computer Tutorial

How to Centre the Spry Framework Menu Bar Widget


The menu, as inserted by Dreamweaver CS4, is probably flushed to the left of your web page. Like most people. will probably prefer to have it centred or "centered" in Us English on the page.


Move your mouse over the menu bar in Dreamweaver CS4. The words "Spry Menu Bar: MenuBar1" will appear above the menu. Click those words. Alternatively.click anywhere in the navigation menu. Then click the  tag in the status bar to select it. This has the same effect.Look at the CSS STYLES panel on the right. If it is currently collapsed, expand it by double-clicking the "CSS STYLES" tab. Scroll up or down in the "Summary for selection" box and double-click the "width 8em" item.


A dialog box entitled "CSS Rule Definition for ul.MenuBarVertical in SpryMenuBarVertical.css" should appear. At the top of the dialog box, you should see the "Width: 8 em" item that you just clicked. Somewhere below that, on the right column, you should be able to see an entire section called "Margin" (circled in the picture below). Click the down arrow for the "Top" field (currently set at "0") and select "auto". Click the OK button.