Allineamento immagini effetto lightbox

[ikar]

Allineamento immagini effetto lightbox

ciao a tutti... mi sto tuffando nel mondo dei css ma sono ancora troppo inesperto.vorrei inserire un immagine con l'effetto lightbox, ma vorrei che l'immagine avesse il testo tutto attorno (incorniciato) e non sotto l'immagine.

il pezzo di codice è il seguente

<h2>Benvenuto!!</h2>

<div class="thumbnail"> <a href="tevere.jpg" rel="lightbox"><img src="tevere.jpg" width="226" height="188" alt="" /></a></div>

<p>Il tevere.......</p>
</div>

Il foglio di stile:

html, body{
margin:0;
padding:0;}

body{
font:85%/1.45 "Lucida Sans Unicode", "Lucida Grande", Lucida, Arial,sans-serif;
text-align: justify;
background:url(logo.png);
background-repeat: repeat-x;
background-position: top;}

p{
margin-top:0 0 1em 0;}

h2{
font-size:160%;
color: #228B22;
margin-top:0;
margin: 0 0 0 0;}

div#header{
margin-bottom:1em;
padding-bottom:1em;
margin-top:3em;}

div#header h1{
width:900px;
text-align: center;
color: #00008B;
font-size: xx-large;}

div#container{
width:1000px;
margin:0 auto;}

div#content{
float:right;
width:800px;}

div#content p{
text-align:justify;}

div#menu{
  float:right;
  width:160px;
  padding-top:0;
  margin-right: 19px;
}

div#menu a{
  display:block;
  height:1.3em;
  font-size:110%;
  color:#A64B1B;
  text-decoration:none;
  padding: 0px 0 1px 15px;}
  
div#menu ul,div#menu li{
  list-style-type: square;
  margin:0;
  padding:0;}

div#menu a:hover{
  color:#7F2D01;}

div#menu li#active a{
  color:#606060;}
  
div#footer{
  clear:both;
  padding-top:10px;
  background:#95B3B3 url(footer.png) repeat-x top;
  color:#333;}
 
 #lightbox{
position: absolute;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;}
 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;
    }>#hoverNav{ left: 0;} a{ outline: none;}

#prevLink, #nextLink{
    width: 49%;
    height: 100%;
    background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
    display: block;
    } { left: 0; float: left;} { right: 0; float: right;}:hover,:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }:hover,:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
    font: 10px Verdana, Helvetica, sans-serif;
    background-color:;
    margin: 0 auto;
    line-height: 1.4em;
    overflow: auto;
    width: 100%    
    }

#imageData{    padding:0 10px; color: #666; } #imageDetails{ width: 70%; float: left; text-align: left; }     #caption{ font-weight: bold;    } #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;    }             #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: #000;
    }

[laburno]

Ciao ikar e benvenuto,
Ma hai gia installato lightbox? Se si postaci il codice che genera, altrimenti devi mettere il testo tra i tag <p> dentro al div di classe thumbnail e dare un float (left o right) all'immagine per fare si che il testo le stia attorno.

[ikar]

Grazie mille per il benvenuto.
sì sì... lo script lightbox funziona però il testo non si incornicia come vorrei, ma solo sotto l'immagine.
Non ho capito in che punto devo inserire *float: left;
*

[laburno]

Ah ok, allora il codice che devi modificare è quello generato dallo script, non quello nel tuo css.

Guarda dentro il .js se c'è qualcosa.