Jump to content

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

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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...