Alinear galeria CSS

[eres]

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

[C2am]

A ver si entendí:
Al poner el div #container, el cual centra la web, la galería no queda centrada?
Explicate mejor, porque con el link que pones no encuentro ningún problema, y ningún div container.

Saludos

[eres]

El problema biene en esta capa:

Código:

		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;
}

que al tener el posicionamiento absolute y estar dentor de #container el posicionamio horizontal de la capa, que lo marca left:0px; es a 0 del navegador i no a 0 de la #container.

O para preguntarlo de otra forma como puedo hacer que el posicionamiento de eesta capa se base en la capa #container y no en toda la ventana del navegador.

Gracias por la ayuda.

[C2am]

Bien, para que se posicione absolutamente con respecto al div padre, el div padre o contenedor debe tener definida la propiedad position, (position:relative por ejemplo).

En tu caso no es en container sino en ul que es el que contiene el span con posicionamiento absoluto.
Haz las pruebas con uno y otro y verás las diferencias.

Código CSS:

ul {padding:10px;margin:auto;width:400px;background:#ffcc00; position:relative}
 

Aquí más info sobre el tema:
http://www.librosweb.es/css/capitulo...onamiento.html
http://www.librosweb.es/css/capitulo..._absoluto.html
Saludos