Foros del Web » Creando para Internet » CSS »

enlace que ocupa dos lineas

Estas en el tema de enlace que ocupa dos lineas en el foro de CSS en Foros del Web. Hola, tengo un menu de enlaces en vertical, hecho obviamente con una lista. En estado :hover, el background del enlace se colorea. Le he puesto ...
  #1 (permalink)  
Antiguo 05/05/2011, 09:05
Avatar de PedroDesing  
Fecha de Ingreso: octubre-2007
Ubicación: Barcelona, España
Mensajes: 202
Antigüedad: 10 años, 1 mes
Puntos: 18
enlace que ocupa dos lineas

Hola, tengo un menu de enlaces en vertical, hecho obviamente con una lista.

En estado :hover, el background del enlace se colorea. Le he puesto un padding-left: para que haya unos pixeles coloreados antes de que comience el texto. El problema viene con un enlace que ocupa dos lineas. Solo se le aplica el padding a la primera linea.

Espero que esta imagen explique bien lo que me pasa:

http://img6.imageshack.us/img6/9416/sinttulo1qp.gif

Lo puedo solucionar jugando con el estado :hover al <li> en lugar del <a>, pero no parece una practica muy "lícita".

Espero sus comentarios. Gracias.
__________________
pedrorodas.com próximamente! Permanezcan atentos
  #2 (permalink)  
Antiguo 05/05/2011, 10:01
Avatar de BloodShadow  
Fecha de Ingreso: marzo-2010
Ubicación: El Salvador
Mensajes: 393
Antigüedad: 7 años, 8 meses
Puntos: 52
Respuesta: enlace que ocupa dos lineas

le estas dando el padding al <a> por eso te pasa eso... dale el padding al li y veras como todo marcha bien :)
  #3 (permalink)  
Antiguo 06/05/2011, 04:57
Avatar de PedroDesing  
Fecha de Ingreso: octubre-2007
Ubicación: Barcelona, España
Mensajes: 202
Antigüedad: 10 años, 1 mes
Puntos: 18
Respuesta: enlace que ocupa dos lineas

Muchas gracias por tu aporte.

Ya habia probado eso, y me soluciona el problema de la alineacion, pero a costa de perder esos pixeles en verde a la izquierda del texto. Si le doy el padding al li, entonces en estado hover solo se colorea la parte que tiene texto.

Se me entiende?


Muchas gracias
__________________
pedrorodas.com próximamente! Permanezcan atentos
  #4 (permalink)  
Antiguo 06/05/2011, 05:19
Avatar de yonaida  
Fecha de Ingreso: marzo-2011
Ubicación: Barcelona
Mensajes: 123
Antigüedad: 6 años, 8 meses
Puntos: 20
Respuesta: enlace que ocupa dos lineas

hola, tengo algo igual a lo tuyo y lo resolvi asi:

Código:
<li class='subtitulo'>
   <a href='#'><p class='indent'> - Drilling, Production
   <br/> <span class='indent'> &amp; Storage</span> </p></a>
</li>
si te fijas lo que hago es yo misma meter el salto de linea y luego aplicar otro estilo con el padding.

Código:
	
#menu_vertical li.subtitulo{	
	background-color:#dde6ea;
	font-size:11px;
	text-align:left;
	padding-left:11px;
	color:#336699;	
}
#menu_vertical p.indent{
	padding:5px;
	margin-left:4px;
}


espero que te sirva, suerte.
__________________
Everybody Else It's Doing It, So Why Can't We?
  #5 (permalink)  
Antiguo 06/05/2011, 06:32
Avatar de PedroDesing  
Fecha de Ingreso: octubre-2007
Ubicación: Barcelona, España
Mensajes: 202
Antigüedad: 10 años, 1 mes
Puntos: 18
Respuesta: enlace que ocupa dos lineas

Muchas gracias, eso es lo que buscaba! Sólo habia que buscarle las vueltas al CSS, como casi siempre!
__________________
pedrorodas.com próximamente! Permanezcan atentos

Etiquetas: enlace, lineas, ocupa
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:02.