[HTML] Sfondo colorato di un div contenitore di altri due div

paba2015

Nuovo Utente
15 Dic 2016
7
0
1
52
Salve a tutti, ciao moderatori.
sono nuovo, mi sono appena iscritto. Sono contento di entrare nel forum.
Sono un autodidatta e sto upgradando il sito ripulendolo dalle vecchie tabelle.
Ho qualche problema con i css in cui mi sono imbattuto. Perdonatemi se scrivo qualche cavolata.

Vorrei realizzare un div contenitore (con uno sfondo colorato visibile) di altri due div (con sfondo colorato diverso da quello dello sfondo del contenitore) che piu avanti vorrei che fossero tre o quattro.
Ho realizzato la seguente struttura:


HTML:
Codice:
<body>
    <div id="container_gen_body">
        <div class="container_cen_all"> <!-- contenitore di tutte le sezioni (es: WhoIAm, News, etc.) -->

         <!-- WHO I AM -->
             <div class="WhoIAm"> <!--WhoIAm-->
                 <div class="split2">
                       <div> <!-- 1a colonna -->
                           <h1> titolo </h1>
                           <p>  testo 2
                               bla bla bla
                            </p>
                       </div>  <!-- fine 1° split2 -->
                     <div> <!-- 2° split-->
                           <h1>titolo 2</h1>
                           <p> testo 2 w wwe wefdsafasdf dfs<br>
                                  bla bla bla <br>
                                  bla bla bla
                           </p>
                     </div>
                
               <div class="wide2">ciao </div>
               </div>
         </div>       <!-- close WHO I AM -->

         <div class="spazio"></div>

         <!--NEWS-->
             <div class="News">
                     NEWS
             </div><!-- News-->


        </div><!--container_cen_all-->
    </div> <!-- container_gen_body-->
</body>
CSS:
Codice:
html, body {  /* impostazioni generali - lasciare */
   margin:0;
   padding: 0;
   width: 100%;
   height: 100%;
   text-align: center; */     /* IE5.x */
}

body {
   background-color: #333333;  /* colore del body */
}

#container_gen_body {        
   min-height: 100%;
   height: auto !important;
   height: 100%;
   width: 100%;
   margin:0 auto  -250px;  /* centra il contenitore nello spazio a destra della fascia sx*/
}

.container_cen_all {     /* contenitore delle varie sezioni  */
    visibility: visible;
    position: absolute;
    top: 60px;
    left: 290px;
    right: 0px;  /* distanza del contenitore dal bordo del browser */
    margin: 0 auto; /* centra su FireFox */
    text-align: center; /* centra su IE .. ma non funziona*/
    background: #FFFFFF;  
}

.WhoIAm {                 
    visibility: visible;
    background-color: #CC00CC;
    width:95%;            /* rispetto al contenitore CENTRALE ALL*/
    text-align:center;  /* IE */
    margin: 0 auto;     /* FX */
    z-index: 1000;
}

.News {
   come WhoIAm
   ma con colore di sfondo diverso
}


.spazio {     /* riga di separazione */
    visibility: visible;
    background: #DDDDDD; /* BIANCO */
    height:40px;
    text-align:center;
    z-index: 1000;
   clear:left;
}



.split2 div {  /* riquadro che contiene TITOLO e TESTO */
    float: left;
    background-color: #66CC66; /* fondo del riquadro */
    width: 45%;  /* \width: 49%; w\idth: 45%; */
    padding: 0 2%; /* top ..*/
    height: auto;
    z-index: 400000;
}
.split2 h1 {  /* titolo */
    font-family: Verdana, sans-serif;
    font-style: normal;
    font-size:    2.0em;
    font-weight: 400;
    color:#000000; /* colore TITOLO */
    text-align: justify;
    line-height: 1.7em;
    letter-spacing: 0.1em;  /* spazio tra le lettere delle parole */
}
.split2 p { /* paragrafo */
    font-family: Verdana, sans-serif;
    font-style: normal;
    font-size:    1.0em;
    font-weight: 400;
    color:#000000; /* colore TESTO */
    text-align: left;
   line-height: 1.6em;
    letter-spacing: 0.2em;  /* spazio tra le lettere delle parole */
    z-index: 400000;
}

