Foros del Web » Creando para Internet » CSS »

Texto vertical: Mismo problema, ninguna solución

Estas en el tema de Texto vertical: Mismo problema, ninguna solución en el foro de CSS en Foros del Web. Hola a todos. Bien, antes que nada disculpen por esta consulta tan repetida en el foro, pero después de estar largo tiempo buscando, no he ...
  #1 (permalink)  
Antiguo 03/03/2008, 14:16
Avatar de hey_alan  
Fecha de Ingreso: diciembre-2006
Ubicación: México
Mensajes: 348
Antigüedad: 11 años
Puntos: 8
Pregunta Texto vertical: Mismo problema, ninguna solución

Hola a todos.

Bien, antes que nada disculpen por esta consulta tan repetida en el foro, pero después de estar largo tiempo buscando, no he encontrado una solución "real".

No me sirve "line-height" debido a que el texto tiene más de una línea .

He intentado aplicando "display:table-cell" y usando "vertical-align" y explorer no lo muestra.

El caso es simple: tengo una clase de enlace que tiene un alto de 70px y ancho de 166px, y quiero que el texto quede alineado al centro (vertical, claro).

Sé que no es "necesario", pero les dejo el CSS:

Código:
menu a{background:url(leaf1.gif); width:166px; height:70px; border:0; color:#FFFFFF; font-weight:bold; text-decoration:none; display:block;}
HTML:

Código HTML:
<ul>
<li class="menu"><a href="index.html">Portada</a></li>
<li class="menu"><a href="#">Dibujos</a></li>
<li class="menu"><a href="#">Composiciones literarias</a></li>
<li class="menu"><a href="#">Cuento</a></li>
</ul> 
Claro, no tiene por qué funcionar ya que aún no le he puesto nada :P

Saludos
__________________
Alan Marth Media

Diseño web y Publicidad en Morelia, Michoacán

Última edición por hey_alan; 03/03/2008 a las 14:22
  #2 (permalink)  
Antiguo 03/03/2008, 14:35
 
Fecha de Ingreso: febrero-2008
Mensajes: 62
Antigüedad: 9 años, 9 meses
Puntos: 1
Re: Texto vertical: Mismo problema, ninguna solución

Porque no intentas definiendole un padding top y bottom del mismo valor?
Digamos, si deseas que tu boton sea de x alto (height) nada mas lo declaras como bloque (display: block;) le define un padding top y bottom que se acerque al valor que deseas.

Con eso deberia verse "centrado" verticalmente. Claro, habra que cranearle los valores, tomando en cuenta el valor inicial de la fuente.
  #3 (permalink)  
Antiguo 03/03/2008, 14:44
Avatar de hey_alan  
Fecha de Ingreso: diciembre-2006
Ubicación: México
Mensajes: 348
Antigüedad: 11 años
Puntos: 8
Re: Texto vertical: Mismo problema, ninguna solución

Muchas gracias por tu respuesta cleft.

El problema está en el enlace de "composiciones literarias" ya que como es un término "largo", me crea un salto de línea y por lo tanto desencaja.

Saludos.
__________________
Alan Marth Media

Diseño web y Publicidad en Morelia, Michoacán
  #4 (permalink)  
Antiguo 03/03/2008, 14:53
 
Fecha de Ingreso: febrero-2008
Mensajes: 62
Antigüedad: 9 años, 9 meses
Puntos: 1
Re: Texto vertical: Mismo problema, ninguna solución

No se si tienes acceso a la estructura o solo al CSS. Ya que, podrias crear una clase y aplicarla a aquellos elementos que contengan dos lineas.
Si el estilo para los <a> fuese:

Código:
#menu a {
padding: 30px 10px;
background: url();
color: #333;
}
Entonces, podrias crear una especial alterando nada mas el relleno:
Código:
#menu a.doble {
padding: 15px 10px;
}
Y asignar dicha clase:
Código:
<ul>
<li class="menu"><a href="index.html">Portada</a></li>
<li class="menu"><a href="#">Dibujos</a></li>
<li class="menu"><a href="#" class="doble">Composiciones literarias</a></li>
<li class="menu"><a href="#">Cuento</a></li>
<li class="menu"><a href="#" class="doble">Lorem Ipsum Dolor Sit Amet</a></li>
</ul>
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 13:26.