Foros del Web » Creando para Internet » CSS »

Centrar varias imagenes en un DIV

Estas en el tema de Centrar varias imagenes en un DIV en el foro de CSS en Foros del Web. La cosa va asi, tengo un div llamado encabezado, dentro de este div , hay otros 7 mas en los que tengo solamente imagenes, quiero ...
  #1 (permalink)  
Antiguo 06/03/2008, 01:31
Avatar de kazztor  
Fecha de Ingreso: enero-2008
Mensajes: 3
Antigüedad: 9 años, 11 meses
Puntos: 0
Centrar varias imagenes en un DIV

La cosa va asi,

tengo un div llamado encabezado, dentro de este div , hay otros 7 mas en los que tengo solamente imagenes, quiero que las imagenes den la ilusion de ser una sola, mas o menos asi:

img1img2img3img4
img5img6img7img8

lo he consegido con el siguiente codigo:

HTML

Código:
<div id="encabezado">
        
	<div id="img1">  </div>  <div id="img3"></div> 	<div id="img4"> </div><div id="img7"></div> <div id="img5"></div> 
		<div id="img2"></div> <div id="img6"></div>  <div id="img8"></div>
 
CSS

Código:
#envoltorio { margin:0 auto 0 auto; width:989px; }


#encabezado {
    margin: 0px 0px 0px 0px;
	width:989px;
    height:158px;
	}
	
	#img1 {
    position:absolute;  height:16px;width:844px;overflow:hidden;top:0px;left:137px;
	background:url(imagenes/encabezado_01.png);
	}	

	#img2{position:absolute;height:69px;width:145px;overflow:hidden;top:0px;left:981px;
	background:url(imagenes/encabezado_02.png);}
	
	#img3 {position:absolute;  height:142px;width:232px;overflow:hidden;top:16px;left:137px;
	background:url(imagenes/encabezado_03.png) ;
	}
	
	#img4{position:absolute;height:53px;width:550px;overflow:hidden;top:16px;left:369px;
	background:url(imagenes/encabezado_04.png);}
	
	#img5{position:absolute;height:142px;width:62px;overflow:hidden;top:16px;left:919px;
	background:url(imagenes/encabezado_05.png);
	}
	
    #img6{position:absolute;height:89px;width:550px;overflow:hidden;top:69px;left:369px;
	background:url(imagenes/encabezado_06.png);}
	
	#img7{position:absolute;height:89px;width:145px;overflow:hidden;top:69px;left:981px;
	background:url(imagenes/encabezado_07.png);}
	
    #img8{position:absolute;height:47px;width:142px;overflow:hidden;top:108px;left:983px;
	background:url(imagenes/encabezado_08.png);} 
el problema es que al redimesionar la ventana, las imagenes quedan en el lado derecho de la pagina, en la posicion en la que estan cuando la ventan a esta maximizada, intente varias combinasciones de la propiedad POSITION, pero al cambiar el codigo las imagenes quedan asi:

img1
img2
img3
img4
img5
img6
img7
img8

ya no se quedan juantas dando la ilusion de ser una sola imagen,

alguien tiene alguna idea de por que y como lo puedo solucionar, o tal vez otra manera de hacerlo?

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 08:55.