Código:
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.#container { width: 980px; margin: auto; height: 670px; }
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:
En el BODY:#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 {}
Código:
Recapitulando el problema lo tengo en el a span que no se como ponerle el posicionamiento.<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>
Gracias por la ayuda