Oscurare l'intera pagina

**Blocker255** · 14-05-2016, 18:36

Scrivo per la prima volta a questo forum css per un grave problema.

Forse ci sono discussioni simili, ma la il mio problema è speciale.

Allora, ho creato una pagina xhtml, ho definito i miei css e ora avevo in mente di fare una bella cosa: quando l'utente clicca su un'immagine oscurare lo sfondo e visualizzarla bella grande.

Già ci sono problemi con l'oscurazione, non voglio sapere con la visualizzazione dell'immagine!

Per oscurare lo sfondo ho creato un div dentro il body, prima del div principale.
Nel css questo div l'ho impostato con posizionamento assoluto, width: 100%, height: 100% e la proprietà background-color: rgba(0, 0, 0, 0.5), in modo che risulti semi-trasparente e il z-index: 30.
In pratica ho seguito questo: http://www.ricmanx.com/blog/2008/11/...mitrasparente/.

Problema: l'oscuramento c'è, ma fino a metà della pagina! Tutto il resto è normale, inalterato.
Cioè l'oscuramento si ferma dove finisce lo schermo del computer (cioè la parte di visualizzazione del browser, ovviamente partendo dall'alto della pagina).

Vi dò il codice html e css della pagina qui di seguito:

index.html

codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it-IT">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="description" content="www.Arkanoid.it - Guida Alla conservazione degli alimenti" />
        <meta name="keywords" content="conservazione degli alimenti" />
        <base href="../" />
        <link href="css/Style.css" rel="stylesheet" type="text/css" />
        <link rel="shortcut icon" href="favicon.ico" />        
        <title>Conservazione degli alimenti | Arkanoid.it</title>
    </head>
    
    <body>
        <div id="ciao">
        </div>
        <div id="main">
            <div id="head">
                <img src="logo/head_logo.png" id="logo" alt="logo" />
            </div>
            <h1 style="text-align:center"><a name="up">CONSERVAZIONE DEGLI ALIMENTI</a></h1>
            <p>
                Un alimento fresco, in condizioni normali, cambia abbastanza rapidamente le sue caratteristiche.<br />
                Tende, ad esempio, a deteriorarsi, marcire o cambiare altri aspetti che comunque lo rendono meno commestibile, dato che possono svilupparsi microbi anche dannosi per l'organismo umano.<br />
                Qui di seguito elenco i metodi usati per conservare al meglio i cibi (le tecniche più utilizzate):
            </p>
            <ul>
                <li><b>Conservazione al freddo:</b><br />
                    <ul>
                        <li><a href="html/index.html#p1">Refrigerazione</a></li>
                    <li><a href="html/index.html#p2">Surgelazione</a></li>
                    </ul>
                </li>
                    <li><a href="html/index.html#p3">Essiccazione</a></li>
                <li><b>Trattamenti a caldo:</b><br />
                    <ul>
                        <li><a href="html/index.html#p4">Pastorizzazione</a></li>
                        <li><a href="html/index.html#p5">Sterilizzazione</a></li>
                    </ul>
                </li>
                <li><b>Conservanti naturali:</b><br />
                    <ul>
                        <li><a href="html/index.html#p6">Sott'olio</a></li>
                        <li><a href="html/index.html#p7">Sott'aceto</a></li>
                        <li><a href="html/index.html#p8">Sotto spirito</a></li>
                        <li><a href="html/index.html#p9">Salagione</a></li>
                        <li><a href="html/index.html#p10">Zucchero</a></li>
                    </ul>
                </li>
            </ul>
            <br />
            <br />
            <div id="paragraphs" class="content">
                <h3><a name="p1">Refrigerazione</a></h3>
                <p id="par-1" class="par">
                    La refrigerazione è un processo di conservazione alimentare che non blocca la crescita dei batteri ma la rallenta.<br />Consiste nel conservare i cibi in ambienti freddi come il frigorifero (circa +4°C).<br /><br />
                    <img src="img/refrigerazione.png" alt="REFRIGERAZIONE" />
                </p> <!-- par-1 -->
                
                <h3><a name="p2">Surgelazione</a></h3>
                <p id="par-2" class="par">
                    La surgelazione è un procedimento simile alla refrigerazione ma le temperature sono pi&ugrave; basse (circa -18°C).<br />Questo consente di fermare la crescita dei batteri.
                </p> <!-- par-2 -->
                
                <h3><a name="p3">Essiccazione</a></h3>
                <p id="par-3" class="par">
                    L'alimento viene privato di acqua e risulta secco, ambiente non ideale alla vita dei germi. Alcuni esempi sono pasta alimentare, biscotti, fette biscottate, legumi secchi, frutta secca, etc...
                </p> <!-- par-3 -->
                
                <h3><a name="p4">Pastorizzazione</a></h3>
                <p id="par-4" class="par">
                    L'alimento viene riscaldato per 15-30 secondi a 70-80°C. Questa temperatura fa morire i germi patogeni e lascia intatto il contenuto di proteine e vitamine. Qusta procedura viene utilizzata per liquidi come latte, succhi di frutta, birra, vino.<br /><br />
                    <img src="img/pastorizzazione.png" alt="PASTORIZZAZIONE" />
                </p> <!-- par-4 -->
                
                <h3><a name="p5">Sterilizzazione</a></h3>
                <p id="par-5" class="par">
                    Come il precedente metodo, ma usato per alimenti solidi come frutta, verdura, carne, pesce inscatolati in vetro o in barattolo. Usa tempi più lunghi (10-15 minuti) e anche temperature più alte (120-150°C) che distruggono tutti i microrganismi.
                </p> <!-- par-5 -->
                
                <h3><a name="p6">Sott'olio</a></h3>
                <p id="par-6" class="par">
                    il cibo è conservato in barattoli (spesso in vetro) colmi di olio, sostanza che isola gli alimenti dall'aria non consentendo ai microrganismi aerobi di svilupparsi.<br /><br />
                    <img src="img/sott'olio.png" alt="SOTT'OLIO" />
                </p> <!-- par-6 -->
                
                <h3><a name="p7">Sott'aceto</a></h3>
                <p id="par-7" class="par">
                    L'aceto crea un'ambiente ostile ai germi. Usato specialmente per le verdure.
                </p> <!-- par-7 -->
                
                <h3><a name="p8">Sotto spirito</a></h3>
                <p id="par-8" class="par">
                    Metodo usato per la frutta, utilizza l'alcol per eliminare i germi.<br /><br />
                    <img src="img/sotto_spirito.png" alt="SOTTO SPIRITO" />
                </p> <!-- par-8 -->
                
                <h3><a name="p9">Salagione</a></h3>
                <p id="par-9" class="par">
                    Il sale elimina l'acqua ed ha una funziona antisettica.
                </p> <!-- par-9 -->
                
                <h3><a name="p10">Zucchero</a></h3>
                <p id="par-10" class="par">
                    Usato nelle marmellate per disidratare i migrorganismi.
                </p> <!-- par-10 -->
            </div> <!-- paragraphs -->
        </div> <!-- main -->
    </body>
