css - how to make navigation bar stretch across the page (HTML) -


i'm having problems navigation bar, not stretching across page.

here's code:

#nav {    list-style: none;    font-weight: bold;    margin-bottom: 10px;    width: 100%;    text-align: center;  }  #nav ul {    list-style-type: none;    margin: 0px;    padding: 0;  }  #nav li {    margin: 0px;    display:  }  #nav li {    padding: 10px;    text-decoration: none;    font-weight: bold;    color: #ffffff;    background-color: #000000;    float: left  }  #nav li a:hover {    color: #ffffff;    background-color: #35af3b;  }
<div id="nav">    <ul>      <li><a href="#">home</a>      </li>      <li><a href="#">music</a>      </li>      <li><a href="#">education</a>      </li>      <li><a href="#">fun</a>      </li>      <li><a href="#">entertainment</a>      </li>      <li><a href="#">utilities</a>      </li>    </ul>  </div>

it isn't clear want here. if you're wanting nav bar continue across page need add background color parent div , make div same height ul list elements:

#nav {     list-style: none;     font-weight: bold;     margin-bottom: 10px;     width: 100%;     text-align: center;     background-color: #000000;     height:40px; } 

i did fiddle - http://jsfiddle.net/f6nmg/


Comments

Popular posts from this blog

SPSS keyboard combination alters encoding -

Add new record to the table by click on the button in Microsoft Access -

javascript - jQuery .height() return 0 when visible but non-0 when hidden -