CODEWITHSUNDEEP
htmlcssnav
user3043645
user3043645

Reputation: 31

Centering Page Links on Nav Menu

I would like a full-width navigation menu with the remainder of the page having a width of 960px.

The links on the navigation menu need to be centered above the 960px width body.

The below code is aligning the nav menu to the left hand side. What do I need to include to have the nav links centered?

HTML

<div class="nav">
   <ul>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Our Products</a></li>
      <li><a href="#">FAQs</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Login</a></li>
   </ul>
</div>
<div class="wrapper">
   <div class="main">
      <p>ABC ABC ABC</p>
      <p>ABC ABC ABC</p>
      <p>ABC ABC ABC</p>
      <p>ABC ABC ABC</p>
      <p>ABC ABC ABC</p>
      <p>ABC ABC ABC</p>
      <p>ABC ABC ABC</p>
   </div>
</div>

CSS

.wrapper {
    background-color: red;
    width: 960px;
    margin: 0 auto;
}

.nav {
    width: 100%;
    float: left;
    margin: 0 0 1em 0;
    padding: 0;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc;
}

.nav ul {
    list-style: none;
    width: 960px;
    margin: 0 auto;
    padding: 0;
}

.nav li {
    float: left;
}

.nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #069;
    border-right: 1px solid #ccc;
}

.nav li:first-child a {
    border-left: 1px solid #ccc;
}

.nav li a:hover {
    color: #c00;
    background-color: #fff;
}

Upvotes: 0

Views: 74

Answers (4)

Ani
Ani

Reputation: 4523

Try this:

Link: http://jsfiddle.net/CdkXG/2/

CSS:

.wrapper { 
   clear: both;
}

Upvotes: 0

wharfdale
wharfdale

Reputation: 752

.nav ul {
    list-style: none; 
    width: 960px;
    margin: 0 auto;
    padding: 0; 
    text-align: center;
}

.nav li {
    display: inline-block;
}

Upvotes: 0

CRABOLO
CRABOLO

Reputation: 8793

try

.nav { text-align: center; }

Upvotes: 0

Ben Yitzhaki
Ben Yitzhaki

Reputation: 1426

you should not "float" the links if you want them to appear in the center.. instead, try using "display:inline-block" for the nav links items (nav li) and add "text-align:center" to the list itself (nav ul)

Upvotes: 0

Related Questions