Hola, hice una web dónde hay una gaelería de imágenes.
Con una resolución de 1024 x 768 se ve ok, pero si la resolución es otra la imagen grande se encima con las imágenes en miniatura que están a la izquierda.
Quisiera encontrar una forma de centrar la imagen grande dentro de la pantalla.
Código HTML
Código HTML:
<div id="galeria">
<div id="galeriai">
<ul>
<li><a href="#"><img class="min" src="./galeria/miniatura/min1.jpg" alt="" /><span><img class="fotos" src="./galeria/foto1.jpg" alt="" /><br /></span></a></li>
<li><a href="#"><img class="min" src="./galeria/miniatura/min2.jpg" alt="" /><span><img class="fotos" src="./galeria/foto2.jpg" alt="" /><br /></span></a></li>
<li><a href="#"><img class="min" src="./galeria/miniatura/min3.jpg" alt="" /><span><img class="fotos" src="./galeria/foto3.jpg" alt="" /><br /></span></a></li>
<li><a href="#"><img class="min" src="./galeria/miniatura/min4.jpg" alt="" /><span><img class="fotos" src="./galeria/foto4.jpg" alt="" /><br /></span></a></li>
<li><a href="#"><img class="min" src="./galeria/miniatura/min5.jpg" alt="" /><span><img class="fotos" src="./galeria/foto5.jpg" alt="" /><br /></span></a></li>
<li><a href="#"><img class="min" src="./galeria/miniatura/min6.jpg" alt="" /><span><img class="fotos" src="./galeria/foto6.jpg" alt="" /><br /></span></a></li>
</ul>
</div>
<div id="galeriad">
<ul>
<li><a href="#"><img class="min" src="./galeria/miniatura/min7.jpg" alt="" /><span><img class="fotos" src="./galeria/foto7.jpg" alt="" /><br /></span></a></li>
<li><a href="#"><img class="min" src="./galeria/miniatura/min8.jpg" alt="" /><span><img class="fotos" src="./galeria/foto8.jpg" alt="" /><br /></span></a></li>
<li><a href="#"><img class="min" src="./galeria/miniatura/min9.jpg" alt="" /><span><img class="fotos" src="./galeria/foto9.jpg" alt="" /><br /></span></a></li>
<li><a href="#"><img class="min" src="./galeria/miniatura/min10.jpg" alt="" /><span><img class="fotos" src="./galeria/foto10.jpg" alt="" /><br /></span></a></li>
<li><a href="#"><img class="min" src="./galeria/miniatura/min11.jpg" alt="" /><span><img class="fotos" src="./galeria/foto11.jpg" alt="" /><br /></span></a></li>
<li><a href="#"><img class="min" src="./galeria/miniatura/min12.jpg" alt="" /><span><img class="fotos" src="./galeria/foto12.jpg" alt="" /><br /></span></a></li>
</ul>
</div>
</div>
Código CSS:
Código:
#galeria {
background-color:#F8FAE4;
width: 820px;
height: 554px;
}
#galeriai {
background-color:#F8FAE4;
float: left;
width: 120px;
height: auto;
margin-top: 2px;
margin-left: 2px;
display:inline;
}
#galeriad {
background-color:#F8FAE4;
float: right;
width: 120px;
height: auto;
margin-top: 2px;
}
#galeriai ul {padding:0px;margin:0px;width:119px;background:#F8FAE4 ;float:left;margin-left:0px;}
#galeriai li {list-style-type:none;padding:10px 8px 5px;background:#D8DAC4 ;float:left;line-height:11px;}
#galeriad ul {padding:0px;margin:0px;width:119px;background:#F8FAE4 ;float:left;margin-left:0px;}
#galeriad li {list-style-type:none;padding:10px 8px 5px;background:#D8DAC4 ;float:left;line-height:11px;}
a img.min {border:1px solid #D8DAC4;}
a span {
visibility:hidden;
text-align:center;
font:bold 14px "Trebuchet MS",arial;
position:absolute;
top:295px;
left:240px; /* AQUI ES DONDE TENGO EL PROBLEMA*/
border:0px solid #fff;
z-index:10;
}
a:hover img.min {z-index:100;border:1px solid #D8DAC4;}
a:hover {display:inline;z-index:100;} /* Hace que funcione en IE6*/
a:hover span {visibility:visible;border:0px solid #837C63;background:#F8FAE4;z-index:100;}
a:hover span img {visibility:visible;z-index:100;}
a:focus span , a:active span {visibility:visible;z-index:10;background:#F8FAE4;}
a img.fotos {border:0px solid #CA9655;margin:px;}
Gracias desde ya por las respuestas.
Saludos