enlace que ocupa dos lineas

[PedroDesing]

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.

[BloodShadow]

le estas dando el padding al <a> por eso te pasa eso... dale el padding al li y veras como todo marcha bien :)

[PedroDesing]

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

[yonaida]

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.

[PedroDesing]

Muchas gracias, eso es lo que buscaba! Sólo habia que buscarle las vueltas al CSS, como casi siempre!