Ver Mensaje Individual
  #21 (permalink)  
Antiguo 16/04/2009, 08:21
Avatar de hoberwilly
hoberwilly
 
Fecha de Ingreso: julio-2008
Ubicación: Lima - Perú
Mensajes: 769
Antigüedad: 15 años, 9 meses
Puntos: 2
Respuesta: Centrado Vertical...efecto lightbox

Hola amigo,
Este el codigo lb.css:
Código php:
Ver original
  1. #lightbox{ 
  2.     position: absolute;
  3.     left: 0;
  4.     width: 100%;
  5.     z-index: 100;
  6.     text-align: center;
  7.     line-height: 0;
  8. }
  9. #lightbox img{
  10.     width: auto;
  11.     height: auto;
  12. }
  13. #lightbox a img{
  14.     border: none;
  15. }
  16.  
  17. #outerImageContainer{
  18.     position: relative;
  19.     background-color: #fff;
  20.     width: 250px;
  21.     height: 250px;
  22.     margin: 0 auto;
  23. }
  24. #imageContainer{
  25.     padding: 10px;
  26. } /*margen de la imagen*/
  27.  
  28. #loading{
  29.     position: absolute;
  30.     top: 40%;
  31.     left: 0%;
  32.     height: 25%;
  33.     width: 100%;
  34.     text-align: center;
  35.     line-height: 0;
  36. }
  37. #hoverNav{
  38.     position: absolute;
  39.     top: 0;
  40.     left: 0;
  41.     height: 100%;
  42.     width: 100%;
  43.     z-index: 10;
  44. }
  45. #imageContainer>#hoverNav{
  46.     left: 0;
  47. }
  48. #hoverNav a{
  49.     outline: none;
  50. }
  51.  
  52. #prevLink, #nextLink{
  53.     width: 49%;
  54.     height: 100%;
  55.     background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */
  56.     display: block;
  57. }
  58. #prevLink {
  59.     left: 0;
  60.     float: left;
  61. }
  62. #nextLink {
  63.     right: 0;
  64.     float: right;
  65. }
  66. #prevLink:hover, #prevLink:visited:hover {
  67.     background: url(../images/prevlabel.gif) left 15% no-repeat;
  68. }
  69. #nextLink:hover, #nextLink:visited:hover {
  70.     background: url(../images/nextlabel.gif) right 15% no-repeat;
  71. }
  72.  
  73. #imageDataContainer{
  74.     font: 10px Verdana, Helvetica, sans-serif;
  75.     background-color: #fff;
  76.     margin: 0 auto;
  77.     line-height: 1.4em;
  78.     overflow: auto;
  79.     width: 100% ;
  80. }
  81.  
  82. #imageData{
  83.     padding:0 10px;
  84.     color: #666;
  85. }
  86. #imageData #imageDetails{
  87.     width: 70%;
  88.     float: left;
  89.     text-align: left;
  90. }  
  91. #imageData #caption{
  92.     font-weight: bold; 
  93. }
  94. #imageData #numberDisplay{
  95.     display: block;
  96.     clear: left;
  97.     padding-bottom: 1.0em; 
  98. }          
  99. #imageData #bottomNavClose{
  100.     width: 66px;
  101.     float: right;  
  102.     padding-bottom: 0.7em;
  103.     outline: none;
  104. }      
  105.  
  106. #overlay{
  107.     position: absolute;
  108.     top: 0;
  109.     left: 0;
  110.     z-index: 90;
  111.     width: 100%;
  112.     height: 500px;
  113.     background-color: #000;
  114. }
Y segun lo sugerido elimine las lineas del 9 al 12:
Código php:
Ver original
  1. #lightbox img{
  2.     width: auto;
  3.     height: auto;
  4. }
Pareciera como que toda la imagen no encajara en el cuadro lb¿¿¿???

Saludos,