- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- inserire altri contenitori in contenitore principale
-
inserire altri contenitori in contenitore principale
Salve a tutti:)
Ho il seguente contenitoretop: 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
-
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!
-
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..
-
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.