[css] layer semitrasparente!

piccolo.socrate

[css] layer semitrasparente!

salve,
sto creando un demo-tour per il mio sito: qualcosa che assomigli vagamente a questo http://amberjack.org/?tourId=AJTour.

ho fatto tutto, ma mi manca solo:

come impostare il background del div per averlo opaco (oppure come creare una png decente che possa far da sfondo!!)
come impostare l'altezza del div in modo che copra tutta la pagina, visto che mettendo 100% arrivo solo fino alla "prima schermata"

grazie in anticipo

il.rappo

@piccolosocrate said:

come impostare il background del div per averlo opaco (oppure come creare una png decente che possa far da sfondo!!)

come impostare l'altezza del div in modo che copra tutta la pagina, visto che mettendo 100% arrivo solo fino alla "prima schermata"
Un colore tra grigio e bianco? Oppure non ho capito nulla
Provato usando auto? Oppure impostarlo in pixel, a una dimensione che vada bene per tutto?

hogudo

come impostare il background del div per averlo opaco (oppure come creare una png decente che possa far da sfondo!!)
L'opacità sarà inclusa nei css3, sui 2 non è supportata.

Per averne un effetto simile, opacizzi con un programma per editare immagini e metti l'immagine come background sul body.

Per creare una png decente, quando la salvi metti il colore di sfondo dato al tuo sito anche all'immagine, campionando il colore.

come impostare l'altezza del div in modo che copra tutta la pagina, visto che mettendo 100% arrivo solo fino alla "prima schermata"
Dipende come è la struttura, o imposti la altezza minima al 100% oppure potresti posizionare in maniera assoluta un footer verso il basso, però dipende da mille variabili.

zoster

Io faccio così

come prima linea all'interno del body metto

[html]
<div id="wait">
<img class="centered" src="pic/loading.gif" alt="" width="146" height="120" align="absmiddle" /></div>
<div align="center">
[/html]
il mio wait ha questo css

[html]
#wait {
position:absolute;
width:300px;
height:300px;
z-index:1;
left: 0px;
top: 0px;
background-repeat: repeat;
background-position: center center;
background-image: url(pic/wait_bg_png.png);
text-align: center;
vertical-align: middle;
display: none;
filter: Alpha(Opacity=10, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=100);
}
[/html] E così strutturato xkè IE non vede la trasparenza del png che invece in firefox funziona benissimo.Quindi per ovviare uso un'effetto che è solo su IE(filter:,,,) e così lui mi rende opaco tutto il div.

Questo è il codice javascript che sto usando ora, ancora necessita di debug ma dovrebbe funzionare


var loading = true;
var delay = 25;
var Opera = window.opera ? true : false;
var opmask;

function prendiElementoDaId(id_elemento) {
 var elemento;
 if(document.getElementById)
  elemento = document.getElementById(id_elemento);
 else
  elemento = document.all[id_elemento];
 return elemento;
}

function resize(maschera) {
    if (loading) {
        WinWidth=(document.layers)?window.innerWidth:window.document.body.clientWidth;
        WinHeight=(document.layers)?window.innerHeight:window.document.body.clientHeight;
        prendiElementoDaId(maschera).style.width =    WinWidth+'px';
        prendiElementoDaId(maschera).style.height =    WinHeight+'px';
        if (Opera) {
            prendiElementoDaId(maschera).style.top = window.pageYOffset+'px';
            setTimeout('resize(opmask)', delay);
        }
    }
};

function Show(maschera) {
    if (loading) {
        opmask = maschera;
        resize(maschera);
        prendiElementoDaId(maschera).style.display = "block";
    } else {
        prendiElementoDaId(maschera).style.display = "none";
    }
};

e dulcis infundo il nostro tag body

[html]<body onload="Show('wait')" onresize="resize('wait')" >[/html]

claudioweb

@piccolosocrate said:

come impostare l'altezza del div in modo che copra tutta la pagina, visto che mettendo 100% arrivo solo fino alla "prima schermata"
Ma ti serve sempre per lo sfondo? Se si, puoi impostare lo sfondo di tutta la pagina impostandolo per il body.

In alternativa se usi un div contenitore, che apri subito dopo il boby e chiudi prima della fine del body, esso coprirà ovviamente tutta la pagina.

Ciao

zoster

Be non ha detto nulla ma credo che col mio esempio abbia risolto, io lo uso per farmi un'intermezzo tra una pagina e l'altra, oltretutto c sono anche gli escamotage per coprirla tutta la pagina, anche in caso di ridimensionamento e di scrol. i tag width e height nel css sono in realtà irrilevanti, potrebbero essere benissimo auto o zero senza alcun problema, in realta io dico al div che deve avere le dimensioni di tutto il body, e di ridimensionarsi in caso di necessita. L'unico inghippo che si presentava era il fatto che opera invece di restituire tutta la height del body, restituiva solo il visibile, questo l'ho risolto dando un comando in + nel caso il in cui il browser utente fosse opera.

 
prendiElementoDaId(maschera).style.top = window.pageYOffset+'px';

Comunques il codice saliente di tutto il il mio precedente post era questo

 
WinWidth=(document.layers)?window.innerWidth:window.document.body.clientWidth;
WinHeight=(document.layers)?window.innerHeight:window.document.body.clientHeight;
prendiElementoDaId(maschera).style.width =    WinWidth+'px';
prendiElementoDaId(maschera).style.height =    WinHeight+'px';