.wide2 {  /* chiusura */
   clear: both;
   padding: 0 2%;
   z-index: 400000;
}

Il problema è che non riesco a vedere il colore di fondo del div contenitore WhoIam, o meglio non risulta visibile il rettangolo del div WhoIam, anche modificando il relativo attributo background-color.
Per poter vedere il rettangolo di WhoIam, che con il codice sopra risulta non visibile (e vederlo quindi inglobare i due div interni) devo mettere un "float: left;" anche all'interno della classe .WhoIam; così facendo però il div di WhoIam risulta sì visibile ma si sposta tutto a sinistra (ovviamente), mentre io vorrei mantenerlo al centro.

Qualcuno può aiutarmi a capire dove sbaglio?
grazie anticipatamente
 
Ultima modifica di un moderatore:

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.296
331
83
Ciao paba2015
Inanzitutto benvenuto sul forum! Ti devo fare però un appunto: quando si posta del codice bisogna usare il tag [ code ] come da regolamento e per rendere più leggibile il codice, oppure usa la funzione apposita nella barra degli strumenti (vedi immagine)
box inserisci 2.png.JPG

per questa volta te l'ho fatto io e come nuovo utente dovresti anche dare un'occhiata al regolamento del forum e di sezione.

Venendo al tuo problema non ho capito bene cosa vuoi ottenere, perchè se metti dei div con sfondo colorato dentro un contenitore è ovvio che il background del contenitore viene coperto e non lo vedi, poi secondo me se vuoi solo un rettangolo in mezzo alla pagina con dentro altri rettangoli hai messo troppi contenitori e regole css inutili.
Pertanto ti chiedo di specificare meglio cosa vuoi ottenere e come devono essere visibili i vari elementi
 

paba2015

Nuovo Utente
15 Dic 2016
7
0
1
52
ciao max1, buongiorno. Grazie per l'aggiustamento. Spero di entrare presto nelle metodologie del forum. Bella la citazione.
Ciao anche a maxbossi (se non è la stessa persona). Grazie anche a te.

Dal codice ho omesso un po di cose in effetti e sicuramente c'è del codice di troppo.
Di seguito posto lo schizzo della struttura che sto provando a realizzare e del rettangolo in oggetto del post (i colori sono indicativi). Al momento sono riuscito a far funzionare bene o male un po tutto.
Vorrei realizzare una serie di rettangoli (tipo quello viola) che siano le varie sezioni (esempio NEWS, WhoIam, WhatIdo, ecc, da intervallare a spazi vuoti) che al proprio interno abbiano i contenuti inseriti in due, tre, quattro o più contenitori (in grigio scuro) con altezza che si adatta al contenuto. Da usare magari anche tipo footer sottostante.
Il codice che ho impostato sopra al momento: non fa vedere il rettangolo viola intorno ai rettangoli interni in grigio scuro; inoltre i contenitori interni non vengono centrati ma si spostano sempre a sinistra (ovviamente, poiché flottanti a sinistra).
Desideravo che fosse: a) il rettangolo viola al centro del contenitore che lo contiene; b) rettangoli grigi con altezza variabile rispetto al contenuto "titolo" e "bla bla bla" che contengono; c) i rettangoli grigi centrati orizzontalmente (e non flottanti a sinistra) al centro del rettangolo viola.
 

Allegati

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.296
331
83
Dammi un po' di tempo e vedo di farti un esempio per cedere se ci siamo capiti
 

WmbertSea

Utente Attivo
28 Nov 2014
179
28
28
Ciao, come tu stesso hai notato, un elemento flottante fa collassare il suo contenitore, a meno che anche quest'ultimo non sia flottante a sua volta :
Per poter vedere il rettangolo di WhoIam, che con il codice sopra risulta non visibile (e vederlo quindi inglobare i due div interni) devo mettere un "float: left;" anche all'interno della classe .WhoIam; così facendo però il div di WhoIam risulta sì visibile ma si sposta tutto a sinistra (ovviamente), mentre io vorrei mantenerlo al centro.
Tuttavia è possibile utilizzare alcuni trucchi per risolvere questo problema.

