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.
