Visualizzazione dei risultati da 1 a 2 su 2
  1. #1
    Utente di HTML.it
    Registrato dal
    Apr 2004
    Messaggi
    156

    Posizionamento immagine in lightbox2.03.2

    ciao ragazzi, so di chiedervi una cosa semplice ma non so dove mettere le mani:


    ho realizzato una gallery con il lightbox, solo che l'immagine che si apre ha un margine troppo ampio in alto (va troppo in mezzo alla pagina costringendo l'utente ad andare con la barra di scorrimento per chiuderla).

    vi copio il css associato sperando possiate aiutarmi a capire cosa modificare per ridurre quello spazio


    codice:
    #lightbox{
    	position: absolute;
    	left: 0;
    	width: 100%;
    	z-index: 100;
    	text-align: center;
    	line-height: 0;
    	}
    
    #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: transparent url(../images/blank.gif) no-repeat; /* 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;	}	
    		
    #overlay{
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: 90;
    	width: 100%;
    	height: 500px;
    	background-color: #11082E;
    	}
    Grazie

  2. #2
    è difficile rispondere, dovresti allegare almeno un'immagine del problema... meglio ancora l'url del sito se è pubblicato. Ad ogni modo così a occhio prova a ridurre i valori che ora sono a 250 oppure qualche padding...

    #outerImageContainer{
    position: relative;
    background-color: #fff;
    width: 250px;
    height: 250px;
    margin: 0 auto;
    }
    This is not mission difficult, Mr. Hunt... It's mission impossible.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2026 vBulletin Solutions, Inc. All rights reserved.