Como usar una imagen de fondo desplazada verticalmente en links?

[tonnot]

Aunque me respondo yo mismo.

Se trata de poner una 'flechita' debajo del texto en los <a href... >

Si quiero que esté por debajo tengo que hacer el truco de tener un gif o png transparente que sea más alto de lo normal, para engañarlo y que salga así debajo del texto y no 'en linea' con el , no ?

O es posible desplazarla verticalmente ?
Por cierto los valores de desp x y desp y son usados en pixeles para sacar una porcion de imagen que esta en una imagen grande no ?


Otro por cierto, en mi dreamweaver cs5 no veo esas flechitas en modo diseño, solo en la live view . ?????


Saludos y gracias por vuestra ayuda

[sanxuan]

Tu idea es una posibilidad. Aporto otra:

<a class="conTriangulo" href="enlace.html"><img class="triangulo" src="triangulo.gif"/>Texto de mi enlace</a>

y el siguiente CSS:

img.triangulo {
width:50px;
height:50px;
position:relative;
bottom:-50px; /*el alto de la imagen */
left: 50px; /*La cantidad que quieras */
}
a.conTriangulo{
display:block; /* para que se vea como un cuadrado */
background:#456;
padding-right:50px; /* La imagen con posición relativa deja un hueco que hay que equilibrar */
}

Y otra variación sobre el tema, ésta con posición absoluta:

img.triangulo {
width:50px; /* El tamaño de la imgen */
height:50px;
position:absolute;
bottom:-50px; /*el alto de la imagen */
left: 50px; /*La cantidad que quieras */
}
a.conTriangulo{
display:block; /* para que se vea como un cuadrado */
background:#456;
position:relative; /* queremos que la imagen se posicione respecto al enlace*/
}

Son esquemas básicos, tendras que darles forma según tus necesidades.