Align menu to center of page

html css center alignment

10,279

Solution 1

Here you go, now stop using tables for layout. That technique belongs in the wastepaper bin of history. Go educate yourself on why you really should not use tables here. Now on how to center this. Have a look at this jsfiddle: http://jsfiddle.net/ezsZb/

The technique is basically what is described here: http://www.tightcss.com/centering/center_variable_width.htm. Nothing much to it, it's a fairly common technique.

The plugin's code is horrid, so we're just going to play around with CSS and HTML here instead. Assuming this HTML structure:

<div id="smoothmenu1">
    <div id="wrapper">
        <ul id="innerul">
        ...
        </ul>
    </div>
    <br style="clear: left" />
</div>

Using this configuration:

mainmenuid: "wrapper", //menu DIV id

And swapping the CSS styles around:

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

#wrapper {
  position: relative;
  float: left;
  left: 50%;
}

#innerul {
  position: relative;
  left: -50%;
}

You will get the result you need. See: http://jsbin.com/anaho/.

PS: Considering using another plugin. The code quality for this one is very bad, and it's not very flexible.

Solution 2

margin-left:auto; margin-right:auto;

refer to :http://www.maxdesign.com.au/articles/center/

Solution 3

open ddsmoothmenu.js and search zIndex and change

zIndex: 100-i

zIndex: 9999-i

also, open ddsmoothmenu.ccs and add z-index:9999; on first two items.

10,279

Author by

Tom Gullen

Me Web developer. Website http://www.scirra.com

Updated on June 17, 2022

Comments

Tom Gullen almost 2 years

Given the following menu structure:

<div id="smoothmenu1" class="ddsmoothmenu">
    <ul>
        <li><a href="Default.aspx">Home</a></li>
        <li><a href="About.aspx">About Us</a></li>
        <li>
            <a href="#">Automotives</a>
            <ul>
                <li><a href="#">Masking Film</a></li>
                <li><a href="#">Promo Items</a></li>
                <li><a href="#">Accessories</a></li>
                <li><a href="#">External Protection</a></li>
                <li><a href="#">Internal Protection</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Packaging</a>
            <ul>
                <li>
                    <a href="#">Cardboard boxes</a>
                    <ul>
                        <li><a href="#">Big Boxes</a></li>
                        <li><a href="#">Small Boxes</a></li>
                        <li><a href="#">Medium Boxes</a></li>
                    </ul>
                </li>
                <li><a href="#">Paper bags</a></li>
                <li><a href="#">Polythene bags</a></li>
                <li><a href="#">Polythene layflat tubing</a></li>
                <li><a href="#">Postall bags & packaging</a></li>
                <li><a href="#">Protective Packaging</a></li>
                <li><a href="#">Refuse sacks</a></li>
                <li><a href="#">Retail</a></li>
                <li><a href="#">Strapping</a></li>
                <li><a href="#">Tapes</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Eco Friendly</a>
            <ul>
                <li><a href="#">Recycled bags</a></li>
                <li><a href="#">Degradable bags</a></li>
                <li><a href="#">Random bags</a></li>
                <li><a href="#">Cotton bags</a></li>
                <li><a href="#">Compostable bags</a></li>
            </ul>
        </li>
        <li><a href="Design.aspx">Design Service</a></li>
        <li><a href="Contact.aspx">Contact Us</a></li>
        <li><a href="Offers.aspx">Offers</a></li>
    </ul>
    <br style="clear: left" />
</div>

All the menu buttons look great, but they are left aligned in the container. I can't work out how to have them centered within the menu bar so that no matter how wide the browser window, they are always in the middle.

Relevant CSS is:

.ddsmoothmenu {
    font: bold 12px Verdana;
    background: #2773A0;
    /*background of menu bar (default state)*/
    width: 100%;
    background-image: url(../images/menuBG.jpg);
    z-index: 9999;
}

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

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

