Div sovrapposti... sono andato in tilti! :(

[meldro]

Chiedo scusa se il codice che posterò farà schifo ma sono letteralmente andato in tilt...

Questi sono i file: http://wikisend.com/download/459126/test-div.rar (c'è il codice e un .png con il risultato che vorrei ottenere)

In parole.
Ho una pagina che contiene il suo bel layout, contenitore e tutto il necessario al suo interno.
Ora vorrei mettere un div sopra a tutto (id=fade), che si estenda per tutta la larghezza e altezza del browser con sfondo nero e che abbia un'opacità tale da lasciare intravedere, sotto, la pagine reale (n.b. non conosco la larghezza e alteza max del browser, il div dovrà essere dinamico). Sopra questo div opacizzato un altro div (id=primopiano) con del contenuto.

Non ci sono riuscito, anzi sono proprio in pappola!

Qualche indicazione?

[atsap]

Non ho tempo di guardare il tuo codice, ma... hai provato a dichiarare "fade" così?

#fade {

heigth: 100%;
width: 100%;
background-image: url(http://www.example.com/gif-trasparente-opacizzata.png);
background-repeat: repeat;
z-index: 500;
position: fixed;
left:0px;
top:0px;
}

e nell'html

<div id="fade">
qui il contenuto di fade
</div>

Non so se funziona, l'ho fatto al volo...

[meldro]

...Non so se funziona, l'ho fatto al volo...

Grazie, ma era una delle prime soluzioni adottate, il problema è che non copre l'intero pagina visibile nel browser in altezza, ma si ferma alla fine del "contenuto interno" sopra il div (id=primopiano).

[atsap]

Prova così, allora:

#primopiano{

heigth: 100%;
width: 30%;
z-index: 5500;
position: fixed;
left: 40%;
top:0px;
border:1px solid black;
overflow: hidden;
background:#CCCCCC;
}

Ovviamente, al background ci metti -moz-opacity oppure una png trasparente (che ti consiglio). Puoi regolare la posizione del #primopiano modificando left e width a tuo piacimento.
Ciao

[meldro]

Originariamente inviato da atsap
Prova così, allora:

#primopiano{

heigth: 100%;
width: 30%;
z-index: 5500;
position: fixed;
left: 40%;
top:0px;
border:1px solid black;
overflow: hidden;
background:#CCCCCC;
}

Ovviamente, al background ci metti -moz-opacity oppure una png trasparente (che ti consiglio). Puoi regolare la posizione del #primopiano modificando left e width a tuo piacimento.
Ciao

No, aggiungendo questo al precedente otteniamo proprio una cosa diversa...

[meldro]

Risolto, a chiunque possa servire, il metodo è descritto qui: http://www.bigthink.it/css-trick-div...n-full-height/