Jump to content

I can't get my nav-bar align in the center


rutgervs94

Recommended Posts

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

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 by davej
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...