phpBB Italia

Inviato: **21/04/2016, 9:22**

Come si vede lo sfondo opacity non copre tutto lo schermo

.trasp {
   position: absolute;
    background-color: #000;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    opacity: 0.6;  /*Firefox*/
    filter: alpha(opacity=60); /*IE*/
    z-index: 1;
}

.alert {
    position: absolute;
    background-color: #ffff00;
    width: 250px; 
    height: auto; 
    top: 50%;
    left: 50%; 
    margin-left: -140px;  /*metà della width*/
    margin-top: -90px; /*metà della height*/
    padding-left: 20px;
    padding-right: 20px;
    font-size: 1.3em; color: #ff0000;
    text-align: center;
    border-radius: 20px;  /* Arrotonda gli angoli per Safari, FF, Chrome e Opera */
    border: 1px solid #fff;
    z-index: 2;
}
...
echo "<div class=\"trasp\"></div><div class=\"alert\"><div style=\"margin-top:25px;margin-bottom:30px;text-align:center;\"><img src=\"../immagini/alert.png\" width=\"70\" height=\"70\" alt=\"Alert\" title=\"Alert\"></div>$errore</div>";

Schermata 2016-04-21 alle 09.14.44.png

Inviato: **21/04/2016, 14:43**

Ovvio perchè il valore di absolute non si sa da dove parte. Inoltre per un background non praticamente usato opacity ma se è una tinta unita, si preferisce usare lo rgba. Inoltre hai totalmente sbagliato il concept di sta cosa.

https://jsfiddle.net/Xiradorn/tz4b9aL8/1/

Inviato: **21/04/2016, 14:47**

Cosa intendi "non si sa da dove parte"?

Inviato: **22/04/2016, 19:36**

Il posizionamento in absolute ha bisogno di coordinate top, bottom, left, right o almeno due di esse per direzionalità quindi ad esempio top e left. Se queste non sono presenti non si saprà da dove iniziare a considerare il tutto ma si prenderà la posizione nel flusso in cui sta. Inoltre questo dovrebbe avere sempre a riferimento un posizionamento in relative che di solito vien definito sul body o quanto meno sul container generale (se presente)

Inviato: **24/04/2016, 1:25**

Ora funziona, ma ho notato una cosa: se vado in fondo al sito http://www.photoman.altervista.org e clicco su @Email, si apre la finestrina-form ma allo stesso tempo la home scorre immediatamente nella parte superiore, cosa che invece non succede se clicco su Guestbook

Inviato: **24/04/2016, 20:04**

Sono gestite diversamente credo. Una è un popup, l'altra che è quella che ti ho suggerito è un overlay o modal ma non ho controllato dovrei esaminare il codice

Inviato: **29/04/2016, 14:31**

Mi sono accorto di una cosa, il box giallo non si centra

Schermata 2016-04-29 alle 14.27.03.png

Questo è il suo css

Codice: Seleziona tutto

.alert {
  position: absolute;
  background-color: #ffff00;
  min-width: 300px;
  height: auto;
  top: 50%;
  left: 50%;
  margin: -90px auto auto -125px;
  padding-left: 10px;
  padding-right: 10px;
  box-shadow: 0 0 0 2px #555;
  font-size: 1.3em; color: #ff0000;
  text-align: center;
  border-radius: 20px;
  display: table;
  z-index: 2;
}

Inviato: **29/04/2016, 15:48**

Ovvio. Se guardi il mio codice è diverso. ho usato width e height precise e NON min width. Quelle dimensioni sono calcolate.

Inviato: **29/04/2016, 17:25**

Si è vero. Io ho messo il min-with perché vorrei che se la frase è più lunga il box giallo si allargasse. Però si estende solo da una parte. E' possibile farlo allargare in modo uguale (a destra e a sinistra) così il box rimane sempre centrato?

Inviato: **29/04/2016, 18:56**

Devo vedere il codice in azione

phpBB Italia

Background opacity non c'entra lo schermo

Background opacity non c'entra lo schermo

Re: Background opacity non c'entra lo schermo

Re: Background opacity non c'entra lo schermo

Re: Background opacity non c'entra lo schermo

Re: Background opacity non c'entra lo schermo

Re: Background opacity non c'entra lo schermo

Re: Background opacity non c'entra lo schermo

Re: Background opacity non c'entra lo schermo

Re: Background opacity non c'entra lo schermo

Re: Background opacity non c'entra lo schermo