/*Top level menu link items style*/
.ddsmoothmenu ul li a {
    display: block;
    color: white;
    padding: 8px 10px;
    border-right: 1px solid #ffffff;
    color: #2d2b2b;
    text-decoration: none;
    padding: 10px 30px 10px 30px;
    font-size: 18px;
    font-family: Arial;
    font-weight: normal;
    z-index: 9999;
}

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

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

.ddsmoothmenu ul li a.selected {
    /*CSS class that's dynamically added to the currently active menu items' LI A element*/
    background: #2773A0;
    color: white;
    z-index: 9999;
}

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

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

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li {
    display: list-item;
    float: none;
    background: #2773A0;
    /*background of menu items (default state)*/
    z-index: 9999;
    border-right: 0px;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul {
    top: 0;
    border-right: 0px;
    z-index: 9999;
}

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a {
    font: normal 13px Verdana;
    width: 200px;
    /*width of sub menus*/
    padding: 10px;
    margin: 0;
    border-right: 0px;
}

    /* Holly Hack for IE \*/
* html .ddsmoothmenu {
    height: 1%;
} /*Holly Hack for IE7 and below*/


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

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

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

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

.ddshadow {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    background: silver;
    z-index: 89;
}

.toplevelshadow {
    /*shadow opacity. Doesn't work in IE*/
    opacity: 0.8;
    z-index:89;
    filter:alpha(opacity=80);
}

Tom Gullen over 13 years

I've tried putting it in the ddsmoothmenu class but no luck :-(
Mauro over 13 years

the margin-left/right trick doesnt always work in IE, you might have to wrap the ddsmoothmenu in another div with text-align: center on it, then text-align: left on the ddsmoothmenu.
Mauro over 13 years

Tables just to center some text? thats a markup/standards/accessibility validation nightmare! In some countries accessibility laws actually make it illegal to use tables for layout (look at US Section 508/UK DDA and a german equivalent).
Tom Gullen over 13 years

Not to align text, align the entire menu. It's seemingly impossible to do otherwise with this menu, I looked on google lots of people have had this problem.
Tom Gullen over 13 years

Also can you link to me where it is illegal? I looked on google and can't find it anywhere, it seems ridiculous to make tables illegal, that surely must be a misquote.
Russell Dias over 13 years

The scope of Section 508 is limited to the federal sector only. The use of tables is also justified as a standard rather than regulation.
Mauro over 13 years

In the UK the Disability Discrimination Act covers all websites, whether you are prosecuted or not, its a different matter. The Act also makes the "standard" of not using tables for layouts an enforceable law.
Tom Gullen over 13 years

Thanks for your fiddle, it all works fine but it stops the actual dropdown menu from functioning, so I can't use this.
Tom Gullen over 13 years

Also a lot of those poitns on why I shouldn't use tables don't apply to this case here. I completely agree that tableless design should be used, but if it's the only solution to get something to work then it's not bad imo.
Yi Jiang over 13 years

@Tom If you want to get help, then post the problematic code in it's entirety here. And strip it to the smallest case where you can reproduce the problem, instead of 100 lines of code copied and pasted from the website source. Also, most of the points do apply here, and the problem is not just ugly code.
Tom Gullen over 13 years

For the downvote, this is the only answer provided so far that actually works and solves the problem I have asked, if the design of the dropdown menu I have to use doesn't allow for any other solution, what am I meant to do?
Tom Gullen over 13 years

The menu I am using is smooth menu: dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm , if those menu items can be aligned centrally without using tables it would be appreciated.
Mauro over 13 years

Tom, Yi's solution does center the menu, I've tried it in a number of browsers.
Tom Gullen over 13 years

@Mauro, yes it does, but it takes away a large part of the menus functionality for some reason as well, do you not get that?
Yi Jiang over 13 years

@Tom Where? What? How? Did you even look at the jsbin demo?
Mauro over 13 years

The JSBin demo doesnt have the linked javascript files, when you copy Yi's solution to your source code the JS files will expand and collapse the sub menus as required.