Foros del Web » Creando para Internet » CSS »

Como hago para poner una imagen tipo "sticker"

Estas en el tema de Como hago para poner una imagen tipo "sticker" en el foro de CSS en Foros del Web. Hola gente que tal, queria saber como se puede poner los famosos "stickers" q se ven en muchas webs. Asi como este: Osea, lo quiero ...
  #1 (permalink)  
Antiguo 09/02/2009, 11:05
Avatar de AnsuR  
Fecha de Ingreso: enero-2005
Mensajes: 128
Antigüedad: 12 años, 10 meses
Puntos: 1
Como hago para poner una imagen tipo "sticker"

Hola gente que tal, queria saber como se puede poner los famosos "stickers" q se ven en muchas webs.

Asi como este:



Osea, lo quiero poner en cualquier parte de la pantalla, queria saber como lograrlo.
__________________
La imaginacion es mas importante que el conocimiento
  #2 (permalink)  
Antiguo 09/02/2009, 11:29
Avatar de javiro  
Fecha de Ingreso: febrero-2006
Mensajes: 48
Antigüedad: 11 años, 9 meses
Puntos: 1
Respuesta: Como hago para poner una imagen tipo "sticker"

Para hacer eso tienes que crear un div vacio entre las etiquetas de body:

Código:
<div class="sticker">&nbsp;</div>
Y en la hoja de estilos definir la clase sticker, donde defines la imagen que quieres en el background (te recomiendo que sea un png por si quieres transparencias), defines el ancho y alto de la imagen con width y height, la propiedad posicition absolute para que el elemento flote y le das las coordenadas que quiereas con top y left, aunque podrias utilizar tambien right o bottom:

Código:
.sticker{
	background:url(stick.png);
	width:60px;
	height:60px;
	position:absolute;
	top:100px;
	left:300px;
}
Salud!
  #3 (permalink)  
Antiguo 09/02/2009, 13:23
Avatar de AnsuR  
Fecha de Ingreso: enero-2005
Mensajes: 128
Antigüedad: 12 años, 10 meses
Puntos: 1
Respuesta: Como hago para poner una imagen tipo "sticker"

Claro ya intente eso, pero esto al cambiar de resolución de pantalla queda en el mismo lugar y se ve mal.
No se ve lo mismo en resolución 1024x768 que en 1280x1024.
Osea, al aplicarle una posición absoluta, el objeto queda ahí clavado.

No hay otra manera?
__________________
La imaginacion es mas importante que el conocimiento
  #4 (permalink)  
Antiguo 09/02/2009, 13:36
Avatar de AnsuR  
Fecha de Ingreso: enero-2005
Mensajes: 128
Antigüedad: 12 años, 10 meses
Puntos: 1
Respuesta: Como hago para poner una imagen tipo "sticker"

Mira para que veas.
www.riestrarentacar.com

la imagen es el logo iso.
proba en otra resolucion y fijate como queda.
__________________
La imaginacion es mas importante que el conocimiento
  #5 (permalink)  
Antiguo 09/02/2009, 13:50
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
Respuesta: Como hago para poner una imagen tipo "sticker"

Añado un par de puntos a lo explicado por Javiro.

Primero: no hay obligacion de que sea un div vacio. De hecho si el sticker va a ser un enlace a otra pagina, lo correcto seria que uses un anchor text (Ej.: <a href="doc.htm">ver todos</a>). Para quitarle el texto y que solo quede la imagen deberias añadir los estilos display:block; y text-indent:-9999px;.

Segundo: Normalmente con la clase que te paso javiro, el sticker se posicionaria en relacion al cuerpo del html, pero si, por ejemplo, queres que se posicione en relacion al listado de tiendas, deberias ponerle el estilo position:relative; al contenedor del listado de tiendas.
Ejemplo

<div id="listado" style="position:relative;">
... CONTENIDO DEL LISTADO DE TIENDAS ...
<a href="#" class="sticker">Ver todo</a>
</div>
__________________
oohh... quisiera ser godines!!!
  #6 (permalink)  
Antiguo 09/02/2009, 13:57
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
Respuesta: Como hago para poner una imagen tipo "sticker"

Exactemte lo que te comentaba:
Deberias agregar el estilo position:relative; a #elegirnos y cambiar los estilos de #iso por estos:

#iso
background:transparent url(imagenes/logoiso.jpg) no-repeat 0 0;
height:100px;
position:absolute;
right:0;
top:0;
width:61px;
}
__________________
oohh... quisiera ser godines!!!
  #7 (permalink)  
Antiguo 09/02/2009, 14:06
Avatar de AnsuR  
Fecha de Ingreso: enero-2005
Mensajes: 128
Antigüedad: 12 años, 10 meses
Puntos: 1
Respuesta: Como hago para poner una imagen tipo "sticker"

Que capooo, gracias safe, te pasaste. Hoy aprendí algo nuevo :)
Muchas gracias de verdad. Ahi quedo como yo queria :)
__________________
La imaginacion es mas importante que el conocimiento
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 19:23.