Foros del Web » Creando para Internet » CSS »

Como usar una imagen de fondo desplazada verticalmente en links?

Estas en el tema de Como usar una imagen de fondo desplazada verticalmente en links? en el foro de CSS en Foros del Web. Aunque me respondo yo mismo. Se trata de poner una 'flechita' debajo del texto en los <a href... > Si quiero que esté por debajo ...
  #1 (permalink)  
Antiguo 01/02/2011, 02:36
 
Fecha de Ingreso: noviembre-2010
Mensajes: 70
Antigüedad: 7 años, 1 mes
Puntos: 0
Como usar una imagen de fondo desplazada verticalmente en links?

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
  #2 (permalink)  
Antiguo 06/02/2011, 19:35
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Como usar una imagen de fondo desplazada verticalmente en links?

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.

Etiquetas: fondo, links
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 23:24.