Foros del Web » Creando para Internet » CSS »

Alinear item verticalmente en menu

Estas en el tema de Alinear item verticalmente en menu en el foro de CSS en Foros del Web. Hola a todos Tengo el siguiente código para crear un menu vertical: Código: #navi { list-style:none; margin:0px; padding:0px; } #navi li { width:158px; margin:0px; padding:0px; ...
  #1 (permalink)  
Antiguo 15/03/2007, 10:20
 
Fecha de Ingreso: junio-2003
Mensajes: 778
Antigüedad: 20 años, 10 meses
Puntos: 1
Alinear item verticalmente en menu

Hola a todos

Tengo el siguiente código para crear un menu vertical:

Código:
#navi {
	list-style:none;
	margin:0px;
	padding:0px;
}

#navi li {
	width:158px;
	margin:0px;
	padding:0px;
	border-bottom:1px solid #666666;
	}
#navi li a {
	display:block;
	width:158px;
	_height:24px;
	min-height:24px;
	margin-top:0px;
	padding:0px;
	text-decoration:none;
	text-align:left;
	font-size:10px;
	color:#666666;
	background-color:#FFFFFF;
}
Me gustaría centrar verticalmente los enlaces en cada "block"... Como puedo hacer esto?
  #2 (permalink)  
Antiguo 16/03/2007, 09:51
 
Fecha de Ingreso: junio-2003
Mensajes: 778
Antigüedad: 20 años, 10 meses
Puntos: 1
Re: Alinear item verticalmente en menu

alguna idea... llevo 2 días intentandolo pero no consigo nada...

Gracias de antemano
  #3 (permalink)  
Antiguo 16/03/2007, 11:50
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Re: Alinear item verticalmente en menu

Si pones el código html y el css quizá alguien te pueda ayudar más fácilmente.

Mikel.
  #4 (permalink)  
Antiguo 17/03/2007, 03:47
 
Fecha de Ingreso: junio-2003
Mensajes: 778
Antigüedad: 20 años, 10 meses
Puntos: 1
Re: Alinear item verticalmente en menu

Tienes razón Mikmoro

Este es el código HTML-PHP

Código:
<ul id="navi"> 
	<li><a href="object.php?s=1&sbs=1">Enlace</a></li>
	<li><a href="object.php?s=1&sbs=2">Enlace</a></li>
	<li><a href="object.php?s=1&sbs=3">Enlace</a></li>
	<li><a href="object.php?s=1&sbs=4">Enlace</a></li>
	<li><a href="object.php?s=1&sbs=5">Enlace</a></li>
	<li><a href="object.php?s=1&sbs=6">Enlace</a></li>	
</ul>
  #5 (permalink)  
Antiguo 17/03/2007, 04:21
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Re: Alinear item verticalmente en menu

Si no tienes pensado cambiar el tamaño y forma de los enlaces, te bastaría con poner line-height: 22px; al selector #navi li a.

Mikel.
  #6 (permalink)  
Antiguo 20/03/2007, 02:36
 
Fecha de Ingreso: junio-2003
Mensajes: 778
Antigüedad: 20 años, 10 meses
Puntos: 1
Re: Alinear item verticalmente en menu

Hola mikmoro

Si, eso ya lo había probado, lo que pasa es que algun enlace es mayor que el width, al retornar el carro la separación entre lineas, pues corresponde a 22px... y eso es bastante antiestético.

Alguna alternativa??
  #7 (permalink)  
Antiguo 20/03/2007, 16:30
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Re: Alinear item verticalmente en menu

Pues la manera más simple es crear una clase especial para los links que vayan a tener dos líneas y corregir el alto de línea. Me extrañaría que un menú fuera dinámico como para no poder controlar lo que pondrá en los botones de los enlaces, así que imagino que se podrán tratar en especial.

Mikel.
  #8 (permalink)  
Antiguo 20/03/2007, 23:29
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 20 años, 7 meses
Puntos: 5
Re: Alinear item verticalmente en menu

Se me ocurren 3 formas, aunque no las he probado:

1- en el selector #navi li a, agregale: margin-top:3px, (3px cambialo a gusto).

2- en el selector #navi li, agregale: padding-top: 3px, (otra vez 3px cambialo a gusto).

3- en el selector #navi li a, agregale:

position:relative;
top: 3px;

3px a gusto.

igual puede que no funcionen, pero no he tenido que hacer esto antes y si lo resolvemos, ya lo sabre para cuando lo necesite, espero que te funcione.

Saludos
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #9 (permalink)  
Antiguo 20/03/2007, 23:41
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 20 años, 7 meses
Puntos: 5
Re: Alinear item verticalmente en menu

Pues me anime y lo probe:
La primera opcion que te di antes, si cambias en el selector #navi li a el margin-top: 0px que tienes por margin-top:6px, funciona.

La segunda opcion, si agregas en el selector #navi li debajo de padding: 0px, agregas padding-top: 6px, esto funciona igual.

La tercera opcion no la probe.

La cuarta existe, y consiste en darle un display: table-cell, y luego aplicarle la propiedad vertical-align de los td, pero no estoy muy seguro que funcione en IE como siempre, asi que es como si nada.

Espero haberte ayudado, e incluyo mi prueba debajo :D

Saludos

Cita:
<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#navi {
list-style:none;
margin:0px;
padding:0px;
}
#navi li {
width:158px;
margin:0px;
padding:0px;
/*padding-top: 6px;*/ /*FUNCIONA*/
border-bottom:1px solid #666666;
}
#navi li a {
display:block;
width:158px;
_height:24px;
min-height:24px;
/*margin-top:7px;*/ /*FUNCIONA*/
margin-top:0px;
padding:0px;
text-decoration:none;
text-align:left;
font-size:10px;
color:#666666;
background-color:#FFFFFF;
}
</style>
</head>
<body>
<ul id="navi">
<li><a href="object.php?s=1&sbs=1">Enlace</a></li>
<li><a href="object.php?s=1&sbs=2">Enlace</a></li>
<li><a href="object.php?s=1&sbs=3">Enlace</a></li>
<li><a href="object.php?s=1&sbs=4">Enlace</a></li>
<li><a href="object.php?s=1&sbs=5">Enlace</a></li>
<li><a href="object.php?s=1&sbs=6">Enlace</a></li>
</ul>
</body>
</html>
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #10 (permalink)  
Antiguo 21/03/2007, 01:29
 
Fecha de Ingreso: junio-2003
Mensajes: 778
Antigüedad: 20 años, 10 meses
Puntos: 1
Re: Alinear item verticalmente en menu

Gracias a todos.

Al final he creado otro selector para los enlaces más largos (strlen())

#navi li a.large {
display:block;
width:138px;
_height:24px;
min-height:24px;
line-height:11px;
padding-top:2px;

text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
text-align:left;
font-size:11px;
font-weight:bold;
color:#666666;
background-color:#FFFFFF;
}
  #11 (permalink)  
Antiguo 21/03/2007, 07:36
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 20 años, 7 meses
Puntos: 5
Re: Alinear item verticalmente en menu

Me alegro que lo hayas resuelto :D
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
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 01:52.