Buongiorno a tutti,
non riesco a venire a capo di un problema con il posizionamento di un div.
Sto utilizzando uno script javascript per poter inserire delle immagini di sfondo a rotazione con un effetto transizione e vorrei che sopra venisse visualizzato un div in trasparenza con un testo.
Praticamente all'interno di una cella ho inserito questo codice:
<td height="650" valign="top">
<div class="rslides" id="slider1">
[img]immagini/nature_1.jpg[/img]
[img]immagini/nature_2.jpg[/img]
[img]immagini/nature_3.jpg[/img]
<div class="boxtesto" style="padding:10px" align="justify">
<span class="titolo">Prova
</span><span class="testo">
Rinomato per la sua cucina a base di carne fresca selezionata, proveniente da tutto il mondo, cucinata alla griglia.
Oltre al vasto menù con ampia scelta tra antipasti, primi e secondi e carta dei vini eccellente, si ricorda la tipica “Schiacciata”, particolare pizza preparata con mix di farine selezionate e lunga lievitazione, alimento sano, completo e genuino, proposta dalla semplice Margherita a quella più elaborata e gustosa.</span>
</div>
</div>
</td>
e nel css collegato:
.rslides {
position: relative;
overflow: hidden;
width: 100%;
padding: 0;
top:15px;
left:210px;
z-index:1;
}
div.boxtesto {
position: absolute;
top: 220px;
left: 500px;
width: 300px;
height:400px;
background: #666;
filter:alpha(opacity=80);
-moz-opacity:.80;
opacity:.80;
z-index:2;
}
span.titolo {
color: #FFFFFF;
font: bold 18px Verdana;
letter-spacing: 0px;
}
span.testo {
color: #FFFFFF;
font: 14px Verdana;
letter-spacing: 0px;
}
Sono inoltre collegati dei file .js
Il fatto è che l'immagine di sfondo va bene, mentre il div si "sposta" in base alla dimensione della finestra del browser.
Qualcuno mi potrebbe dire dove sto sbagliando per favore?
Grazie anticipatamente.
Rispondi quotando
