Centrar un menu? que no se centra..

[djkiku]

Hola!

Tengo un meno que no se centra, y no entiendo por que

He puesto este css:

Código CSS:

#menu1 {margin-top: -2px;  float:center; width:100%; }
 

Y es el menu principal de la pagina: www.comprarportatilbarato.com

Si alguien me puede decir por que no se centra.. estaria muy agardecido!

[gartzia6]

Prueba con esto aunque no sea la mejor forma de hacerlo creo que te funcionara. Ire mirando otros comentarios para haber si se puede hacer mejor.

Código CSS:

#menu1 {
margin-top: -2px;
width: 100%;
position: relative;
left: -150px;
}
 

[djkiku]

Gartzia6 Eres un genio!!! Muchisimas Gracias!

Si ya se que mi plantilla esta muy mal montada... en cuanto tenga algun ingreso contratare a alguien que me la pueda poner bien... por que creo que esto afecta bastante al SEO


Muchisimas gracias!

[djkiku]

Ahora veo que si pongo un nuevo boton... pues se descoloca todo.. pero bueno supongo que es ir adaptando..

Gracias de todas formas! :)

[pzin]

Por curiosidad, ¿dónde leíste que a float se le pueda poner un valor que no sea left o right?

[djkiku]

jejeje buena pregunta! en el css no soy un gran experto que digamos, y pruebo align="" si eso no funcio pues float="" y si eso tampoco pos padding="" jeje......

Supongo que todos hemos tenido un empiezo! :)

[pzin]

Iniciado por djkiku

jejeje buena pregunta! en el css no soy un gran experto que digamos, y pruebo align="" si eso no funcio pues float="" y si eso tampoco pos padding="" jeje......

Supongo que al final y después de todo, nuestros políticos son en quienes nos fijamos, porque más o menos hacen lo mismo.

[BloodShadow]

como dice @Bonez no existe float center... y la solucion que te dio @gartzia6 es erronea puesto q, como dices, si agregar otra opcion se te ira colapsando, mi recomendacion es que uses tabla, un td para cada elemento y la tabla solo le das un align="center" y listo. O pruebes aplcarle al ul un display: inline-table; margin: 0px auto; aunq en realidad creo q eso no es muy funcional con los IE... Pero tanto tu solucion como la de @gartzia6 estan erroneas... sorry

[chrishxc]

Código CSS:

#menu1 {
width: 100%;
position: relative;
margin-left:auto;
margin-right:auto;
}
 

Esto no se descentra en la vida.

[pzin]

chrishxc normal que no se descentre algo que no está centrado sino que ocupa todo el ancho.

La solución de gartzia6 funciona perfectamente. No es lo ideal, pero es que la mirando la web tampoco se pueden poner soluciones ideales ya que es un desastre. Si, se nota aquello del voy probando. La solución es funcional, y supongo que con funcionalidad te conformarás.

Aquel salvaje que dice de usar tablas, ni caso. Se usan para tabular datos, no para estructurar.

[djkiku]

Muchas gracias a todos, pero la solución de chrishxc no me hace efecto.. se queda en la derecha.. (que cosa mas rara)...

De momento lo dejo como comento Bonez

[BloodShadow]

Iniciado por Bonez

chrishxc normal que no se descentre algo que no está centrado sino que ocupa todo el ancho.

La solución de gartzia6 funciona perfectamente. No es lo ideal, pero es que la mirando la web tampoco se pueden poner soluciones ideales ya que es un desastre. Si, se nota aquello del voy probando. La solución es funcional, y supongo que con funcionalidad te conformarás.

Aquel salvaje que dice de usar tablas, ni caso. Se usan para tabular datos, no para estructurar.

No se en que parte de la web dice estrictamente las tablas son solo para eso, efectivamente son la mejor forma de tabular, pero en este caso segun la estructura del menu, es la mejor solucion, xq para usar margin 0 auto tendrias que dar un width fijo, en este caso podria funcionar por lo q tu mismo dices, el codigo esta mal implementado pero el amigo dice ser un aprendiz y creo q todos tenemos derecho a equivocarnos, en este caso el no esta equivocado sino que lo hizo de la mejor forma para el posible. Yo le di otra solucion q es usar tabla... vos no das solucion solo criticas. Creo q antes de criticar seria bueno aportar...

[djkiku]

Dejo el resto del codigo.. quizá desde ahi sea mas fáçil de centrar

Código CSS:

#menu1 ul { margin:0; list-style:none;}
#menu1 li {display:inline;margin:0;padding:0;  }
#menu1 a {  
text-shadow: 0px 2px 3px #ffffff;
        display:block; 
float:left;background:url(http://4.bp.blogspot.com/-M3F4NPGILtw/UHRdcstXd3I/AAAAAAAAAXo/vsvytpUEGno/s1600/comprar_portatil_barato_main.png) no-repeat left top;margin:0 1.5px 0 1.5px;padding:0 0 0 6px;text-decoration:none;}
#menu1 a span {float:left;display:block; background: url(http://3.bp.blogspot.com/-wKy1HpN2soU/UHRYMnPSivI/AAAAAAAAAXY/JwzWt0B7YgQ/s320/comprar_portatiles_muy_baratos_main.png) no-repeat right top;padding:5px 16px 4px 12px;color:#999;}
#menu1 a span {font: bold 14px Arial, Helvetica, sans-serif; color:#000099; float:none;}
#menu1 a:hover span {color:#000099;}
#menu1 a:hover {background-position:0% -27px;}
#menu1 a:hover span {background-position:100% -27px;}
.clear {clear:left}
 

[pzin]

Iniciado por BloodShadow

No se en que parte de la web dice estrictamente las tablas son solo para eso

En la especificación oficial lo pone. Deberías de darte una vuelta por ahí y luego cuando te hayas dado cuenta de que lo que haces es desaportar, vuelves y nos lo cuentas.

[flashmax]

hola te dejo un ejemplo de como centrar el menu:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
#menu1{ 
clear: both; 
float: left; 
overflow: hidden; 
width: 100%; 
} 

#menu { 
float: left; 
left: 50%; 
list-style-type: none;
margin: 0 auto; padding: 
0; position: relative; 
} 

#menu li { 
float: left; 
position: relative; 
right: 50%; 
} 

#menu a { 
background: none repeat scroll 0 0 #000; 
border: 1px solid #CCC; 
color: #FFF; 
display: block; 
padding: 4px 10px;
text-decoration: none;
width: auto; 
}

</style>
</head>

<body>
<div id="menu1"> 
<ul id="menu"> 
<li><a href="/pagina1.html">Página 1</a></li> 
<li><a href="/pagina2.html">Página 2</a></li> 
<li><a href="/pagina3.html">Página 3</a></li> 
<li><a href="/pagina4.html">Página 4</a></li> 
</ul> 
</div>
</body>
</html> 

[oliverf2]

margin: 0 auto;