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
Post a Comment