Ver Mensaje Individual
  #1 (permalink)  
Antiguo 06/03/2008, 01:31
Avatar de kazztor
kazztor
 
Fecha de Ingreso: enero-2008
Mensajes: 3
Antigüedad: 16 años, 3 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