Geek asks and answers

Centering the navigation bar ...

First of all, let me apologize for asking such a question to newbies. I tried to find similar questions / answers on the site, but none of the fixes worked. So here it is:

I created a horizontal navigation bar from the popular YouTube tutorial and everything works fine except for one problem: I would really like to center this navigation bar, which is inside the navigation containing the div. I know that there should be a simple solution, but for a living edge.

I also had another question about 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 is the CSS: * Note: I had to put a. Before all ul # mainNave rules so that they are displayed.

.* {
    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;
}

, .

: , , CSS - ul # navMenu.... , CCS, .

JSFIDDLE

+3
1

, , css, :

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

, :

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

text-align :

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

, . , () text-align: center;.

jsFiddle

, css:

  • ul#navMenu - ul, navMenu
  • #navMenu ul - ul, navMenu
  • ul#navMenu - , ul navMenu, #navMenu
  • ul#navMenu li - li, ul navMenu, #navMenu li, .
+4

More articles:


All Articles