HTML5 + CSS Centrar NAV

[passado]

Olá pessoal, estou a tentar centrar um menu, o codigo que uso é este:

<nav id="main-nav" >
	<ul>
		<li class="current"><a href="index.html" data-description="rodapé">Home</a></li>
		<li><a href="quemsomos.html" data-description="">Quem Somos</a></li>
		<li><a href="" data-description="">Quero Comprar</a></li>
		<li><a href="" data-description="">Quero Vender</a></li>
		<li><a href="" data-description="">Garantias Stuff</a></li>
            <li><a href="" data-description="">Recrutamento</a></li>
		<li><a href="" data-description="">Contactos</a></li>
	</ul>
        </nav>

Logo no CSS tenho isto:

#main-nav { 
      border-top: 6px solid #000;
      height: 86px; 
	  z-index:194;
	  }

	#main-nav > ul { margin: -6px 0 0; }

		#main-nav li {
			list-style: none;
			float: left;
			position: relative;
			padding-left: 0;
			padding-right: 0;
			margin-left: auto;
			margin-right: auto;
			display: block;
		}

			#main-nav a {
				border-bottom: 1px solid transparent;
				border-top: 6px solid transparent;
				color: #3a3a3a;
				font-family: 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
				font-size: 12px;
				font-weight: 800;
				display: block;
				letter-spacing: -0.08px;
				padding: 26px 20px 40px;
				position: relative;
				text-align: center;
				text-transform: uppercase;
				z-index: 98;
			}

			.ie7 #main-nav a { padding: 33px 20px; }

			#main-nav a:after {
				color: #aeaeae;
				content: attr(data-description);
				font-size: 11px;
				font-style: italic;
				font-weight: 400;
				display: block;
				line-height: 0;
				margin: 3px 0 -3px;
				text-align: center;
				text-transform: lowercase;
			}

				#main-nav a:hover, #main-nav .hover > a, #main-nav .current > a {
					border-bottom-color: #e60094;
					border-top-color: #e60094;
					color: #e60094;
				}

				#main-nav a:hover, #main-nav .hover > a, #main-nav .current > a { background: #f8f8f8; }

				.not-ie #main-nav .current:after {
					background: #e60094;
					bottom: -2.5px;
					content: '';
					left: 50%;
					display: block;
					height: 5px;
					margin: 0 0 0 -2.5px;
					-webkit-transform: rotate(45deg);
					   -moz-transform: rotate(45deg);
						-ms-transform: rotate(45deg);
						 -o-transform: rotate(45deg);
							transform: rotate(45deg);
					position: absolute;
					width: 5px;

				}

			/* Dropdown */

			.no-js #main-nav li:hover > ul {
				display: block;
				top: 92px;
			}

			#main-nav ul ul {
				background: #3a3a3a;
				-webkit-box-shadow: 2.5px 2.5px 5px rgba(0, 0, 0, .2);
				   -moz-box-shadow: 2.5px 2.5px 5px rgba(0, 0, 0, .2);
						box-shadow: 2.5px 2.5px 5px rgba(0, 0, 0, .2);
				display: none;
				left: 0;
				padding: 0;
				position: absolute;
				top: 92px;
				width: 200px;
				z-index: 99;
			}

				#main-nav ul ul li { float: none; }

					#main-nav ul ul a {
						border: 0;
						border-bottom: 1px solid #252525;
						border-top: 1px solid #4c4c4c;
						color: #fff;
						display: block;
						font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
						font-size: 11px;
						letter-spacing: 0;
						font-weight: 400;
						padding: 8px 20px !important;
						text-align: left;
						text-transform: none;
					}

						#main-nav ul ul a:hover, #main-nav ul ul .hover > a, #main-nav ul ul .current > a, #main-nav ul ul .current > a:hover {
							background: #e60094;
							color: #fff;
						}

				.not-ie #main-nav ul ul .current:after { display: none; }

			/* Sub Dropdown */

			#main-nav ul ul ul {
				left: 200px !important;
				top: 0 !important;
			}

	/* Responsive Nav */

	#main-nav .responsive-nav {
		background-image: url(../img/responsive-nav-bg.png);
		background-position: center right;
		background-repeat: no-repeat;
		display: none;
		width: 100%;
	}

E não consigo fazer com que o menu fique centrado na página, alguma dica?

[softklin]

Não testei, mas tenta alterar a seguinte declaração:

#main-nav {
              border-top: 6px solid #000;
              height: 86px;
              z-index:194;
              width: 600px;   /* define um width razoável aqui, com dimensões fixas ou percentagens*/
              margin: auto;   /* o importante aqui é definir as margens laterais (left e right) para auto*/
}

[passado]

Boas @softklin,

Sim coloquei 960px que é o mesmo que uso para o content e realmente o menu ficou centrado 😕

MAS

Tenho um problema, esta parte:

 border-top: 6px solid #000;

so afecta os 960px e queria que ocupase toda a pagina, nao sei se me expliquei bem

[softklin]

Toda a largura da página? Se sim, tens de colocar isso num elemento que tenha largura/width de 100%.

[passado]

Toda a largura da página? Se sim, tens de colocar isso num elemento que tenha largura/width de 100%.

Se desse with: 100% nao devia fazer o mesmo efeito se colocar 960px?

Acabei por resolver assim:

#border { 
      border-top: 6px solid #000;
	  }
	   
#main-nav { 
     /* border-top: 6px solid #000;*/
      height: 86px; 
	  z-index:194;
	  width: 960px;
	  margin:auto;
	  }

E depois no HTML adicionei uma div, é correto?

[softklin]

Já resolveste o problema, mas para clarificar, estava a sugerir colocares outro elemento (uma div, por exemplo, com 100% de largura, para ficar com a largura da página), que foi o que acabaste por fazer (os 100% apenas são para forçar a largura da div à página; claro que o elemento que contém a div tem de ser o body).

Quanto à div vazia, fiz um pequeno teste em http://validator.w3.org, com o doctype do HTML5 e não acusou qualquer problema.

<!DOCTYPE html>
<html>
<head><title>teste</title></head>
<body>
<div id="border"></div>
</body>
</html>