Aligning Menu Items

IamHe · 05-06-2011, 11:12 AM

I orgionally got help with this from Bullant about a month ago but im now trying to make an alteration but am not having much look.

i have a div menu code and at current the menu items are centerd within the div container.

i want them to start from the left rather than the centre.

would really appreciate any help.

thanks

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title></title>
        <style type="text/css">
            #menuContainer {
                width: 900px;
                overflow: hidden;
                border: 1px solid red;
                margin: 0px auto 0px auto;
            }
            #menu {
                list-style-type: none;
                margin: 0px 0px 0px 0px;
                padding: 0px 0px 0px 0px;
                float: left;
                position: relative;
                left: 50%;
            }
            #menu li {
                float: left;
                position: relative;
                right: 50%;
            }
            #menu li a {
                margin: 0px 10px 0px 10px;
                padding: 5px 5px 5px 5px;
            }
        </style>
        <script type="text/javascript"></script>
    </head>
    <body>
        <div id="menuContainer">
            <ul id="menu">
                <li><a href="link1.htm">item1</a></li>
                <li>|</li>
                <li><a href="link2.htm">item2</a></li>
                <li>|</li>
                <li><a href="link3.htm">item3</a></li>
                <li>|</li>
                <li><a href="link4.htm">item4</a></li>
            </ul>
        </div>
    </body>
</html>

teedoff · 05-06-2011, 02:13 PM

Code:

#menuContainer {
                width: 900px;
                overflow: hidden;
                border: 1px solid red;
                margin: 0px auto 0px auto;

Might have something to do with the code in orange. Remember, anything with a specified width less than its containing element, AND margin left and right set to auto, will center itself.