Centrar items en una lista... como?

tksko · #1 (**permalink**) 07/06/2009, 23:10

hola a todos!
siempre tengo el mismo problema, especialmente cuando quiero utilizar templates que para los menues utilizan generalmente un estilo para un <li> y <ul>...

mi problema es que tengo un menu horizontal y quiero que los items (opciones del menu) se muestren centradas y no desde la izquierda.........

pero no logro hacerlo..

el css es este:

Código HTML:

ul#menu { width: 100%; height: 43px; background: #FFF url("images/menu-bg.gif") top left repeat-x; font-size: 0.8em; font-family: "Lucida Grande", Verdana, sans-serif; font-weight: bold; list-style-type: none; margin: 0; padding: 0; }
ul#menu li { display: block; float: left; margin: 0 0 0 5px; }
ul#menu li a { height: 43px; color: #777; text-decoration: none; display: block; float: left; line-height: 200%; padding: 8px 15px 0; }
ul#menu li a:hover { color: #333; }
ul#menu li a.current{ color: #FFF; background: #FFF url("images/current-bg.gif") top left repeat-x; padding: 5px 15px 0; }

luego el menu simplemente es:

Código HTML:

<ul id="menu">
<li><a href="#" title="">Home</a></li>
<li><a href="#" title="" >Products</a></li>
<li><a href="#" title="">Contact</a></li>
<li><a href="#" title="">Label 4</a></li>
<li><a href="#" title="">Label 5</a></li>
</ul>

si alguien pudiera ayudarme se los agradeceria..

thanks :D

galizian · #2 (**permalink**) 08/06/2009, 01:33

No se si te servira pero esto es mi forma de hacerlo. Meto la lista completa dentro de un div, de forma que el div ocupa todo el ancho del navegador y al ul lo ajusto a un ancho fijo que sera la suma de todos los elementos del menu.
Aqui el html:

Código HTML:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="menu">
	<ul>
		<li><a href="">Home</a></li>
		<li><a href="">Productos</a></li>
		<li><a href="">Contact</a></li>
		<li><a href="">label4</a></li>
		<li><a href="">label5</a></li>
	</ul>
</div>
</body>
</html>

Aqui el css:

Código HTML:

*{
	margin: 0;
	padding: 0;
}
/* Importante el text-align si quieres que tambien se centre en IE*/
body{
	text-align: center; 
}
#menu{
	background: #000;
}
/*Aqui lo mas importante es fijar un ancho y poner el margin: 0 auto*/
#menu ul{
	width: 900px;
	height: 43px;
	margin: 0 auto;
	list-style: none;
	background:#FFF;
}
/*Fijar el ancho para cada elemento(900/5=180)
#menu ul li{
	float: left;
	width: 180px;
	line-height: 40px;
	background: #FF0000;
}

Espero que esto te sirva de ayuda

kseso? · #3 (**permalink**) 08/06/2009, 02:39

Hola Tksko
¡Qué es lo que quieres centrar y respecto a qué exactamente?
¿Todo el menú (ul) respecto al body?
¿Cada uno de los items del menú (<a>) respecto a su contenedor (<li>)?
¿O las dos cosas?

La promesa de mi firma me impide extenderme más sobre el particular

tksko · #4 (**permalink**) 08/06/2009, 04:48

Quiero centrar los elementos de un menu en el centro de la pantalla con respecto al body.. no puedo fijar un tamaño de pantalla porque no conozco la resolucion del usuario.. la idea seria que se centre con cualquier resolucion, seria centrar todo el menu con respect oal body y a su vez cada li tiene el texto centrado tambien.

gracias!

kseso? · #5 (**permalink**) 08/06/2009, 05:38

para centrar <ul> sigue el enlace de mi firma, y en este caso, al div contenedor del menú añades la propiedad "text-align:center;"
Para centrar los <a>

Cita:

#menu ul li { display: inline; padding: 0 10px; }
#menu ul li a { line-height: Xem; color: #777; text-decoration: none; }
#menu ul li a:hover { color: #333; }

cambias los valores de px o em del padding y line-height a tus necesidades

Un saludo

tksko · #6 (**permalink**) 08/06/2009, 09:42

nop no sirve.. no se puede... será por algo que los que diseñan en css nunca centran los menues.. ya me doy por vencido. probe muchas cosas y nada :(

Mikmoro · #7 (**permalink**) 08/06/2009, 09:45

Mira este simple ejemplo
e imagino que habrá muchas más maneras de hacerlo, pero siempre depende de tus necesidades concretas.

kseso? · #8 (**permalink**) 08/06/2009, 10:10

@tksko:
había un error en el código que colocaba (copiado del inicial: ul#menu...
Posiblemente fuera el problema. Pero ahí tienes el ejemplo de Mikmoro. No andes buscando más

ArturoGallegos · #9 (**permalink**) 08/06/2009, 10:48

Cita:

Iniciado por tksko

nop no sirve.. no se puede... será por algo que los que diseñan en css nunca centran los menues.. ya me doy por vencido. probe muchas cosas y nada :(

Como dijo el compañero mike ¿de donde sacaste tal idea? creo que necesitas echarte una hojeada por san google jaja en fin volviendo a tu problema... estas usando propiedades que para lo que quieres hacer no vienen al caso

Como es el float:left y el display:block .... Teniendo eso dudo mucho que puedas centrar fácilmente aunque no digo que sea imposible.
Basándome en tu código te doy este deje tus estilos como comentario para que veas que hiciste tu y como lo acomode yo, además está probado que centrara en cualquier resolución pues no tiene nada del otro mundo

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>
<style type="text/css">
html, body{margin:0; paddin:0;}
#menu{display:block; height:43px; background:#FFF; border:1px #FFFF99 solid; text-align:center;}
ul#menu{padding:0; margin:0;}
#menu li{display:inline; padding:0 10px;}
#menu li a{text-decoration:none; font-family:verdana; font-size:12px; font-weight:bold; color:#777; line-height:38px;}
/*
ul#menu { width: 100%; height: 43px; background: #FFF url("images/menu-bg.gif") top left repeat-x; font-size: 0.8em; font-family: "Lucida Grande", Verdana, sans-serif; font-weight: bold; list-style-type: none; margin: 0; padding: 0; }
ul#menu li { display: block; float: left; margin: 0 0 0 5px; }
ul#menu li a { height: 43px; color: #777; text-decoration: none; display: block; float: left; line-height: 200%; padding: 8px 15px 0; }
ul#menu li a:hover { color: #333; }
ul#menu li a.current{ color: #FFF; background: #FFF url("images/current-bg.gif") top left repeat-x; padding: 5px 15px 0; }
*/
</style>
 </head>

 <body>
<ul id="menu">
<li><a href="#" title="">Home</a></li>
<li><a href="#" title="" >Products</a></li>
<li><a href="#" title="">Contact</a></li>
<li><a href="#" title="">Label 4</a></li>
<li><a href="#" title="">Label 5</a></li>
</ul>
 </body>
</html>

tksko · #10 (**permalink**) 08/06/2009, 22:58

Eso parece funcionar pero en el estilo mio no..
logro centrar los items pero pierdo el efecto del mouse over y no logro hacerlo andar..

les subo el codigo fuente a rapidshare para que lo puedan ver ya ke aki no se puede para que puedan aprenciar el efecto.

http://rapidshare.com/files/242480940/source.zip.html

ArturoGallegos · #11 (**permalink**) 09/06/2009, 12:05

Cita:

Iniciado por tksko

Eso parece funcionar pero en el estilo mio no..
logro centrar los items pero pierdo el efecto del mouse over y no logro hacerlo andar..

no habia hover porque no lo especifique pero pudiese haber puesto jaja bueno basandome en tu propio codigo sale esto.... nuevo codigo (estara disponible una semana luego lo borraran)

sale suerte y perdon por la tardansa