Generalmente viene utilizzata una tecnica chiamata clearfix per la quale, al contenitore, viene definito lo pseudo-elemento :after con proprietà clear per interrompere, appunto, l'effetto float dei contenuti.

Nel tuo caso potrebbe bastare aggiungere una cosa del genere:
Codice:
.WhoIAm:after {               
  content: '';
  display: block;
  clear: both;
}
Puoi trovare altre varianti qui, alcune sono utili se si vuole mantenere una certa retrocompatibilità per i browser più datati.

Altre informazioni puoi trovarle con qualche ricerca tipo: css clearfix

EDIT
@Max 1, scusami per averti anticipato
 

paba2015

Nuovo Utente
15 Dic 2016
7
0
1
52
ciao ragazzi. scusate l'assenza.ci sono, ho una consegna di un lavoro a giorni e sono un po' indietro.
ciao wmbersea. grazie.
Provo la soluzione indicata a stretto giro e poi aggiorno.
 

paba2015

Nuovo Utente
15 Dic 2016
7
0
1
52
ciao ragazzi.
ho provato ad inserire il codice consigliato da wmbersea e ottengo l'effetto di vedere il rettangolo viola. Riporto l'immagine. I rettangoli interni però rimangono comunque sempre flottati a sinistra. Sto comunque guardando in giro sull'argomento indicato da wmbersea
 

Allegati

paba2015

Nuovo Utente
15 Dic 2016
7
0
1
52
ciao ragazzi.
Sto provando con questo codice. Ho inserito un <ul> .. </ul>.
Sono riuscito ad inquadrare le colonne dei titoli (in verde) nel riquadro più grande (in marroncino), cioè a far vedere il riquadro grande. I riquadri verdi però continuano ad essere flottati a sinistra.


HTML:
Codice:
<!-- WHO I AM -->
           <div class="WhoIAm"> WHO
           <ul>
                   <div> <!-- 1a colonna -->
                         <h1> titolo1 </h1>
                         <p>
                              Testo 1
                              bla bla bla  <br>
                               bla bla bla <br>
                               bla bla bla <br>
                         </p>

                   </div><!-- fine 1a colonna -->

                     <div>
                       <h1>titolo2</h1>
                         <p>
                           Testo 2<br>
                               bla bla bla<br>
                               bla bla bla<br>
                         </p>
                     </div>
           </ul>
       </div><!-- close WHO I AM -->

CSS:
Codice:
.WhoIAm {   
    visibility: visible;
    background-color: #1A4269;
   width:95%;    
    text-align:center;  /* IE */   /*centra il box, non il contenuto */
   margin: 0 auto;     /* FX */
height: auto;
}
.WhoIAm ul {
/*   width: 400px; */
   height: auto;
margin: 0 auto;
text-align: center;
}
.WhoIAm div {  /* riquadro che contiene TITOLO e TESTO */
    float: left;
   background-color: #66CC66; /* fondo del riquadro */
   padding-top:5px;
   padding-left: 25px;
}
.WhoIAm h1 {  /* titolo */
    font-family: Verdana, sans-serif;
    font-style: normal;
    font-size:    2.0em;
    font-weight: 400;
    color:#000000; /* colore TITOLO */
    text-align: justify;
   line-height: 1.7em;
    letter-spacing: 0.1em;  /* spazio tra le lettere delle parole */
}
.WhoIAm p { /* paragrafo */
    font-family: Verdana, sans-serif;
    font-style: normal;
    font-size:    1.0em;
    font-weight: 400;
    color:#000000; /* colore TESTO */
    text-align: left;
   line-height: 1.6em;
    letter-spacing: 0.2em;  /* spazio tra le lettere delle parole */
}
.WhoIAm:after {
   content: " ";
   display: block;
   clear: both;
}

non riesco a capire come e dove intervenire.
Se modifico la classe .WhoIAm ul inserendo il width: 400px; allora i rettangoli verdi si centrano ma si sistemano uno sotto l'altro e non uno a fianco all'altro. Se aggiusto una cosa ... se ne scombussola un'altra!
 

Allegati

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.296
331
83
Hai un messaggio privato
 

paba2015

