Centering a navigation bar…

Question

First of all let me apologize for asking such a newbie question. I have tried to search on the site for similar questions/answers but none of the fixes have worked. So here goes:

I have created a horizontal navigation bar from a popular YouTube tutorial and have got everything working just fine with the exception of one problem: I would really like to center this navigation bar which is within the navigation containing div. I know there must be an easy solution, but for the life of the edges Figured out.

I also had another question about the CSS: why did the author make CSS rules that included the ul tag before the id tag. For example, why did he write ul#navMenu instead of #navMenu ul?

Here's the HTML:

<body>
<div id="wrapper">
 <div id="header"> <h1>The New Site
 </h1></div>

 <div id="navigation">
  <ul id="navMenu">
    <li><a href="#">Home</a></li>
    <li><a href="#">hyperlink 2</a>
        <ul class="sub1">
        <li><a href="#">hyperlink 2.1</a></li>
        <li><a href="#">hyperlink 2.2</a>
                <ul class="sub2">
                <li><a href="#">hyperlink 2.2.1</a></li>
                <li><a href="#">hyperlink 2.2.2</a></li>
                <li><a href="#">hyperlink 2.2.3</a></li>
                </ul>
        </li>
        <li><a href="#">hyper link 2.3</a></li>       
        </ul>
    </li><!--close hyperlink 2 -->
    <li><a href="#">hyperlink 3</a></li>
    <li><a href="#">hyperlink 4</a></li>
    <li><a href="#">hyperlink 5</a></li>
    <li><a href="#">hyperlink 6</a></li>
  </ul><!--close main ul – navMenu -->

</div><!--close of navigation -->

<div id="main-text"> Etc........

And here's CSS: *Note: I had to put a . Before all of the ul#mainNave rules so that they would show up.

.* {
    margin: 0px;
     padding: 0px;
}

.body {
    background-color:#FF9;
}

#wrapper  {
    width: 1000px;
    margin: 0px auto;
     padding: 0px;
     background-color:#FCC;
}

#header {
    margin: 0px;
    padding: 0;
    width: 100%;
    height: 100px;
    float: left;
    background-color:#FEA601;
}

#navigation {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 50px;

    float: left;
    vertical-align: middle;
    background-color:#7979FF;
}

/*CSS for navigation hyperlinks*/


#navigation {
    margin: 0 auto;
}

.ul#navMenu {
    list-style-type: none;

}


.ul#navMenu, ul.sub1, ul.sub2 {
    list-style-type: none;

    font-size: 10pt;

}

.ul#navMenu li {

    width: 135px;
    text-align: center;
    position: relative;
    float: left;
    margin-right: 4px;
}

.ul#navMenu a {
    text-decoration: none;
    display: block;
    width:  135px;
    height: 25;
    line-height: 25px;
    background-color: #000;
    border: 1px solid #FFF;
    border-radius: 0px;
    color:#FFF;
}

.ul#navMenu .sub1 a {
    margin-top: 0px;
}

.ul#navMenu .sub1 li {

}

.ul#navMenu .sub2 a {
    margin-left: 0px;
}
.ul#navMenu li:hover > a {
    background-color:#666;
}

.ul#navMenu li:hover a:hover {
    background-color: #666;
}

.ul#navMenu ul.sub1 {
    display: none;
    position: absolute;
    top: 26px;
    left: 0px;
}

.ul#navMenu ul.sub2 {
    display: none;
    position: absolute;
    top: 0px;
    left: 137px;
}

.ul#navMenu li:hover .sub1 {
    display:  block;
}

.ul#navMenu .sub1 li:hover .sub2 {
    display: block;
}

/*end of navigation rules*/

/*Body rules*/

#main-text {
    background-color:#FEC94B;
    width: 970px;
    Padding: 15px;
    Height: auto;
    float: left;
}

#footer {
    width: 100%;
    float: left;
    height: 50px;
    line-height: 50px;
    background-color: #000;
    color: #FFF;
    text-align: center;
    font-size: 10px;
}
#wrapper #navigation #navMenu {
    text-align: center;
}

Thank you so much in advance and I greatly look forward to solving this problem.

Doug

Edit: I'm not sure what wrong but a lot of the CSS code did not show up – it all started with ul#navMenu.... Which happen to be part of my question as to why the author was writing CCS code like this.

JSFIDDLE

random_user_name · Accepted Answer

The reason it isn't centered at the moment is in your css, here:

ul#navMenu li {
   ...
   float: left;
}

Change it to inline-block, like so:

ul#navMenu li {
    display: inline-block; 
    /* old IE hack to get inline-block to work */
    zoom: 1;
    *display: inline;
}

Add text-align to the container:

ul#navMenu {
    ...
    text-align: center;
}

And that will allow them to center, instead of forcing them left. Ensure the parent container(s) have text-align: center; on them.

See the updated jsFiddle

Finally, css selectors:

ul#navMenu - selects the ul that has the ID of navMenu
#navMenu ul - selects the ul that is the child of an element with the id of navMenu
ul#navMenu - ensures it only addresses any ul elements with id of navMenu, but could also be written simply #navMenu
ul#navMenu li - selects all the li elements that are the child of the ul with the id of navMenu - could also be written #navMenu li, since an ID should only occur once on a page.

Centering a navigation bar…

Tags:

css

user3341014

1 Answers

random_user_name

Recent Activity

Donate For Us

Centering a navigation bar…

Tags:

css

user3341014

1 Answers

random_user_name

Related questions

Recent Activity

Donate For Us