• User Attivo

    inserire altri contenitori in contenitore principale

    Salve a tutti:)
    Ho il seguente contenitore

    #contenitoremuro1
    {

    top: 2%;
    background-color: #DDDDDD;
    width: 70%;
    height: 10%;
    margin-top:0%;
    margin-left:15%;
    margin-right:15%;
    margin-bottom:1%;

    }
    la mia domanda è...come faccio per piazzare altri contenitori all interno di questo?Diciamo che dovrei sezionare questo contenitore in tre parti...la parte di sinistra mi servirebbe un 10% di larghezza del totale..la parte centrale un 50%..e la parte sinistra un 10%..e possibile fare ciò inserendo altri contenitori all interno del primo?

    La parte centrale però siccome e riservata a del testo che varia sempre dovrebbe in altezza adattarsi al testo che viene inserito...

    Grazie


  • Super User

    Ciao Carlitos1982 🙂

    Allora innanzitutto una cosa che ti consiglio è quella di ottimizzare il codice css. Quando si parla di proprietà della stessa "famiglia", come nel caso dei tuoi 4 tipi di margini, puoi compattarli in questo modo:
    [INDENT]```
    margin:0 15% 1% 15%;

    [/INDENT]Che può diventare anche
    [INDENT]```
    margin:0 15% 1%;
    

    [/INDENT]L'ordine è in senso orario ed è applicabile anche ad altre famiglie come "border-width, padding, etc" nel seguente modo

    margin: top right bottom left;
    

    Detto questo passiamo alla tua richiesta.
    Inserisci tre div all'interno di #contenitoremuro1.

    [html]
    <div id="contenitoremuro1">
    <div id="sinistra"></div>
    <div id="centrale"></div>
    <div id="destra"></div>
    </div>
    [/html]

    Elimini la proprietà "height" in modo che non sia obbligato a rispettare una dimensione fissa a e gli aggiungi un "overflow:hidden;".

    Prosegui in questo modo:

    
    #sinistra,#centrale,#destra{
    float:left;
    }, #destra{width:10%;}
    #centrale{width:50%;}
    
    

    Occhio che ti rimane a disposizione un 30% di spazio poichè la percentuale dei contenitore interni si basa allo spazio che gli da il genitore meno il padding interno.

    Quindi puoi modificare le dimensioni ad esempio in: 20% 60% 20%;

    Ciao!


  • User Attivo

    Perfettissimo....ho capito;)
    Scusami una cosa con overflow hidden il testo in eccesso non sarà nascosto giusto?Credo di no perchè al contenitoremuro1 ho tolto il valore relativo all altezza..


  • Super User

    Se attribuisci un'altezza fissa l'overflow ti nasconderà il testo in eccesso.
    Ma in questo caso la sua funzione è di tutt'altra natura.

    Questo è un metodo per permettere al contenitore di "sentire" la presenza degli elementi in float al suo interno e quindi di allungare anche se stesso in base al contenuto presente al loro interno.

    Un altro metodo è quello di inserire un ulteriore div di chiusura (vuoto) con proprietà "clear:both" poco prima della chiusura del div contenitoremuro1.
    Però come vedi è un uno spreco inutile di tempo e codice.

    Con firebug puoi notare la differenza nella sostanza.
    Prova ad analizzare l'elemento contenitore (inserisci naturalmente un pò di testo all'interno dei div in float) senza la proprietà overflow e poi prova nuovamente attribuendogliela.

    Un'altra prova che puoi fare è quella di dare uno sfondo colorato al tuo #contenitoremuro1 e fai la stessa prova sopracitata.