html - CSS: centering a div in a nav bar -
i'm having weird problems centering div within div. trying create nav bar, here html:
<body> <div class="nav"> <div class="navbar"> <ul> <li><a href="#">home</a></li> <li><a href="#">our story</a></li> <li><a href="#">gallery</a></li> <li><a href="#">our future</a></li> <li><a href="#" class="right">join us</a></li> <li><a href="#" class="right">contact</a></li> </ul> </div> </div> , corresponding css:
.nav{ width:100%; } .navbar { width:75%; height:50px; margin: 0 auto; background-color:#e64888; position:fixed; } so didn't work in of browsers-chrome,firefox,ie...the bar sitting on left side. have tried "margin-left:auto;margin-right:auto" method, still didn't work. annoying, cuz cant figure went wrong. in advance.
if want primary nav ul centered, need set it's parent (in case html , body) have width. otherwise, have handle dimensions , layout (display) type on lis , list-style-type on ul li elements (so don't see dots).
there's padding on ul (which spaces lis right when it's normal list) have deal with, or appear far right (and "uncentered").
body, html { width: 100%; margin: 0; padding: 0; } .nav { width: 100%; } .navbar ul { width: 75%; height: 50px; margin: 0 auto; padding: 0; background-color: #e64888; list-style-type: none; text-align: center; } .navbar ul li { display: inline; padding: 0; margin: 0; } http://jsfiddle.net/97b52/
html css
No comments:
Post a Comment