You need to give the bar a width... and then set margin: auto;
The procedure
1.Look at the top of the dreamweaver layout and select SpryMenuBarHorizontal.css from the related files list
2. In the code view look for
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width:100%;
}
3. You'll need to figure out how wide your menu is...
Turn on the Ruler
Menu: View > Rulers > Show
Place your cursor to the left of the menu in the Ruler.
Hold down the mouse button and drag to the right...
You should see a vertical "green" Line as you drag it to the end of the menu bar
You should see something like this...
3. Now change margin to auto and width to 706px or however long your menu bar is...
ul.MenuBarHorizontal
{
margin: auto;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width:706px;
}
4. save the file. press the F5 key... you should see the menu bar centered
more details here
http://labs.adobe.com/technologies/spry/samples/menubar/CenteringHorizontalMenuBarSample.html
No comments:
Post a Comment