CODEWITHSUNDEEP
htmlcss
AvP
AvP

Reputation: 359

Centering a navigation bar with CSS

I am working on my first website and I am a little confused as to how I would center my navigation bar. I have tried defining a width, made sure it was a block element and set margin-left and margin-right to auto but it still isn't centering. Here are my css and html files.

HTML:

<html>
<head>
    <title>Test Site</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
    <div class="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Forums</a></li>
            <li><a href="#">Misc</a>
                <ul>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                </ul>
            </li>
            <li><a href="#">Donate</a></li>
        </ul>
    </div>
</body>
</html>

CSS:

.nav > ul {
    width: 960px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.nav ul {
    list-style: none;
    background: #444444;
    margin: 0px;
    padding: 0px;
}

.nav li {
    float: left;
    width: 150px;
    position: relative;
    background: #444444;
    text-align: center;
    border: 1px solid white;
    height: 30px;
    line-height: 30px;
}

.nav li ul li {
    float: none;
    width: 140px;
    text-align: left;
    padding: 5px;
    border-top: 1px solid white;
    line-height: 30px;
}

.nav li ul {
    position: absolute;
    top: 30px;
    left: 0px;
    visibility: hidden;
}

.nav li:hover {
    background-color: maroon;
}

.nav li:hover ul {
    visibility: visible;

}

.nav a {
    text-decoration: none;
    color: white;
}

.nav li ul {
    float: none;
}

Upvotes: 0

Views: 540

Answers (4)

Ejaz
Ejaz

Reputation: 8872

Another (and a better) approach is to

  1. swap the position of .nav > ul and .nav ul rule, i.e., specifying the (more specific) .nav > ul rule after (a relatively generic) .nav ul
  2. and setting width: 608px; in .nav > ul

This is how it works:

a) .nav ul sets the margin: 0; padding: 0 to all <ul> elements. It removes default padding/margin for all <ul> elements.

b) Now (assuming, for .nav > ul, you don't have left and right margins set to auto and width is 960px) you've a left aligned main nav that covers its container horizontally. So, to make it horizontally centered, you set its width to minimun width you can without moving your nav items to new line, i.e., 608px and set margins to auto in order to center it horizontally in its container.

Here's the CSS

.nav ul{
   list-style: none;
   background: #444444;
   margin: 0px;
   padding: 0px;
}

.nav > ul{
   width: 608px;
   display: block;
   margin-left: auto;
   margin-right: auto;
}

I hope it helps

Upvotes: 0

DSI
DSI

Reputation: 279

change .nav > ul ul to .nav > ul li and 

.nav li ul {
    position: relative;
    top: 0px;
    padding-left:0;
    visibility: hidden;
}

Upvotes: 0

Alex
Alex

Reputation: 35399

You're overriding the definitions that would've made it centered ...

Change:

.nav > ul {
    width: 960px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.nav ul {
    list-style: none;
    background: #444444;
    margin: 0px; /* overrides previously defined margin */
    padding: 0px; /* overrides previously defined margin */
}

To:

.nav > ul {
    width: 960px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.nav ul {
    list-style: none;
    background: #444444;
    /* margin: 0; */
    padding: 0px;
}

Upvotes: 2

Ejaz
Ejaz

Reputation: 8872

the width of .nav>ul is set more than total width of all nav items inside it. It should be width: 608px; and you need to add margin: 0 auto; to .nav ul rule declaration

Final rules for .nav > ul and .nav ul

.nav > ul{
  width: 608px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.nav ul{
  list-style: none;
  background: #444;
  margin: 0 auto;
  padding: 0;
}

Upvotes: 0

Related Questions