Entrar

Menu horizontal con enlaces

joseki · · Solicitar retirada
Hola....tengo un problema con un menu horizontal usando listas....el problema es con el centrado de los elementos " li ".no consigo que me quede todo centrado,me queda siempre mas espacio por la izqierda.
a demas el texto me queda abajo....que esta mal?

codigo css:

<style type="text/css">
.barras {background-image:url(img.f/barra3.png);
width:884px;
height:44px;
margin:0 auto;
padding: 0px;
float: left;}

.barras li {padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;
margin:0px;
display:inline;
width: 112px;
}
</style>

codigo html:

<div class="barras">
<ul>
<li><a href="http://www.enlace.com"><font size="3"><b>XXXXX</b></font></a></li>

<li><a href="http://www.enlace.com"><font size="3"><b>XXXXX</b></font></a></li>

<li><a href="http://www.enlace.com"><font size="3"><b>XXXXX</b></font></a></li>

<li><a href="http://www.enlace.com"><font size="3"><b>XXXXXX</b></font></a></li>

<li><a href="http://www.enlace.com"><font size="3"><b>XXXXXX</b></font></a></li>

<li><a href="http://www.enlace.com"><font size="3"><b>XXXXX</b></font></a></li>
</ul></div>

si os fijais la imagen de fondo tiene un ancho total de 884px y un alto de 44px y los elementos " li " un ancho de 112px...entonces porque no me lo centra?

gracias.....
RanXeroX · · Solicitar retirada
saludos amigo.... yo tenia un problema similar con mi menu horizontal hecho con css, buscando por ahi encontre la solucion y consegui centrarlo aunque aun me queda un problema con los submenus que luego les digo en otro post, pero de que esta centrado ya lo esta, yo no domino mucho el css por eso mejor te paso mi codigo para que compares y le veas la solucion

codigo css:
-----------------------
.menu{ margin:1 auto;
padding:0;
text-align: center; }

.menu li, .menu li a{
display:inline; /*aplica el haslayout para IE6 asi evitamos el doble margen a elementos flotados*/
width:auto; }

.menu li{
margin:0 ; /*el 1px separaba las cajas*/
position:relative; /*Importante para el submenu pero por ahora no*/ }

.menu li a{
text-decoration: none;
background: #d20a1e;
color:white;
font: 16px "Trebuchet MS", Arial;
padding:3px 30px; /*espaciado de margen del texto dentro de la caja*/
border: 1px solid #ACCFE8; } /*borde y color de botones*/

.menu li a:hover{
background: #F31D36; }

/*MENU DESPLEGABLE*/

.menu li:hover ul{
display:block; } /*Indicamos que en hover del menu muestre el submenu*/


.menu ul{
display:none; /*indicamos que al cargar la web no muestre el submenu*/
left:0;
padding: 0; /*bordes externos del submenu*/
position:absolute;
top:27px; /*margen superior de submenu, evita que submenu tape a menu*/
width:130px; /*Le cambiamos el ancho sino hereda del ul anterior*/
}


.menu ul li {
margin:0;
padding:3px;
width:1050px; }

.menu ul li a{
border-width: 0 1px 1px 1px ;
border-color:#ACCFE8 ;
border-style:solid ;
color:white; /*color de texto de submenu*/
margin:2px ;
padding:3px 5px 3px 5px; /*Margen superior-inferior e izquierdo-derecho dentro de cajita submenu*/
width:850px; }

.menu ul li a:hover{
background: #F31D36; }
---------------------

codigo html:
---------------------
<html lang="es">
<head>


<title>menu hovizontal 3</title>

<link href="./estiloh.css" rel="stylesheet" type="text/css">
</head>
.....

<div style="text-align:center;" >

....
<br>

<ul class="menu">
<li><a href="http://www.rafersa.com.pe">Inicio</a></li>
<li><a href="http://www.rafersa.com.pe">Productos</a></li>
<li><a href="http://www.hi5.com">Servicios</a>
<ul>
<li><a href="http://www.google.com.pe">SubMenu uno</a></li>
<li><a href="http://www.hi5.com">SubMenu dos</a></li>
<li><a href="http://www.rafersa.com.pe">SubMenu tres</a></li>
<li><a href="http://www.rafersa.com.pe">SubMenu cuatro</a></li>
</ul>
</li>
<li><a href="#">Sucursales</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Noticias</a></li>
</ul>

</div>
...
RanXeroX · · Solicitar retirada
el problema al cual hacia alusion era que los submenus me quedaron deformados yo quiero que se vea como esta imagen que envio

si encuentras la solucion haber si me das una ayudita