Ver Mensaje Individual
  #1 (permalink)  
Antiguo 29/03/2009, 23:03
Avatar de pao01
pao01
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 1.875
Antigüedad: 9 años, 7 meses
Puntos: 351
Problema con galería de imágenes

Por estos lares otra vez....:
El tema es el siguiente:


Como puede observarse en el adjunto, hay una imágen que me queda desajustada.
Luego de ya tres días de venir peleando con el código me doy por vencida a ver si alguien me puede dar una manito y orientarme

Html:
Código HTML:
<!--cuerpo-->
	<div id="cuerpo">
	<div id="caja0">
		<div id="caja1"></div>
		<div id="caja2">
			<ul id="gallery">
			<li><a href="Ver foto1 "><img class="min" src="images/uno.jpg" alt="Tributo" />
            <img class="gran" src="images/unog.jpg" alt="Tributo" /></a></li>
	        <li><a href="Ver foto2 "><img class="min" src="images/dos.jpg" alt="Monaco" />
            <img class="gran" src="images/dosg.jpg" alt="Monaco" /></a></li>
			<li><a href="Ver foto3 "><img class="min" src="images/tres.jpg" alt="Erase" />
            <img class="gran" src="images/tresg.jpg" alt="Erase" /></a></li>
	        <li><a href="Ver foto4 "><img class="min" src="images/cuatro.jpg" alt="Kubica" />
            <img class="gran" src="images/cuatrog.jpg" alt="Kubica" /></a></li>	 
	        <li><a href="Ver foto5 "><img class="min" src="images/cinco.jpg" alt="Hamilton" />
            <img class="gran" src="images/cincog.jpg" alt="Hamilton" /></a></li>
			<li><a href="Ver foto6 "><img class="min" src="images/seis.jpg" alt="lamp" />
            <img class="gran" src="images/seisg.jpg" alt="lamp" /></a></li>
	        <li><a href="Ver foto7 "><img class="min" src="images/uno.jpg" alt="Tributo" />
            <img class="gran" src="images/unog.jpg" alt="Tributo" /></a></li>
	        <li><a href="Ver foto8 "><img class="min" src="images/dos.jpg" alt="Monaco" />
            <img class="gran" src="images/dosg.jpg" alt="Monaco" /></a></li>
		    </ul>
            </div></div></div>
			
    <div class="imagen"><img src="images/estacion.jpg" alt="Lámpara tridimensional" /></div>
	<div class="gran"></div>   
    
	<div class="corte"></div> 
css:
Código:
#gallery ul { 
     width: 500px;
     height: 180px;	 
	 float: left;
	 list-style-type:none; /*Quitamos viñeta*/
     margin:0px; /*Elimina sangría en IE6*/
     padding: 0;    /*Elimina sangría */
	 position: relative;
	 }
img.gran {
             width: 224px;
             height: 178px;
             visibility:hidden; /*Ocultamos la foto*/
			 position:absolute;
             top: 0px;
             float: left; /*Algo mayor que el acho de la foto pequeña*/
			 top:136%;
			 left:24.3%;
			 margin-top:-212px;
			 margin-left:-380px;
			 border: solid 1px #aaaa81;
			 }
            a:hover {display:inline;} /* Para IE6 */
            a:hover img.gran {visibility:visible; z-index:4;}
			 
.corte {clear: both;}
Si bien es cierto que esas imágenes se ven más pequeñitas, he hecho la prueba con imágenes iguales y ocurre lo mismo.
__________________
Entre más estrecha la mente, más grande la boca.- Ted Cook
Autosconarte-Blog