Align menu to center of page

Question

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);
}

score 2 · Accepted Answer · edited May 23 '17 at 12:30

2

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.

edited May 23 '17 at 12:30

Community

1
1

answered Sep 20 '10 at 12:56

Yi Jiang

49,435
16
136
136

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 Sep 20 '10 at 13:17
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. – Tom Gullen Sep 20 '10 at 13:18
@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. – Yi Jiang Sep 20 '10 at 13:30
The menu I am using is smooth menu: http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm , if those menu items can be aligned centrally without using tables it would be appreciated. – Tom Gullen Sep 20 '10 at 13:37
Tom, Yi's solution does center the menu, I've tried it in a number of browsers. – Mauro Sep 20 '10 at 14:26
@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? – Tom Gullen Sep 20 '10 at 14:31
@Tom Where? What? How? Did you even *look* at the jsbin demo? – Yi Jiang Sep 20 '10 at 14:39
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. – Mauro Sep 20 '10 at 15:14

score 1 · Answer 2 · answered Sep 20 '10 at 11:19

1

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

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

answered Sep 20 '10 at 11:19

jebberwocky

1,123
3
11
24

I've tried putting it in the ddsmoothmenu class but no luck :-( – Tom Gullen Sep 20 '10 at 11:21
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 Sep 20 '10 at 12:15

score 1 · Answer 3 · edited Feb 01 '12 at 07:31

1

open ddsmoothmenu.js and search zIndex and change

zIndex: 100-i

to

zIndex: 9999-i

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

edited Feb 01 '12 at 07:31

oers

18,436
13
66
75

answered Feb 01 '12 at 02:50

guille

11
1

score -1 · Answer 4 · answered Sep 20 '10 at 11:45

-1

Ugly but it works:

<table width="100%" align="center" cellpadding="0" cellspacing="0">
    <tr>
        <td>
        <table width="0%" align="center" cellpadding="0" cellspacing="0">
            <tr>
               <td align="center">
                    <div id="smoothmenu1" class="ddsmoothmenu">
                        <ul>
                            <li><a href="Default.aspx">Home</a></li>
                            <li><a href="About.aspx">About Us</a></li>
                            <asp:Literal runat="server" ID="topNav"></asp:Literal>
                        </ul>
                        <br style="clear: left" />
                    </div>
                </td>
            </tr>
        </table>
        </td>
    </tr>
</table>

answered Sep 20 '10 at 11:45

Tom Gullen

61,249
84
283
456

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). – Mauro Sep 20 '10 at 12:16
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 Sep 20 '10 at 12:18
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. – Tom Gullen Sep 20 '10 at 12:20
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. – Russell Dias Sep 20 '10 at 13:03
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. – Mauro Sep 20 '10 at 13:09
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 Sep 20 '10 at 13:31

Align menu to center of page

4 Answers4