Foros del Web » Creando para Internet » CSS »

Colocar imagen en puntas

Estas en el tema de Colocar imagen en puntas en el foro de CSS en Foros del Web. Hola a todos!, tengo un pequeño problema y creo que con algún truco CSS podría solucionarlo. Les muestro en imagen lo que quiero hacer: En ...
  #1 (permalink)  
Antiguo 24/11/2009, 13:28
 
Fecha de Ingreso: febrero-2009
Mensajes: 202
Antigüedad: 8 años, 10 meses
Puntos: 3
Colocar imagen en puntas

Hola a todos!,
tengo un pequeño problema y creo que con algún truco CSS podría solucionarlo.
Les muestro en imagen lo que quiero hacer:



En las esquinas marcadas en rojo quiero poner una imagen bastante grande por oo que no me sirve editar la imagen de fondo, necesitaría una imagen flotante, pero que me muestre la imagen igual en todos los navegadores y resoluciones o al menos en IE y Firefox...

Les agradecería algo de ayuda :)
  #2 (permalink)  
Antiguo 24/11/2009, 20:52
Avatar de CCB
CCB
 
Fecha de Ingreso: noviembre-2009
Ubicación: Perú
Mensajes: 65
Antigüedad: 8 años, 1 mes
Puntos: 3
Respuesta: Colocar imagen en puntas

No se si te entendi.... a ver dices que quieres poner una imagen entre las esquinas en rojo. Podria crear un div darle un id especial para esa capa.
Esto codigo si quieres que sea estatica:

Código HTML:
.capa_con_imagen {width:900px; height:200px;  margin:5px auto 5px auto; }
Esto es si quieres que flote:

Código HTML:
.capa_con_imagen {width: 900px; height:200px; position:fixed; 
	float:inherit; top:50%; }
Solo tienes que modificar el top, bottom, left, right y ponerle el valor que quieras.

Y esto en el <html><body>

Código HTML:
<div id="capa_con_imagen">
		TU imagen aqui
	</div> 
  #3 (permalink)  
Antiguo 27/11/2009, 10:53
 
Fecha de Ingreso: febrero-2009
Mensajes: 202
Antigüedad: 8 años, 10 meses
Puntos: 3
Respuesta: Colocar imagen en puntas

Gracias [email protected]! El tema es que el div va dentro de una tabla, entonces se me repite el fondo de esa tabla hasta que entre la imagen, te muestro:



La posición está bien pero no quiero que se repita. Sería como una imagen flotante del body pero que no varíe tanto como con el absolute que me vuelve loco con los navegadores y resoluciones...
  #4 (permalink)  
Antiguo 27/11/2009, 14:41
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Colocar imagen en puntas

Hola:

Sería conveniente que pusieras la URL o tu código para poder ayudarte mejor.

Saludos.

  #5 (permalink)  
Antiguo 27/11/2009, 20:10
Avatar de SPAWN3000  
Fecha de Ingreso: marzo-2008
Ubicación: Bogota
Mensajes: 858
Antigüedad: 9 años, 9 meses
Puntos: 15
Respuesta: Colocar imagen en puntas

1. Utiliza una sóla imagen. Si cambian las puntas utiliza sprites.
2. define el tamaño de las puntas en CSS.

Crea un DIV contenedor el cual muetra una parte de la imagen con la punta superior izquierda.
EJ.

<div class="contenedor">
</div>

Dentro de este div crea tres mas, todos con background una porcion de la imagen.
Luego con las propiedades top y left defines la posicion de la porcion de cada imagen(naturalmente algunos iran negativos).

<div class="contenedor">
<div class="arriba_derecha">
<div class="abajo_izquierda">
<div class="abajo_derecha">
</div>

Mas menos asi, no tengo un ejemplo a la mano para dar mayor claridad vere si el día de mañana con algo de tiempo(Pero puedes ir intentandolo). Recuerda que el contenedor ya tiene una de las esquinas o podría tener dos.

Un saludo,
  #6 (permalink)  
Antiguo 28/11/2009, 06:01
 
Fecha de Ingreso: febrero-2009
Mensajes: 202
Antigüedad: 8 años, 10 meses
Puntos: 3
Respuesta: Colocar imagen en puntas

Hola!,
ya lo he solucionado :)
Les dejo el código que usé por si a alguien más le sirve:

Cita:
<div style="position:relative; width: 978px;><div id="ejemplo"><img src="URL IMG ESQUINA" width="64" height="64"><div id="ejemplo2"><img src="URL IMAGEN ESQUINA" width="64" height="64"></div></div>
Cita:
DIV#ejemplo {
position: absolute;
top: -3px;
left: -3px;
}
DIV#ejemplo2 {
position: absolute;
top: -3px;
left: 630px;}
Gracias!
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 07:53.