CODEWITHSUNDEEP
htmlcss
user3664608
user3664608

Reputation: 333

Aligning Menubar at Center with Specific Width

I have a menubar that i want to display at center with width of 960px.But i am not able to do it.I have tried float left,right to auto but it did not helped me..

Here is the fiddle ..

Fiddle

And Here is the HTML..

<div>
    <ul id="dropdown_nav" style="margin-left:auto; margin-right:auto; width:960px;">
        <li><a class="first" href="#" style="font-size: 12px;">Home</a></li>
        <li><a href="#" style="font-size: 12px;">Tutorials</a></li>
        <li><a href="#" style="font-size: 12px;">Artciles</a></li>
        <li><a href="#" style="font-size: 12px;">Freebies</a></li>
        <li><a class="last" href="#" style="font-size: 12px;">Other Stuff</a></li>
    </ul>
</div>

Please help me..

Upvotes: 0

Views: 22

Answers (3)

Abhinandan
Abhinandan

Reputation: 439

I have created a fiddle, You Can check. Fiddle

HTML:

<div style="width:960px; height =200px; margin:0 auto;">
            <ul id="dropdown_nav">

                <li><a class="first" href="#" style="font-size: 12px;">Home</a></li>
                <li><a href="#" style="font-size: 12px;">Tutorials</a>
                </li>
                <li><a href="#" style="font-size: 12px;">Artciles</a>

                </li>
                <li><a href="#" style="font-size: 12px;">Freebies</a>
                </li>
                <li><a class="last" href="#" style="font-size: 12px;">Other Stuff</a>

                </li>
            </ul>
        </div>

CSS: 

a {
    color:#525252;
    text-decoration:none;
}
#dropdown_nav {
    width:960px;
    height: 35px;
    margin:o auto;
    padding:0;
    padding:0px;
    display:inline-block;
    list-style:none;
    -moz-box-shadow:inset 0px 0px 1px #fff;
    -webkit-box-shadow:inset 0px 0px 1px #fff;
    border:1px solid #ccc;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    background: lightgray;
}
#dropdown_nav li {
    padding-top: 4px;
    float:left;
    position:relative;
    display:inline-block;
}
#dropdown_nav li a {
    padding:12px 45px 10px 45px;
    border-right:1px solid #ccc;

}
#dropdown_nav li a:hover {
    background:#00a1e4;
    color: white;

}

This is because the ul tag cannot be centered by the margin property but a div can be. So, I wrapped a div outside the ul and gave the div a width of 960px and margin property...

Upvotes: 0

Rashmin Javiya
Rashmin Javiya

Reputation: 5222

Try this,

http://jsfiddle.net/iamrmin/4kLqS/1/embedded/result/

#dropdown_nav {
    width: 960px;
    margin: 0px auto;
    height: 35px;
    padding: 0px;
    /* display: inline-block; */
    list-style: none;
    -moz-box-shadow: inset 0px 0px 1px #fff;
    -webkit-box-shadow: inset 0px 0px 1px #fff;
    border: 1px solid #ccc;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: lightgray;
}

Upvotes: 0

user3054630
user3054630

Reputation: 326

add display:block to

<ul id="dropdown_nav" style="margin-left:auto; margin-right:auto; width:960px;">

Upvotes: 2

Related Questions