CODEWITHSUNDEEP
htmlcssalignment
user3223205
user3223205

Reputation:

make UL menu display at top of div inside and central

I have this CSS code:

.MyIntegra_Container {
    width:95%;
    margin:0 auto 0 auto;
    border:1px solid black;
}

#CustomerMenu ul {
    padding: 0;
    margin:0 auto 500px auto;
    list-style-type: none;
    text-align: center;
    display:inline;
}
#CustomerMenu ul li {
    display: inline;
}
#CustomerMenu ul li a {
    text-decoration: none;
    padding: 10px;
    color: #FFFFFF;
    background-color: #666666;
}
#CustomerMenu ul li a:hover {
    color: #fff;
    background-color: #f36f25;
}

http://jsfiddle.net/wU3WM/

how can i make the menu display in the centre of the div and at the top of the div not overlapping it?

Upvotes: 0

Views: 828

Answers (3)

yogihosting
yogihosting

Reputation: 6292

Just 2 additions for getting the effect you want. Adding padding: 0px; to the anchor inside the li. It will remove the overlapping, it will become -

#CustomerMenu ul li a
{
    text-decoration: none;
    padding: 10px;
    color: #FFFFFF;
    background-color: #666666;
    text-align: center;
}

The next thing is adding text-align: center to the div with id 'CustomerMenu'. You have to add this - 

#CustomerMenu
{
   text-align:center;
}

thanks.

Upvotes: 0

Ricardo Nuñez
Ricardo Nuñez

Reputation: 989

Are you trying to make one horizontal menu?

I rewrote your code in jsfiddle

<div class="MyIntegra_Container">
<div id="CustomerMenu">
    <ul>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
        <li><a>Link</a></li>
    </ul>
</div>
Text goes here
</div>

CSS:

.MyIntegra_Container {
    width:95%;
    margin: 0 auto;
    border:1px solid black;
}

#CustomerMenu ul {
    padding: 0;
    margin: 10px auto;
    list-style-type: none;
    text-align: center;
}
#CustomerMenu ul li {
    display: inline;
}
#CustomerMenu ul li a {
    text-decoration: none;
    padding: 10px;
    color: #FFFFFF;
    background-color: #666666;
}
#CustomerMenu ul li a:hover {
    color: #fff;
    background-color: #f36f25;
}

Upvotes: 1

potashin
potashin

Reputation: 44581

As your inner content has inline layout your can use text-align:center in the container to center it :

.MyIntegra_Container {
    width:95%;
    margin:0 auto;
    border:1px solid black;
    text-align:center;
}

#CustomerMenu ul {
    padding: 0;
    list-style-type: none;
    display:inline-block;
}

JSFiddle

Upvotes: 1

Related Questions