div sovrapposti

[mexican]

Ciao a tutti,
io vorrei ottenere con i css un qualcosa di simili all'immagine sotto:



Ecco per ora il css che ho:

-- Div che contiene l'immagine
.box_viaggio{
width:300px;
height:200px;
margin:25px;
float:left;
}

-- Div che contiene la banza azzurra e il testo
.box_titolo_viaggio{	
	background: #0066CC;
	height: 60px;
	opacity: .8;

/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

Il mio problema è sovrapporli. Fare in modo che l'immagine stia sotto al Box azzurro. Come nella Img sopra.
Grazie a tutti.

[Prill]

Ciao mexican, per sovrapporre due div potresti posizionarli in maniera assoluta dando loro uno z-index differente. Ma puoi ottenere lo stesso effetto anche in altro modo, sfruttando i valori rgba e inserendo normalmente il titolo all'interno del div con un opportuno margin-top:

1. assegni l'immagine come sfondo al div box_viaggi;
2. imposti le caratteristiche del tuo titolo

#titolo {
   background: rgba(0, 102, 204, 0.8);
   height: 60px;
   margin-top: 120px;  /*da regolare in base alle proprie esigenze */
}

che per il solo Explorer che non supporta fino alla versione 9 i valori rgba saranno in un css separato

<!--[if lte IE 8]>
<style type="text/css">
#titolo{
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC0066CC,endColorstr=#CC0066CC)"; /* per IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC0066CC,endColorstr=#CC0066CC);   /* per IE6 e 7 */
zoom: 1;}
</style>
<![endif]-->

[Prill]

Guardando meglio l'immagine, in realtà puoi sfruttare l'opacity come hai fatto, magari mettendo le istruzioni per Explorer in un foglio di stile apposito, e semplicemente inserire l'immagine come sfondo del primo div e dare al secondo un margin-top, perché sovrapporre i div?

[mexican]

Originariamente inviato da Prill
Guardando meglio l'immagine, in realtà puoi sfruttare l'opacity come hai fatto, magari mettendo le istruzioni per Explorer in un foglio di stile apposito, e semplicemente inserire l'immagine come sfondo del primo div e dare al secondo un margin-top, perché sovrapporre i div?

Si avevo pensato anche io a mettere l'immagine come sfondo, solo che essendo preso tutto da DB dinamicamente avrei preferito impostare due div sovrapposti.