Div a comparsa, ma sotto si vede l'altro div

**Raptusis** · 13-11-2006, 17:27

Salve a tutti,

ho fatto una pagina con diversi DIV con CSS,
in particolare uno di questi , nell'angolo in alto a destra, a "comparsa" (nel senso clicco un link e compare).

Quando il contenuto di questo DIV supera le 5 righe copre l'altro div fin qui mi potrebbe andare bene, ma le scritte del div di sfondo si intravedono nel Div a comparsa.

come posso far si che questo DIV copre praticamente TUTTO anche il div sotto?

grazie anticipatamente.

**ricman** · 14-11-2006, 10:51

Originariamente inviato da Raptusis
come posso far si che questo DIV copre praticamente TUTTO anche il div sotto?

Devi assegnargli un colore di sfondo.
(es: background-color:#fff)

**Raptusis** · 14-11-2006, 13:40

avevo gia assegnato un colore di sfondo ma il testo si legge lo stesso(quello sullo sfondo)

ce qualche trucco per ovviare a questo?

thnx

**ricman** · 14-11-2006, 16:41

Originariamente inviato da Raptusis
avevo gia assegnato un colore di sfondo ma il testo si legge lo stesso(quello sullo sfondo)

E' altamente impossibile che un rettangolo di sfondo bianco non copra un testo posto "sotto" di lui.
Prova a ricostruire su un file a parte il tuo codice in modo semplice (scrivendo solo ciò che serve per l'effetto che vuoi), magari hai incasinato qualcosa (se vuoi prova a postarlo) senza accorgerti.
Oppure stai lavorando con gli z-index e devi portare qualcosa in primo piano...

**Raptusis** · 14-11-2006, 17:32

ho semplificato molto il tutto

codice:



<body>
 <div id="main">

<div id="testa">..</div>


<div id="corpo">



<div id="corpo-colonna1">

..



<div id="corpo-colonna2sf">




<div id="carrello">  


     <div id="corpo-colonna3bsu">
          collegamento con javascript MostraDiv(corpo-colonna3b)
     </div>

     <div id="corpo-colonna3b">
          collegamento con javascript NascondiDiv(corpo-colonna3b)
          ...
          contenuto
          ....
     </div>


</div>


<table>

TABELLA E RELATIVO CONTENUTO <<<== questo contenuto viene visualizzato sotto il div CORPO-COLONNA3B, quando viene mostrato


<table>



....


</div>





<div id="corpo-colonna3su">
..
</div>

</div>



  </div>
</body>

**ricman** · 15-11-2006, 10:21

Originariamente inviato da Raptusis
ho semplificato molto il tutto
...

Beh... manca qualche chiusura dei div e poi dovresti aggiungere anche i css che usi...

**Raptusis** · 15-11-2006, 12:32

manca un div finale , quello del main, l'ho fatto a mano e velocemente.

codice:

/* by RAPTUSIS©    CreativAware di Capone Angelo(www.Raptusis.com) */
/*    .::_::.                                                      */
/*=================================================================*/
  body { margin: 0pt 45pt;
    padding: 0pt;
    font-family: verdana,helvetica,sans-serif;
    font-size: 80%;
    font-size-adjust: none;
    font-stretch: normal;
    background-image: url(../img/sfondo.gif);
    background-position: center;
    background-repeat: repeat-y;
    }

  #main { margin-left: auto;
    margin-right: auto;
    width: 880px;
    } 

  #testa { margin: 3em auto 1em;
    text-align: left;
    width: 85%;
    }

  #testa { border: 1px solid rgb(32, 32, 165);
    padding: 6px 0pt;
    background: rgb(243, 255, 243) none repeat scroll 0% 50%;
    }

  #corpo { 
    margin: 1em auto;
    text-align: left;
    width: 85%;
    border: 1px solid rgb(32, 32, 165);
    position: relative;
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: 0% 50%;
    margin-top: 0px;
    background-color: rgb(243, 255, 243);
    }

  #corpo-colonna1 { border-right: 1px none rgb(32, 32, 165);
    padding-top: 1em;
    padding-bottom: 1em;
    padding-left: 0pt;
    position: absolute;
    top: 0pt;
    left: 0pt;
    width: 25%;
    }

  #corpo-colonna2 { border-style: none solid;
    border-color: rgb(32, 32, 165);
    border-width: 1px;
    margin: 0px -1px 0pt 25%;
    padding: 1px 1px 1px 1em;
    background-color: rgb(255, 255, 255);
    min-height: 300px;
    }

  #corpo-colonna2sf { border-style: none solid;
    border-color: rgb(32, 32, 165);
    border-width: 1px;
    margin: 0pt -1px 0pt 25%;
    padding: 1px 1px 1px 1em;
    font-family: verdana,helvetica,sans-serif;
    font-size: 80%;
    line-height: normal;
    background-color: rgb(255, 255, 255);
    }

  #corpo-colonna3su { border: 1px none rgb(32, 32, 165);
    padding: 1px;
    position: absolute;
    right: 0pt;
    margin-right: 0px;
    background-repeat: no-repeat;
    top: 0pt;
    width: 19.6%;
    }

  #corpo-colonna3b { border-style: solid none solid solid;
    border-color: rgb(32, 32, 165);
    border-width: 1px;
    padding: 0px 1px 5px 0px;
    right: 0pt;
    top: 0pt;
    background-repeat: no-repeat;
    background-position: left top;
    margin-left: -2px;
    margin-right: -1px;
    margin-top: -2px;
    float: right;
    background-color: rgb(243, 255, 243);
    background-image: url(../img/menusfondo.gif);
    font-size: 115%;
    display: none;
    width: 250px;
    }

  #corpo-colonna3bsu { border-style: solid none none solid;
    border-color: rgb(32, 32, 165);
    border-width: 1px;
    padding: 0px 1px 0px 0px;
    background-repeat: no-repeat;
    bottom: 0pt;
    top: 0pt;
    margin-right: -1px;
    float: right;
    background-color: rgb(243, 255, 243);
    margin-left: -2px;
    background-image: url(../img/menusfondo.gif);
    margin-top: -2px;
    width: 250px;
    }

  a:link, a:visited { text-decoration: underline;
    color: rgb(32, 32, 165);
    }

  a:hover { border: 1px none rgb(255, 255, 204);
    background-repeat: no-repeat;
    color: rgb(0, 0, 153);
    text-decoration: none;
    background-image: url(../img/hoover.gif);
    background-position: left top;
    }

  table { border: 1px solid rgb(32, 32, 165);
    text-align: left;
    width: 95%;
    }

  td { border: 1px solid rgb(199, 255, 193);
    }

  .title { font-weight: bold;
    background-color: rgb(199, 255, 193);
    }

  input { font-size: 10px;
    }

  input.bottone { font-size: 10px;
    color: rgb(32, 32, 165);
    }

**Raptusis** · 15-11-2006, 13:53

grazie lo stesso ho risolto :

codice:

#corpo-colonna3b { 
...
...

   position: absolute; 
...
}

in questo modo copre tutto

ciao

Discussione: Div a comparsa, ma sotto si vede l'altro div

Strumenti discussione

Ricerca discussione

Visualizza

Div a comparsa, ma sotto si vede l'altro div

Re: Div a comparsa, ma sotto si vede l'altro div

Permessi di invio