Menu Imposible de centrar.

DorianGray · #1 (**permalink**) 21/04/2006, 23:50

Tengo un problema, quiero hacer un menu en css pero cuando pongo float left se va a la izquierda aunque este dentro del contenedor que le dice que el texto tiene que estar centrado. trate de ponerlo en display: inline; pero la unica forma que no quede como listado es con float: left;.

Si alguien podria ayudarme estaria agradecido.
Aca el xHTML.

Código:

<body>
<div id="barra-top">Pagina Beta.</div>
<div id="contenedor">
  <ul id="navi">
   <li><a href="/" title="Inicio">Inicio</a></li>
   <li><a href="/blog/" title="blog">Blog</a></li>
   <li><a href="/portfolio/" title="Portfolio">Portfolio</a></li>
   <li><a href="/contacto/" title="Contacto">Contacto</a></li>
   <li><a href="/xtras/" title="Xtras">Xtras</a></li>
  </ul>   
   </div>
</body>

Y el css

Código:

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #333333;
	background-image:url(../images/bg.gif);
	background-repeat: repeat-x;
	text-align: center;
	}
#barra-top {
    background-image:url(../images/barra.gif);
	height: 20px;
	color: #333333;
	padding: 4px 0 5px 10px;
	text-align: center;
	font-family: Trebuchet MS;
	font-size: 14px;
	word-spacing: normal;
	text-decoration: none;
	font-weight: bold;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	}
	
#barra-top a {
	color: #FFFFFF;
	text-decoration: underline;
	}
	
#barra-top a:hover {
	color: #222222;
	}

#contenedor {
width: 750px;
text-align: center;
	}
	
#navi { 
 
	list-style:none;
	margin:0;
	padding:0;
}
#navi li {
margin-top: 0px;
margin-left: 3px;
	padding:0;
	float: left;
	text-align: center;
		position: relative;
}
#navi li a {
	display:block;
	width: 50px;
	padding-top: 15px;
	text-decoration:none;
	text-align:center;
	font-size:11px;
	color:#FFFFFF;
	background-color:#000000;
}
#navi li a:hover {
	color:#99CC00;
	background-color:#003366;
}

kahlito · #2 (**permalink**) 25/04/2006, 02:35

Hola DorianGray, la verdad es que sí que parece imposible.

No tengo mucho tiempo para seguir intentándolo, te aconsejo que lo empieces de nuevo y asi revisando paso por paso seguro que te resulta más facil que arreglar lo que tienes

, si tampoco te sale aqui estaremos para revisarlo

hunab · #3 (**permalink**) 25/04/2006, 08:47

utiliza display:inline, inténtalo porque se puede, si no lo consigues pega el código y aquí seguro que te echan una mano...
saludos!
prueba algo como esto:
#navi{text-align:center}
#navi li{display:inline}