Foros del Web » Creando para Internet » CSS »

Centrar items en una lista... como?

Estas en el tema de Centrar items en una lista... como? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/06/2009, 00:10
 
Fecha de Ingreso: octubre-2004
Mensajes: 107
Antigüedad: 13 años, 2 meses
Puntos: 0
Centrar items en una lista... como?

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
  #2 (permalink)  
Antiguo 08/06/2009, 02:33
Avatar de galizian  
Fecha de Ingreso: junio-2009
Mensajes: 11
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: Centrar items en una lista... como?

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
  #3 (permalink)  
Antiguo 08/06/2009, 03:39
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Centrar items en una lista... como?

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 08/06/2009, 05:48
 
Fecha de Ingreso: octubre-2004
Mensajes: 107
Antigüedad: 13 años, 2 meses
Puntos: 0
Respuesta: Centrar items en una lista... como?

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!
  #5 (permalink)  
Antiguo 08/06/2009, 06:38
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Centrar items en una lista... como?

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 08/06/2009 a las 11:06 Razón: se colo ul delante de #menu
  #6 (permalink)  
Antiguo 08/06/2009, 10:42
 
Fecha de Ingreso: octubre-2004
Mensajes: 107
Antigüedad: 13 años, 2 meses
Puntos: 0
Respuesta: Centrar items en una lista... como?

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 :(
  #7 (permalink)  
Antiguo 08/06/2009, 10:45
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Centrar items en una lista... como?

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

Última edición por Mikmoro; 08/06/2009 a las 10:50
  #8 (permalink)  
Antiguo 08/06/2009, 11:10
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Centrar items en una lista... como?

@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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #9 (permalink)  
Antiguo 08/06/2009, 11:48
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.824
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: Centrar items en una lista... como?

Cita:
Iniciado por tksko Ver Mensaje
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> 
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #10 (permalink)  
Antiguo 08/06/2009, 23:58
 
Fecha de Ingreso: octubre-2004
Mensajes: 107
Antigüedad: 13 años, 2 meses
Puntos: 0
Respuesta: Centrar items en una lista... como?

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
  #11 (permalink)  
Antiguo 09/06/2009, 13:05
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.824
Antigüedad: 9 años, 9 meses
Puntos: 951
Busqueda Respuesta: Centrar items en una lista... como?

Cita:
Iniciado por tksko Ver Mensaje
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
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:19.