</html>

Style.css

codice:

body {
    margin: 10px, 10px, 40px, 15px;
    background-image: url("../img/sfondo.jpg");
    background-attachment: fixed;
}
#main {
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 10px;
    background-color: azure;
    font-family: serif;
    width: 700px;
}
h1 {
    font-family: serif;
    color: coral;
    margin-top: 30px;
}
h3 {
    font-family: serif;
    color: red;
}
.par {
    background-color: lightgoldenrodyellow;
    color: blue;
    font-family: sans-serif;
}
img#logo {
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    top: 20px;
}
#head {
    position: relative;
    background-color:  bisque;
    height: 220px;
    top: 10px;
}
#ciao {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;
}

**KillerWorm** · 14-05-2016, 20:15

Scrivo per la prima volta a questo forum css per un grave problema.

Forse ci sono discussioni simili, ma la il mio problema è speciale.

.. hai già chiamato quelli dell'interpol?
io ho già preparato il rifugio antiatomico.

Comunque, prova così e vedi che succede:

codice:

#ciao {
    position: fixed;

**fermat** · 14-05-2016, 20:23

ciao!

scusa la risposta / consiglio forse banale, ma usare uno dei migliaia plugin per la creazione di finestre / gallery modal che ci sono in giro per la rete, invece di reinventare la ruota?
tipo questo ad esempio: http://fancybox.net/

**Blocker255** · 14-05-2016, 20:42

Ma certo, KillerWorm! Come ho fatto a non pensarci subito?!
Funziona alla grande!
Comunque avevo anche un altro problema, cioè quello che mi dava lo stesso risultato anche mettendo il div "ciao" dentro il div "main", ma ho risolto semplicemente ridefinendo la proprietà position del "main" in relative.
E per quanto riguarda te, fermat, avevo già pensato di scaricarmi un plugin per JS, ma non avendo particolare familiarità con questo linguaggio ho voluto creare qualcosa da me, anche per divertimento.

Grazie sempre a tutti dei consigli!

Discussione: Oscurare l'intera pagina

Strumenti discussione

Ricerca discussione

Visualizza

Oscurare l'intera pagina

Permessi di invio