Foros del Web » Creando para Internet » CSS »

Problema para centrar menú horizontalmente

Estas en el tema de Problema para centrar menú horizontalmente en el foro de CSS en Foros del Web. Hola! Soy nuevo por los foros y vengo con una preguntita para ver si alguien me la puede solucionar. El caso es que tengo hecho ...
  #1 (permalink)  
Antiguo 16/05/2005, 14:30
 
Fecha de Ingreso: mayo-2005
Ubicación: Bilbao, País Vasco
Mensajes: 10
Antigüedad: 12 años, 6 meses
Puntos: 0
Problema para centrar menú horizontalmente

Hola!

Soy nuevo por los foros y vengo con una preguntita para ver si alguien me la puede solucionar. El caso es que tengo hecho un menú horizontal en css, vamos, que realmente no viene siendo más que una lista. El caso es que me sale en el navegador siempre alineada horizontalmente a la izquierda.

Me gustaría saber cómo puedo centrarla. He probado con mil y una etiquetas... pero sin ninguna suerte. Cuál se supone que es la etiqueta y su propiedad "oficial" para poder centrar una lista?

Lo único que se me ha ocurrido ha sido hacer un padding left y centrarlo de esta manera, pero claro, está el tema de que sólo se verá bien con una resolución. También he pensado en hacer esto y con una función javascript detectar la resolución del visitante y redireccionarle a uno u otro css en el que el padding left variaría dependiendo de la resolución.

Si alguien sabe la etiqueta que tengo que usar o en el otro caso la función javascript apropiada se lo agradecería de por vida, ya que este asunto me está volviendo loco.

Un saludo y gracias de antemano!!

Última edición por iraultza; 16/05/2005 a las 14:42
  #2 (permalink)  
Antiguo 16/05/2005, 14:38
 
Fecha de Ingreso: mayo-2005
Mensajes: 306
Antigüedad: 12 años, 6 meses
Puntos: 0
te sugiero que uses:

text-align:center;

que seria lo mismo que usar el align en un <td> si es que esta dentro de una celda.
<td align="center">

en caso contrario podes probar tambien dandole un ancho fijo a la estructura que contenga el texto y a esa misma estrucutra darle el align center.

Saludos.
  #3 (permalink)  
Antiguo 16/05/2005, 14:40
 
Fecha de Ingreso: mayo-2005
Mensajes: 306
Antigüedad: 12 años, 6 meses
Puntos: 0
Aclaracion: el align center lo debe tener la estrucutura que contenga la lista, no la lista en si.
Saludos!
  #4 (permalink)  
Antiguo 16/05/2005, 14:45
 
Fecha de Ingreso: mayo-2005
Ubicación: Bilbao, País Vasco
Mensajes: 10
Antigüedad: 12 años, 6 meses
Puntos: 0
Lo primero, gracias por responder tan rápido.

Probé el align-center en la estructura, fue lo primero que hice... y nada. Supongo que debería funcionar... pero no lo hace. La lista con todos los elementos sigue centrada a la izquierda.

He ahí mi ofuscación.

Un saludo!
  #5 (permalink)  
Antiguo 16/05/2005, 15:05
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Hola iraultza, puedes intentarlo asi:
Código HTML:
<style type="text/css">
ul {
	text-align: center;
}
li {
	text-align: center;
}
</style>
</head>
<body>
<div id="centrarlista"><ul>Tu lista
<li>Uno</li>
<li>Dos</li></ul>
</div>
</body> 
Saludosss
  #6 (permalink)  
Antiguo 17/05/2005, 02:28
 
Fecha de Ingreso: mayo-2005
Ubicación: Bilbao, País Vasco
Mensajes: 10
Antigüedad: 12 años, 6 meses
Puntos: 0
Hola!!

Probé este último código y tampoco me funciona. Os paso el código css a ver si así me podéis ayudar mejor. Gracias y un saludo.

Código HTML:
#header {
	FONT-SIZE: 93%; BACKGROUND: url(bg.gif) #dae0d2 repeat-x 50% bottom; WIDTH: 100%; 

LINE-HEIGHT: normal _position: absolute; _top: 50%;
}
#header UL { 
	 PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 10px; LIST-STYLE-TYPE: none 

_position: absolute; _top: 50%; text-align: center;
}

#header LI {
	PADDING-RIGHT: 0px; PADDING-LEFT: 9px; BACKGROUND: url(left.gif) no-repeat left top; 

FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; text-align: center;
}
  #7 (permalink)  
Antiguo 17/05/2005, 07:12
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Hola de nuevo.

Tienes mezclado varias opciones por eso no te lo coje, prueba así:

Código HTML:
<style type="text/css">
ul {
	text-align: center;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	list-style-image: none;
	}
li {
	padding:0px;
	margin:0px; 
	background: url(left.gif) no-repeat left top; 
	text-align: center;
}
#header {
	FONT-SIZE: 93%; BACKGROUND: url(bg.gif) #dae0d2 repeat-x 50% bottom; WIDTH: 100%;} 
</style>
</head>

<body><div id="header"><ul>Mi lista
<li>Uno</li>
<li>Dos</li>
</ul>
</div>
</body> 
Como verás en el UL no hace falta la posicion abosluta y el 50% en el top, en el LI tampoco hace falta que flote a la izquierda si quieres tenerlo en el centro, tambien he resumido el paddin que en vez de poner los 4 con el mismo tamaño puedes poner solo 1.

Creo que es lo que buscas, si lo que quieres es ponerlo todo en el centro verticalemente es otra cosa.

Saludosss
  #8 (permalink)  
Antiguo 18/05/2005, 03:51
 
Fecha de Ingreso: mayo-2005
Ubicación: Bilbao, País Vasco
Mensajes: 10
Antigüedad: 12 años, 6 meses
Puntos: 0
Hola!

En estos días he probado el código que me pusiste y tampoco me funcionó. Tenía el código fuente tan trasteado que al final he decidido empezar de 0 a hacer el menú, creo que es lo mejor. Si lo consgio centrar, explicaré aquí el código para compartirlo con los que puedan tener el mismo problema que yo.

Gracias a todos!!
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 00:09.