Foros del Web » Creando para Internet » CSS »

Centrar imagenes lightbox en el centro de la pantalla

Estas en el tema de Centrar imagenes lightbox en el centro de la pantalla en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 16/06/2010, 04:44
Avatar de victor5atodogas  
Fecha de Ingreso: junio-2010
Mensajes: 447
Antigüedad: 14 años, 5 meses
Puntos: 2
Centrar imagenes lightbox en el centro de la pantalla

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
  #2 (permalink)  
Antiguo 17/06/2010, 01:58
Avatar de victor5atodogas  
Fecha de Ingreso: junio-2010
Mensajes: 447
Antigüedad: 14 años, 5 meses
Puntos: 2
Respuesta: Centrar imagenes lightbox en el centro de la pantalla

Por favor, si alguien me ayudara, lo agradeceria mucho!!
  #3 (permalink)  
Antiguo 18/06/2010, 14:33
 
Fecha de Ingreso: junio-2010
Mensajes: 3
Antigüedad: 14 años, 5 meses
Puntos: 0
Respuesta: Centrar imagenes lightbox en el centro de la pantalla

En Firefox, Chrome y Safari (los tres en Mac) me cargan bien los lightbox de las dos páginas.
Tampoco me pasa eso que dices, que se despliegan los menús al activar el lightbox.
A lo mejor es tu navegador el que lo carga mal...

Etiquetas: centro, imagenes, lightbox, pantalla
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:03.