Smooth Navigation Menu: Center Menu Buttons (& text)

[keith10456]

1) Script Title: Smooth Navigational Menu (v1.02)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm

3) Describe problem:

I'm trying to center the Menu items (buttons & text) inside of the menu bar. Currently it's left-aligned.

Using the sample image as a reference, I want it so the blue button (with white text) menu items are centered horizontally in the beige bar.

When it's all said and done, there should be a little beige on each side of the menu bar.


http://canadyscommunity.com/temp/DDSmoothMenuSample.jpg


Below is the css:


.ddsmoothmenu{
font: bold 12px Verdana;
background: #ebebeb; /*background of menu bar (default state)*/
width: 95%;
float: center;

}

.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #6f829b; /*background of menu items (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}

.ddsmoothmenu ul li a:hover{
background: #720202; /*background of menu items during onmouseover (hover state)*/
color: white;
}

/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}


/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

/* ######### CSS for shadow added to sub menus ######### */

.ddshadow{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}

.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
opacity: 0.8;
}

[Snookerman]

Try this:

.ddsmoothmenu ul{
z-index:100;
margin: 0 auto;
padding: 0;
list-style-type: none;
width: 600px; //change this to the width of your menu
}


Good luck!

[keith10456]

Worked like a charm... Thanks!

[Snookerman]

You're welcome, glad to help!
You can go to your first post in this thread, click http://www.dynamicdrive.com/forums/images/buttons/edit.gif then click Go Advanced and add the Resolved prefix to the thread title.
This will let other users know the problem has been solved.

Good luck with your site!

[webskipper]

Mine still is jammed to the left.

How can I stretch it out to 100% and be fluid?

When you adjust the window the menu wraps.

I am using width: 100%; and white-space: nowrap;

Thanks.

[Snookerman]

Hi webskipper, please post a link to your site so we can take a look. Also, in the future, please start a separate thread when asking a question. This time you can ask a mod to do it for you.

[webskipper]

My question is similar to that of the previous user. I just want mine to be fluid and not have a single pixel of background showing on the left and right sides.

Site is modelyacht.org /xxx/ XNEW.html

Layout is the 2 column Fluid fixed.

If IE6 would just fall off the face of the earth my job would be easier.:)

[wonfineday]

...and I have the same issue. :(

Have any of you before me been able to resolve this??

Thanks in advance :)
--