E encontrado y modificado a mi gusto una pequeña galería css, el problema lo tengo en que la web donde tiene que ir tiene que estar centrada, para eso pongo todo dentro de esta capa: (el marin:auto la centra)
Código:
#container {
width: 980px;
margin: auto;
height: 670px;
}
el problema es con el posicionamiento horizontal que al estar centrada no se como indicarlo para que siempre me salga en el mismo sitio ya que la imagen que aparece engrande esta con posicionamiento absolute.
Adjunto link a la galería demo y el código que e modificado yo:
http://www.grafikas.es/web_apuntes/g...eria_texto.htm
mi codigo:
css:
Código:
#menuhoriz ul li {
display: inline;
}
ul {padding:10px;margin:0px;width:400px;}
li {list-style-type:none;width:392px;padding:5px 5px;}
a img.min {border:1px solid #fff;}
a span {
visibility:hidden;
color:white;
text-align:center;
font:bold 14px "Trebuchet MS",arial;
position:absolute;
top:0px;
left:0px;
visibility:hidden;
z-index:10;
}
a:hover img.min {z-index:100;border:1px solid red;}
a:hover {display:inline;z-index:100;} /* Hace que funcione en IE6*/
a:hover span {visibility:visible;background:#000000;z-index:100;}
a:hover span img {visibility:visible;z-index:100;}
a:focus span , a:active span {visibility:visible;z-index:10;background:#000000;}
a img.fotos {}
En el BODY:
Código:
<div id="menuhoriz">
<ul>
<li><a class="f1" href="#"><img src="fotos/arbeyal.jpg" alt="El Arbeyal" width="50" height="39" class="min" /><span><img class="fotos" src="fotos/arbeyal.jpg" border="0"/></span></a></li>
<li><a href="#"><img src="fotos/estano.jpg" alt="El Arbeyal" width="50" height="39" class="min" /><span><img class="fotos" src="fotos/estano.jpg" alt="El Arbeyal" border="0"/></span></a></li>
<li><a href="#"><img src="fotos/sanlorenzo.jpg" alt="El Arbeyal" width="50" height="39" class="min" /><span><img class="fotos" src="fotos/sanlorenzo.jpg" alt="El Arbeyal" border="0"/></span></a></li>
<li><a href="#"><img src="fotos/prubia.jpg" alt="El Arbeyal" width="50" height="39" class="min" /><span><img class="fotos" src="fotos/prubia.jpg" alt="El Arbeyal" border="0"/></span></a></li>
</ul>
</div>
Recapitulando el problema lo tengo en el a span que no se como ponerle el posicionamiento.
Gracias por la ayuda