rutgervs94 Posted October 27, 2013 Share Posted October 27, 2013 The problem is that I can't get my nav-bar align in the center. This is my code: <div id="nav"><ul><li><a href="startpagina.html">Startpagina</a></li><li><a href="zomercollectie.html">Zomercollectie</a></li><li><a href="wintercollectie.html">Wintercollecite</a></li><li><a href="kerstcollectie.html">Kerstcollectie</a></li><li><a href="contact.html">Contact</a><ul><li><a href="contact-voor-particulieren.html">Contact voor particulieren</a><li><a href="contact-voor-bedrijven.html">Contact voor bedrijven</a> </ul><li><a href="over-ons.html">Over ons</a></li></ul> <br class="clearboth"/></div> .clearboth { margin: 0; padding: 0; clear: both;} #nav { font-family: verdana; font-weight: bold; font-size: 9pt; margin: 10px auto 10px auto; text-align: center;} #nav ul { margin: 0; padding: 0; list-style: none; text-align:center;} #nav a:link,#nav a:visited { color: #ffffff; text-decoration: none;} #nav a { display: block; padding: 6px 8px;} #nav li { float: left; background-color: #44A04D; margin-right: 1px; position: relative; width:15%;} #nav li li{ width: 100%; margin-top: 1px;} #nav li:hover { background-color: #006837;}#nav li li:hover { background-color: #006837;} #nav ul ul { position: absolute; visibility: hidden;} #nav ul ul ul{ position: absolute; left: 100%; top: -2px; border: solid 1px transparent;} #nav li:hover > ul { visibility: visible;} .right-arrow { float: right;} Can anyone solve my problem? Link to comment Share on other sites More sharing options...
davej Posted October 27, 2013 Share Posted October 27, 2013 (edited) The problem seems to be that nav is taking up 100% of the width but nav li is only taking up 90%+6px. It would be much easier if you would use a fixed width. Edited October 27, 2013 by davej Link to comment Share on other sites More sharing options...
dsonesuk Posted October 28, 2013 Share Posted October 28, 2013 The use of percentage width has made the usual method complicated as you have to supply combined total width, and margin left which calculates to padding and margin used in anchor and li #nav { clear: both; float: left; font-family: verdana; font-size: 9pt; font-weight: bold; margin: 10px auto; overflow-x: hidden; text-align: center; width: 100%;}#nav .menu {float: left; position: relative; left: 50%;margin: 0 auto 0 102px; width: 90%;} /* (90%: 6* 15%) (102px: 12* 8px anchor padding + 6 x 1px) */#nav li { float: left; background-color: #44A04D; margin-right: 1px; position: relative; width:15%; right: 50%; } Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now