Mi duda es la siguiente: he colocado el efecto "lightbox" para que al hacer click a las imagenes, me salgan con este efecto; pero tengo un problema.
En esta pagina mia: [URL="http://www.eluniversodelperro.com/ayuda_urgente-1.php"]http://www.eluniversodelperro.com/ayuda_urgente-1.php[/URL] me lo ha hecho perfectamente; pero en esta otra: [URL="http://www.eluniversodelperro.com/busqueda.php"]http://www.eluniversodelperro.com/busqueda.php[/URL] despues de realizar una busqueda de "Todos", al hacer click sobre una imagen, me la abre con el efecto, pero mucho mas abajo de lo normal.
Tambien me gustaria que me dijerais como puedo desactivar los desplegables de "Inicio", "Adopciones", etc ya que cuando se activva el efecto, aparecen activos.
Estos son los archivos que tengo:
lightbox.css
Creo que la cuestion esta en la posicion de #lightbox, pero he probado a cambiar la altura, posicion, etc, pero no consigo nada
Código:
#lightbox{ position: absolute; left: 0; width: 100%; height: 400px; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
Muchas gracias