How to center the Smooth Menu

[Austin Klei]

1) Script Title: Smooth Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...smoothmenu.htm

3) Describe problem: How do i center it? With everything looking the same, but with the whole thing centered. I tried what i could find out how to do. But i bet i missed something.

[Austin Klei]

Bump. Sorry...

[ddadmin]

By center the whole thing, I gather your menu bar has been modified to span less than 100% of the page horizontally? Only then would centering it make any difference visually, as otherwise the menu bar is touching both ends of the page already. Anyhow, assuming that's true, inside ddsmoothmenu.css, try the changes in red to center the menu bar:

.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*background of menu bar (default state)*/
width: 95%;
margin: auto;
}

Now, if by center you actually mean each of the top menu items so they appear centered within the menu bar, there's no easy way to do this unfortunately. This is due to the menu's use of "float:left" inside each LI element to achieve its look. If you remove this rule from the CSS then it becomes easy, though the look of the menu falls apart without additional changes to the CSS.

[Austin Klei]

Alright, so i could possibly fill it all up, to make it like this. But then how do i change this whole things colors?

[ddadmin]

The style, including colors of the menu, is specified inside the .css file. For example, to change its background color, you'd edit the line in red below inside it:

.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*background of menu bar (default state)*/
width: 100%;
}

[dustin.day]

I figured out how to center the entire css based menu using what I call the wrapper fix. I kept having issues with the menu expanding with different browser sizes after I tried the above fix.

First add the text below right below your body tag of your HTML:

<div class="wrapper">

Make sure to also include the following right before you ending body tag:

</div>

Now go into the ddsmoothmenu.css file and delete:

width: 95%;

then modify the margin to:

margin: 0 0 0 ;

Now add the following text between the two areas below:

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

.wrapper { width:803px; margin:0 auto; }

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

/*Top level menu link items style*

Make sure to adjust the .wrapper width to your needs.

Now the menu centers with the webpage!!!