Thursday, October 28, 2010

Dreamweaver Question - How do you center a horizontal menu bar?


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
realtedfiles.jpg


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...
ruler.jpg


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