HTML CSS examples for CSS Widget:Nav Bar
Remove padding from navbar UL css
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!--from ww w . j a va2 s . c o m--> margin:21px; font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; background-color:Chartreuse; } #nav { text-align:center; } #nav ul { text-align:center; font-size:12px; width:100%; margin:0; padding:0; display:inline-block; padding:0; list-style:none; background-color:yellow; border-bottom:2px solid blue; border-top:2px solid pink; } #nav li { display:inline-block; } #nav li a { display:block; padding:9px 16px; text-decoration:none; font-weight:bold; color:OrangeRed; border-right:2px solid grey; } #nav li a:hover { color:BlueViolet; background-color:Chartreuse; } div { text-align:center; } div#page { background-color:yellow; margin:0 auto; text-align:left; width:756px; padding:0px 11px 0 11px; } div#header { border-bottom:2px solid blue; height:31px; line-height:31px; } div#content { background:none repeat scroll 0 0 none; border:0px solid pink; width:100%; line-height:501px; min-height:501px; _height:501px } div#footer { border:0px solid OrangeRed; height:31px; line-height:31px; border-top:2px solid grey; font-size:10pt; } </style> </head> <body> <title>Lorem ipsum dolor s</title> <div id="page"> <div id="header"> <div style="float: left;"> Lorem ipsum dol </div> <div style="float: right;"> Lorem ip </div> <div id="nav"> <ul id="nav"> <li> <a href="#">Lorem ips</a> </li> <li> <a href="#">Lorem ipsu</a> </li> <li> <a href="#">Lorem ipsum do</a> </li> <li> <a href="#">Lorem ipsum d</a> </li> <li> <a href="#">Lorem ipsum dol</a> </li> <li> <a href="#">Lorem i</a> </li> </ul> </div> </div> <div id="content"> Lorem ips </div> <div id="footer"> <div style="float: right;"> Lorem ipsum dolo </div> </div> </div> </body> </html>