Nuovo Utente
15 Dic 2016
7
0
1
52
ciao ragazzi. salve moderatori. Ciao max.
Sono di passaggio. Poi rientro con calma dopo le feste.
Posto il codice che ho sviluppato sull'argomento. Non ha pretesa di essere il meglio che si possa fare ma credo che possa funzionare, almeno per quello che avevo in mente. Perdonate se non è all'altezza.

CSS:

Codice:
/**************************************************
                WORK IN PROGRESS
***************************************************/
.WorkInProgress {
    visibility: visible;
    background-color: #C1C1C1;
    width:98%;             /* rispetto al contenitore CENTRALE */
    text-align:center;  /* IE */
    margin: 0 auto;     /* FX */
    z-index: 1000;
}
#WorkInProgress_griglia {  /* griglia vera e propria interna al container */
      margin: 0;
    max-width: 100%;
      /* padding della griglia dentro il contenitore */
    padding-top: 15px;
    padding-left: 0px;  /* necesasario per centrare */
    padding-right: 0px;
    padding-bottom: 0px;
}
#WorkInProgress_griglia p_title_section {   /* TESTO della colonna */
    padding: 0px;
      margin: 0 auto;
      font-family:Verdana, Arial, Helvetica, sans-serif;
      font-weight: 430;  /* spessore dei caratteri */
      font-size: 1.3em;    /* altezza del testo */       
    letter-spacing: 0.12em;
    line-height: 0.0em;
      color: #666666 ; /* colore del testo */
    text-align:center;
}
#WorkInProgress_griglia li {
      border: 10px solid #333333;   /* grigio scuro nero */
      background-color: #333333; /* grigio scuro nero */
      display: inline-block;   
     list-style-type: none;   /* toglie i punti all'elenco */
      margin: 10px;
    width: 250px; /* il box che contiene l'immagine deve avere la stessa larghezza assegnata all'immagine. A questa si sommano i pixel dati a margin */
    min-width: 100px;
      vertical-align: top;
/*  float: left;  visualizza le icone una a finaco a l'altra anche nel preview di DW ma le allinea tutte a sinistra nel container */
}
#WorkInProgress_griglia li p_text {   /* TESTO della colonna */
/*  padding: 10px 10px 10px 10px; */
      margin: 0 auto;
      font-family:Verdana, Arial, Helvetica, sans-serif;
      font-weight: 350;  /* spessore dei caratteri */
      font-size: 0.7em;    /* altezza del testo */       
    letter-spacing: 0.12em;
    line-height: 1.4em;
      color: #BBBBBB ; /* colore del testo */
    display: block; /* serve a far funzionare  TEXT-ALIGN */
    text-align:left;
}
#WorkInProgress_griglia li p2 {   /* testo */
      padding: 10px 10px 10px 10px;
      margin: 0 auto;
      font-family:Verdana, Arial, Helvetica, sans-serif;
      font-weight: 500;  /* spessore dei caratteri */
      font-size: 1em;    /* altezza del testo */       
      color: #FFFFFF ; /* colore del testo */
}
#WorkInProgress_griglia li p_title {   /* testo */
      padding-top: 0px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
      margin: 0 auto;
      font-family:Verdana, Arial, Helvetica, sans-serif;
      font-weight: 500;  /* spessore dei caratteri */
      font-size: 1em;    /* altezza del testo */       
      color: #00FF00 ; /* colore del testo */
}



HTML:
Codice:
<div class="WorkInProgress">
                <ul id="WorkInProgress_griglia">

                    <p_title_section>TITOLO</p_title_section>        <br><br>

                  <li>
                      <p2>Col 1</p2>           
                  </li>


                    <li>
                      <p2>Col 2</p2>           
                    </li>

                    <li>
                      <p2>Col 3</p2>           
                    </li>
 

                       ...


                </ul>
            </div>

Mi sembra che funzioni abbastanza bene per quello che avevo in mente io.
La sezione sviluppata è quella del WorkInProgress ma sotituendo il nome se ne possono implementare altre, modificando il css per le varianti (colore, stile testo ecc). Nell'HTML è possibile inserire con facilità anche le varie colonne aggiungendo ulteriori <li>.