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

paba2015

Nuovo Utente
15 Dic 2016
7
0
1
53
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.369
338
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
53
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

  • 20161216_133058b.jpg
    20161216_133058b.jpg
    646,7 KB · Visite: 237
  • Untitled-1.jpg
    Untitled-1.jpg
    123,6 KB · Visite: 249

Max 1

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

WmbertSea

Utente Attivo
28 Nov 2014
201
32
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
53
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
53
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

  • 02.jpg
    02.jpg
    140,3 KB · Visite: 292

paba2015

Nuovo Utente
15 Dic 2016
7
0
1
53
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

  • 03.jpg
    03.jpg
    129,4 KB · Visite: 216

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.369
338
83
Hai un messaggio privato
 

paba2015

Nuovo Utente
15 Dic 2016
7
0
1
53
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>.
 
Discussioni simili
Autore Titolo Forum Risposte Data
Domenico_Falco1 [Javascript] [HTML] Campi form con sfondo imposto dal browser Javascript 5
L [HTML] problema sfondo tutto schermo con immagine HTML e CSS 1
L [HTML] Problemino con le immagini di sfondo HTML e CSS 4
R [HTML] sfondo header HTML e CSS 0
A [HTML] Sfondo responsive - problema specifico HTML e CSS 5
asevenx [HTML]Problemi float e adattamento sfondo HTML e CSS 2
D [HTML] Sfondo-Background fisso ma non troppo con effetto in movimento HTML e CSS 4
Fuego2806 Stampare dati Form su immagine di sfondo con html HTML e CSS 1
Fuego2806 [PHP] Stampare dati Form su immagine di sfondo con html PHP 70
S Se voglio far scorrere le immagini dello sfondo di una pagina (oviamente html) come faccio? HTML e CSS 1
D inserire sfondo con l'html HTML e CSS 1
G Appicazione HTML per inserimento dai in Database Access Microsoft HTML e CSS 0
W visualizzare solo file html e sottocartelle di una cartella PHP 1
C Dopo chiusura del tag php la stringa html va a capo PHP 1
G img html HTML e CSS 3
M Come fare un countdown in HTML? HTML e CSS 4
D Stampa a video in altra pagina html Database 3
A inserire variabile php colore in div html PHP 2
F Tv in html Offerte e Richieste di Lavoro e/o Collaborazione 1
N Script elenco file HTML HTML e CSS 5
L salvare codice html in mysql PHP 3
Cosina htaccess redirect 301 senza estensione html Web Server 6
E Errore di lettura php in html PHP 8
M HTML e PHP Offerte e Richieste di Lavoro e/o Collaborazione 3
C Form email php su pagina index.html? PHP 21
Shyson Meglio Javascript o HTML? Javascript 4
P inserimento icone social tramite html HTML e CSS 1
Z Mod_rewrite da HTML in PHP PHP 3
L Collegare un form html ad un database access Javascript 2
P HTML integrazione wordpress HTML e CSS 0
C [RISOLTO]Inserimento variabile php in input html PHP 20
L Eliminare estensione .html HTML e CSS 9
max1974 html in tooltip Javascript 0
C Risalire al php da html PHP 27
felino Esportare tabella HTML in PDF, quale libreria usare? Javascript 1
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1
L [RISOLTO] Stampa a video risultato count in html PHP 13
V Servizio design pagina web e download in self contained html file Discussioni Varie 1
F [PHP] Form html PHP 2
G Aiuto HTML, collegamento con un bottone a una <div> di un' altra pagna HTML e CSS 5
R Aiuto sito html Offerte e Richieste di Lavoro e/o Collaborazione 3
M Estrarre dati da una select HTML PHP 3
G FORM HTML E PHP PHP 0
max1974 [HTML] Columns grid on modal form HTML e CSS 0
tomorc [HTML] Problema con scroll bar (risolto) HTML e CSS 0
F [PHP] [HTML] Tabella cambia pagina responsive PHP 8
M [PHP] [HTML] Centrare in verticale un pulsante in una tabella PHP 3
S [HTML] Effetto su testo da togliere HTML e CSS 0
M [PHP] Istruzione "echo" all'interno di codice html PHP 2
D [HTML] Aiutino su costruzione tabella :) HTML e CSS 3

Discussioni simili