CODEWITHSUNDEEP
css
LeoSam
LeoSam

Reputation: 4941

css position adjust for header menu

ive issue with my header menu css , am try to center menu using following css code , 

.header ul.nav li {
        float:right;
        position-right:0px;
        margin: 20px 0 0 15px;


    }
    .header ul.nav li a{
        color: #fcd770;
        text-decoration:none;
        font-weight:bold;
        padding-right:50px;


    }

the out always is menu taking side in right , even when i remove float:right its messed up , what am looking too is move the whole group of the menu to center keep same space btween each link , here my my menu code

<ul class="nav">
            <li><a href="#">Home</a></li>
            <li><a href="/about/">about</a></li>
            <li><a href="/users/">user</a></li>
            <li><a href="/support/">Support</a></li>
        </ul>

Upvotes: 0

Views: 1386

Answers (1)

thirtydot
thirtydot

Reputation: 228182

On .header ul.nav, add text-align: center.

On .header ul.nav li, remove float:right and the non-existent position-right:0px;, then add display: inline-block.

If you need to support IE7, use this for display: inline-block:

display: inline-block;
*display: inline;
zoom: 1

Upvotes: 3

Related Questions