Centering Navigation Bar

Discussion in 'Web Design and Development' started by amtjb, Jan 10, 2015.

  1. amtjb, Jan 10, 2015
    Last edited by a moderator: Jan 10, 2015

    amtjb macrumors member

    Joined:
    Jan 5, 2011
    #1
    I am trying to center my navigation bar. Can't come up with the right code. Can some one please tell me what I am not doing in my css?

    Code:
    * {
       padding: 0;
       margin: 0;
    }
    
    
    nav {
         background-color: black;
         height: 50px;
    }
    
    nav ul {
           width:100%;
           margin: 0 auto;
           border-bottom: 2px solid #f7b007;
          
    }
    
    nav ul li {
         list-style-type: none;
         width: 90px;
         float: left;
         border-right: 1px solid #ccc;
         text-align: center;
     }
    
    li a {
         text-decoration: none;
         color: white;
         line-height: 50px;
         display: block;
         font-family: arial, helvetica, sans-serif;
         font-size: .2em;
         font-weight: bold;
         
    }
    
    li a:hover {
        background-color: #494446;
        color: white;
    }
    
    header { 
            width: 2000;
            margin:0px auto;
            height: 130px;
     }
     
  2. Jessica Lares, Jan 10, 2015
    Last edited: Jan 10, 2015

    Jessica Lares macrumors G3

    Jessica Lares

    Joined:
    Oct 31, 2009
    Location:
    Near Dallas, Texas, USA
    #2
    If you're styling IDs, you need #'s before "nav", if it's a class, you need a period.

    As in,

    Code:
    #nav {
         background-color: black;
         height: 50px;
    }
    
    #nav ul {
           width:100%;
           margin: 0 auto;
           border-bottom: 2px solid #f7b007;
          
    }
    Your problem is that the CSS isn't being read properly because of it.

    EDIT: I was just playing around with it and it's most likely that nav is an ID, so you'd write it as #nav. The text centers, but your list is filling up 100% of its parent DIV. So you need to figure out how to fix that.
     
  3. amtjb thread starter macrumors member

    Joined:
    Jan 5, 2011
    #3
    Centering navigation bar

    I'm sorry. I should have posted my html5 when I posted my css. If you can still help me, I would appreciate it.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title>Information web site</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
    <body>
    <header>
    <img src="images/header.jpeg" />
    </header>

    <nav>
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Home 2</a></li>
    <li><a href="#">home 3</a></li>
    <li><a href="#">home 4</a></li>
    <li><a href="#">home 5</a></li>
    <li><a href="#">home 6</a></li>
    <li><a href="#">home 7</a></li>
    <li><a href="#">home 8</a></li>
    <li><a href="#">home 9</a></li>
    <li><a href="#">home 10</a></li>
    <li><a href="#">home 11</a></li>
    <li><a href="#">home 12></li>
    <li><a href="#">home 13</a></li>
    </ul>

    </nav>

    **************************************************

    * {
    padding: 0;
    margin: 0;
    }


    nav {
    background-color: black;
    height: 50px;
    }

    nav ul {
    width:100%;
    margin: 0 auto;
    border-bottom: 2px solid #f7b007;

    }

    nav ul li {
    list-style-type: none;
    width: 90px;
    float: left;
    border-right: 1px solid #ccc;
    text-align: center;
    }

    li a {
    text-decoration: none;
    color: white;
    line-height: 50px;
    display: block;
    font-family: arial, helvetica, sans-serif;
    font-size: .2em;
    font-weight: bold;

    }

    li a:hover {
    background-color: #494446;
    color: white;
    }

    header {
    width: 2000;
    margin:0px auto;
    height: 130px;
    }
     
  4. Jessica Lares, Jan 10, 2015
    Last edited: Jan 10, 2015

    Jessica Lares macrumors G3

    Jessica Lares

    Joined:
    Oct 31, 2009
    Location:
    Near Dallas, Texas, USA
    #4
    There is no "nav" or "header" elements. You just use DIVs with ID and Class names. I guess the easiest way to explain it is to think of it as an outline. The ID is your topic, and the classes are your bullet points.

    Here is how your body should look like:

    Code:
    <div id="header">
    <img src="images/header.jpeg" />
    </div>
    
    <div id="nav">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Home 2</a></li>
    <li><a href="#">home 3</a></li>
    <li><a href="#">home 4</a></li>
    <li><a href="#">home 5</a></li>
    <li><a href="#">home 6</a></li>
    <li><a href="#">home 7</a></li>
    <li><a href="#">home 8</a></li>
    <li><a href="#">home 9</a></li>
    <li><a href="#">home 10</a></li>
    <li><a href="#">home 11</a></li>
    <li><a href="#">home 12</a></li>
    <li><a href="#">home 13</a></li>
    </ul>
    
    </div>
    And here's your CSS:

    Code:
    * {
    padding: 0;
    margin: 0;
    }
    
    
    #nav {
    background-color: black;
    height: 50px;
    }
    
    #nav ul {
    width:100%;
    margin: 0 auto;
    border-bottom: 2px solid #f7b007;
    
    }
    
    #nav ul li {
    list-style-type: none;
    width: 90px;
    float: left;
    border-right: 1px solid #ccc;
    text-align: center;
    }
    
    li a {
    text-decoration: none;
    color: white;
    line-height: 50px;
    display: block;
    font-family: arial, helvetica, sans-serif;
    font-size: .2em;
    font-weight: bold;
    
    }
    
    li a:hover {
    background-color: #494446;
    color: white;
    }
    
    #header { 
    width: 2000;
    margin:0px auto;
    height: 130px;
    }
    BTW, you should have a closing </body> and </html> at the end.

    Your list is at 100%:

    Code:
    #nav ul {
    width:100%;
    margin: 0 auto;
    border-bottom: 2px solid #f7b007;}
    If you're going to do that, make the header 100% too, take out the margins, and then wrap a DIV with an ID called "container" and do the exact numbers and margins there. Otherwise you're going to have to hardcode it into everything.
     
  5. amtjb thread starter macrumors member

    Joined:
    Jan 5, 2011
    #5
    I called myself doing as you instructed. Could you please check my coding again. Navigation bar did not center.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title>Information web site</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
    <body>
    <div id="header">
    <img src="images/header.jpeg" />
    </header>
    </div>
    <div id="nav">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Home 2</a></li>
    <li><a href="#">home 3</a></li>
    <li><a href="#">home 4</a></li>
    <li><a href="#">home 5</a></li>
    <li><a href="#">home 6</a></li>
    <li><a href="#">home 7</a></li>
    <li><a href="#">home 8</a></li>
    <li><a href="#">home 9</a></li>
    <li><a href="#">home 10</a></li>
    <li><a href="#">home 11</a></li>
    <li><a href="#">home 12></li>
    <li><a href="#">home 13</a></li>
    </ul>

    </nav>
    </div>
    </body>
    </html>

    *****************************************


    * {
    padding: 0;
    margin: 0;
    }


    #nav {
    background-color: black;
    height: 50px;

    }

    #nav ul {
    width:100%;
    margin: 0 auto;
    border-bottom: 2px solid #f7b007;

    }

    #nav ul li {
    list-style-type: none;
    width: 90px;
    float: left;
    border-right: 1px solid #ccc;
    text-align: center;

    }

    li a {
    text-decoration: none;
    color: white;
    line-height: 50px;
    display: block;
    font-family: arial, helvetica, sans-serif;
    font-size: .2em;
    font-weight: bold;

    }

    li a:hover {
    background-color: #494446;
    color: white;
    }

    #header {
    width: 100%;
    margin:0px auto;
    height: 130px;
    }
     
  6. NutsNGum macrumors 68030

    NutsNGum

    Joined:
    Jul 30, 2010
    Location:
    Glasgow, Scotland
    #6
    This is what you're needing:

    Obviously, this is just all the code together on one page. If you want to abstract the CSS, go for it.

    PHP:
    <!DOCTYPE html>
    <
    html lang="en">
        <
    head>
            <
    meta charset="UTF-8" />
            <
    title>Information web site</title>
            <!-- <
    link rel="stylesheet" type="text/css" href="css/style.css" /> -->
            <
    style>
    * {
    padding0;
    margin0;
    }


    #nav {
    background-colorblack;
    height50px;

    }

    #nav ul {
    width:100%;
    margin0 auto;
    border-bottom2px solid #f7b007;
    text-aligncenter;
    }

    #nav ul li {
    list-style-typenone;
    width90px;
    /*float: left;*/
    displayinline-block;
    border-right1px solid #ccc;
    text-aligncenter;

    }

    li a {
    text-decorationnone;
    colorwhite;
    line-height50px;
    displayblock;
    font-familyarialhelveticasans-serif;
    font-size.2em;
    font-weightbold;

    }

    li a:hover {
    background-color#494446;
    colorwhite;
    }

    #header { 
    width100%;
    margin:0px auto;
    height130px;
    }
            </
    style>
        </
    head>
        <
    body>
            <
    div id="header">
                <
    img src="images/header.jpeg" />
            </
    header>
        </
    div>
        <
    div id="nav">
            <
    ul>
                <
    li><a href="#">Home</a></li>
                <
    li><a href="#">Home 2</a></li>
                <
    li><a href="#">home 3</a></li>
                <
    li><a href="#">home 4</a></li>
                <
    li><a href="#">home 5</a></li>
                <
    li><a href="#">home 6</a></li>
                <
    li><a href="#">home 7</a></li>
                <
    li><a href="#">home 8</a></li>
                <
    li><a href="#">home 9</a></li>
                <
    li><a href="#">home 10</a></li>
                <
    li><a href="#">home 11</a></li>
                <
    li><a href="#">home 12></li>
                <
    li><a href="#">home 13</a></li>
            </
    ul>
        </
    div>
    </
    div>
    </
    body>
    </
    html>
     
  7. Jamesbot macrumors member

    Joined:
    Jun 19, 2009
    #7
  8. Jessica Lares macrumors G3

    Jessica Lares

    Joined:
    Oct 31, 2009
    Location:
    Near Dallas, Texas, USA
    #8

Share This Page