Saltito

[hachimipark]

Hola!

mmm espero esta vez si me ayuden :(

Tengo esta pequeña galeria:

Código:

#gallery {
	width:700px;
	height:410px;
	margin:0 auto;
	position:absolute;
	font-family:verdana, arial, sans-serif;

}

#gallery #slides {position:relative; height:120px; width:690px; overflow:hidden; text-align:center; z-index:500;}
#gallery #slides div {width:690px; height:130px; position:relative; padding-top:5px;}
#gallery #slides div ul {padding:0; margin:0 auto; list-style:none; width:684px;}
#gallery #slides div ul li {float:left; padding:10px 0 5px 5px;}
#gallery #slides div ul li a {display:block;  float:left;}
#gallery #slides div ul li a b {display:none;}
#gallery #slides div ul li a.previous {background:url(double-click/previous.png) no-repeat center center;}
#gallery #slides div ul li a.next {background:url(double-click/next.png) no-repeat center center;}
#gallery #slides div ul li a.inactive {display:none;}


#gallery #slides div ul li a img {display:block; border:0;}
#gallery #slides div ul li a:focus {outline:0;}


#gallery #fullsize {height:410px; width:690px; overflow:hidden; text-align:center; z-index:200;}

#gallery #fullsize div {width:690px; height:410px; padding-top:10px; float:left;;}
#gallery #fullsize div img {clear:both; display:block; margin:0 auto auto auto; border:10px solid #fff;}
#gallery #fullsize div h3 {margin:0; font-size:15px;}
#gallery #fullsize div p {padding:5px 0; margin:0; font-size:12px; line-height:9px;color:#000;}
#gallery #fullsize div ul li a.inactive {display:none;}

y html

Código HTML:

<div id="gallery">
	<div id="slides">
		<div id="slide1">
			<ul>
				<li><a href="#" class="previous"><b>Previous</b></a></li>
				<li><a href="#052A1"><img src="acrilico/mini/acrilicopodiumb0010_1.jpg" alt="Podium de Acrilico" /></a></li>
				<li><a href="#052A2"><img src="acrilico/mini/acrilicopodiumb0010_2.jpg" alt="Podiums de Acrilico" /></a></li>
							   <li><a href="#" class="next"><b>Next</b></a></li>
			</ul>
		</div>
  </div><!--end slides -->

	<div id="fullsize">
		
		<div id="052A1">
			<img src="acrilico/acrilicopodiumb0010_1.jpg" alt="Podium de Acrilico" />
			<h3>Modelo 052A</h3>
			<p>Podium Fabricado en Acrilico</p>
		</div>
		
		<div id="052A2">
			<img src="acrilico/acrilicopodiumb0010_2.jpg" alt="Podium de Acrilico" />
			<h3>Modelo 052A</h3>
			<p>Podium Fabricado en Acrilico</p>
		</div>
		
		</div><!--end full size -->
</div><!--end gallery -->
</div> 

pero al dar click en los thumbnails hace eso d saltar al tope d la pagina...
alguna idea de como quitarselo?! ._. ya me jale los pelos intentandolo =P

Saludos.!

[kseso?]

Ese es el funcionamiento normal al usar id´s como destino de un enlace. Que queda situado en la parte superior de la ventana.

Ese comportamiento también es el típico al utilizar el pseudoelemento ::targer para lograr persistencia vía css en las propiedades para el elemento seleccionado.

Debido tanto al comportamiento como al hecho de que ese pseudoelemento apenas ha sido soportado por según qué navegadores y versiones, hasta no hace mucho las galerías de imágenes con sus miniaturas eran realizadas con algún otro lenguaje (principalmente javascript).

Pero en un espacio de tiempo relativamente pequeño, ya han sido publicadas realizaciones basadas en puro css que evitan ese desplazamiento de los contenidos (Stu Nicholls y Chris Coyier entre otros)
Claro está, que nadie le recomendaría que las utilice en según a qué público dirija su realización.

Pero si quiere ver en funcionamiento e investigar el cómo lo consiguen sus autores, pase por cssplay.co.uk o css-tricks.com

[hachimipark]

mmm si entiendo y preferiria mil veces hacerla en javascript, pero.

la cosa es asi :
1 modelo d producto tiene varias fotografias. por lo tanto me veo en la necesidad d usar una galeria en css con ids ya que al poner js dentro d los ids, no funcionan =/ ya que tengo un js para viajar entre secciones del html (con inactive elementos y asi)