Problema background imagen

[samy4ever]

Hola,

Vereis, estoy intentando poner una imagen de background para hacer un poco de sombra. Vamos, lo más normal del mundo. El tema es qué són dos imágenes, una al lado de otra, y después de darle vueltas y vueltas, no me sale: cada imagen, que carga lo mismo, sale diferente en la página =S

Yo lo que quiero es que las dos esten centradas (que tampoco sé porqué ahora no lo hace) y con la imagen de fondo que se vea por la derecha y por abajo, creando un poco de "sombra".



He pillado un código por allí pero no sé porqué, si aplico el mismo estilo en los dos casos, se me ve diferente xD Me podeis orientar?

Código:

<br>
<div>
<div id="sombra"><img src = "iso.jpg" /></div>
<div id="sombra2"><img src = "isoe.jpg" /></div>
<a href="Certificats_2009_ISO_9001.pdf"> Ver documento </a>

Código:

#sombra, #sombra2 {
padding:0 5px 5px 0; /*Esta es la profundidad de nuestra sombra, sí haces más grandes estos valores, el efecto de sombra es mayor también */
background: url(http://tecnotor.com/sombra.jpg) no-repeat bottom; /*Aquí es donde ponemos la imagen como fondo colocando su ubicación*/
} 

#sombra{
	float: left;
} 

#sombra img, #sombra2 img {
display:block;
position:relative;
top: -3px; /* Desfasamos la imagen hacia arriba */
left:-3px; /*Desfasamos la imagen hacia la izquierda */
padding:5px;
background:#FFFFFF; /*Definimos un color de fondo */
border:1px solid;
border-color: #CCCCCC #666666 #666666 #CCCCCC /*Creamos un marco para acentuar el efecto */
}

Referencia: http://tecnotor.com, apartado "calidad".

Muchísimas gracias.

PS: Y alguna idea para que quede un poco elegante? Mi mente es nula en este sentido O_o

[Daniel Ulczyk]

En tu código, debiera aparecer esto:

Código css:

#sombra, #sombra2 {
    float: left;
}
 

Espero con ello, lo soluciones.

[samnadine]

te ahorrarías un montón de trabajo si lo hicieras directamente con las imágenes, editándolas con el photoshop.

[Daniel Ulczyk]

Iniciado por samnadine

te ahorrarías un montón de trabajo si lo hicieras directamente con las imágenes, editándolas con el photoshop.

Es posible. Pero, tal vez no quiera tener indexado en Google, una imagen (del certificado) con sombra.

[jomaruro]

Hola:

Pásate por esta página a ver si te sirve para solucionar tu problema.

Saludos.

[samy4ever]

Hola chicos!

Si, no quiero hacerlo en photoshop por lo que comentan. He estado probando y no lo logro. El problema principal ahora es que las imágenes no se ponen dentro de la caja donde tienen que ir, sinó que se ponen por encima, quedando horrible. En la imágen que hay colgada, las imágenes estan dentro. No se que toqué, y ahora soy incapaz de volver a meterlo dentro :S Si tengo un DIV, y dentro mi imagen y demás, con position: relative, porqué no me deja la imagen dentro del div? Y luego aún me faltará poner la sombra bien, pero con la página que me disteis a ver si lo soluciono... Por ahora quiero que almenos esté dentro de la caja =S!!

Muchas gracias!