ansaurus

Question

Answer 1

+1 A:

hey, have you tried?

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

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

jebberwocky 2010-09-20 11:19:22

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

Tom Gullen 2010-09-20 11:21:42

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 2010-09-20 12:15:16

Answer 2

A:

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>

Tom Gullen 2010-09-20 11:45:36

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 2010-09-20 12:16:58

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 2010-09-20 12:18:37

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 2010-09-20 12:20:58

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 2010-09-20 13:03:06

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 2010-09-20 13:09:22

Reference/link please?

Tom Gullen 2010-09-20 13:30:05

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 2010-09-20 13:31:16

DDA: http://www.legislation.gov.uk/ukpga/2005/13/contents

Mauro 2010-09-20 14:18:43

Answer 3

+1 A:

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.

Yi Jiang 2010-09-20 12:56:10

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 2010-09-20 13:17:16

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 2010-09-20 13:18:10

@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 2010-09-20 13:30:20

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 2010-09-20 13:37:42

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

Mauro 2010-09-20 14:26:06

@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 2010-09-20 14:31:11

@Tom Where? What? How? Did you even *look* at the jsbin demo?

Yi Jiang 2010-09-20 14:39:29

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 2010-09-20 15:14:56

Answer 4

A:

margin:0 auto; should work

Matt Schweers 2010-09-21 01:27:20

ansaurus

tags:

views:

answers:

Align menu to center of page

related questions