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;
}