Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Mar 2009
    Posts
    107
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Aligning Menu Items

    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>

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.
    Teed


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •