Esercitazione 7
In questa esercitazione mostreremo il codice degli esempi mostrati nella lezione in modo che lo studente possa ampliarli o modificarli a piacere.
Esercizio 1
Esempio di posizionamento statico.
Il posizionamento statico è adeguato per la costruzione della maggior parte dei documenti web a patto di saper utilizzare la proprietà float.
La property float, applicata ad una div posta all'interno di un'altra div deve essere utilizzata in congiunzione con la property width che
consente di dimensionare l'elemento.
float può assumere i seguenti valori:
La property float non è ereditaria ma, una volta assegnata ad un elemento generico, permane fin tanto che non ce ne liberiamo con la property clear.
La property clear può assumere i seguenti valori:
Padroneggiare la propery float con il posizionamento statico ci consente di trovare buone soluzioni
di presentazione. Ma in certi casi non basta e dovremo ricorrere agli altri valori di position.
Non ho resistito alla tentazione di assegnare bordi e colori a qualche contenitore. L'ho fatto per evidenziare gli elementi flottanti.
Il mio consiglio è di studiare molto bene questa pagina, in quanto le soluzioni qui adottate sono applicabili ad un gran numero
di situazioni. Il modo migliore per farlo è quello di scaricarne il codice ed esaminarlo attentamente. Proverò comunque a descriverlo a parole.
- Le proprietà di posizionamento riguardano il posizionamento degli oggetti (elementi HTML> all'interno del loro più immediato contenitore.
- Quasi tutti gli elementi di HTML possono contenere qualche altro elemento, ma personalmente, in applicazione di un principio di semplicità, scelgo di applicare le
proprietà che hanno a che fare con il posizionamento all'elemento div, l'elemento principe fra quelli deputati al "contenimento". Questa è una mia
scelta personale che, comunque, consiglio come primo approccio al problema.
- Esempio di posizionamento statico è confinato all'interno di una div anonima che ho reso visibile assegnandole un colore di background. Non avando
assegnato alcun valore a position, questa si disporrà staticamente rispetto al suo immediato contenitore che è l'elemento body. La sua ampiezza (width) è ereditata
dal body.
- Segue un elemento p, che occupa tutta la prima riga in quanto elemento di tipo block per il quale non ho specificato l'ampiezze, e che pertanto eredita dalla div che lo contiene.
- Il secondo elemento è ancora una div generica,sfondo giallo e bordi arancioni, posizionata staticamente, alla quale ho assegnato un ampiezza inferiore rispetto alla div che la contiene,
inoltre l'ho dichiarata flottante a sinistra (float:left;). Questo fa si che essa si disporrà nella div contenitrice il più a sinistra possibile, spostando alla sua destra gli elementi
che la seguono. E' come se in una vasca (la div più esterna) adagiassi una scatola galleggiante ancorata sul lato sinistro della vasca e poi inserissi altre vaschette (i paragrafi) nell'acqua.
- Dopo un altro paragrafo ho aggiunto un nuova div (quella con i valori della property clear), anche questa flottante a sinistra.
- Seguono due paragrafi che si dispongono a destra della seconda div flottante.
- Quindi nel paragrafo successivo ho cancellato la proprietà float assegnando ad esso la property clear:both; (ma sarebbe bastata la clear:left;).
Questo esempio è inserito negli esercizi della lezione. Potrete modificarlo a piacere per verificare l'effetto delle singole proprietà sull'aspetto del documento.
Esercizio 2
Esempio di posizionamento relativo
Il posizionamento relativo ci consente di disporre a nostro piacere elementi all'interno di un contenitore. Il rischio è quello di sovrapporli. E la possibilità di
ingarbugliare tutto aumenta se utiliziamo le proprietà di offset congiuntamente a quelle di float.
Infine il consiglio che mi sento di dare è che se in un contenitore usiamo il posizionamento relativo dovremo farlo per tutti gli elementi.
Nell'esempio che segue mi limiterò ad applicare il posizionamento relativo con le proprietà di offset a contenitori di tipo div(bordati di arancio)
disposti in div padre (color beige, bordata di verde)
La property left, top, right, bottom, applicate ad un oggetto con position:relative consentono di modificare la posizione dello spigolo superiore sinistro
del box contente l'oggetto, secondo i valori assegnati alle suddette proprietà.
A left, top, right e bottom possono essere applicati valori di offset espressi con le seguenti unità di misura:
- x.x em: multipli del font-size ereditato dal contenitore;
- x.x px: multi pli del pixel
- x.x%: % dell'ampiezza, width, del contenitore (solo per left e right
- .....
A questo contenitore sono state applicate le seguenti proprietà di stile:
position:relative; width:33%; background-color:yellow; border-style:solid; border-color:orange;
Alla div contenente questo paragrafo sono state assegnate le seguenti proprietà di stile:
position:relative; left:35%;top:-20em; width:33%; background-color:yellow; border-style:solid; border-color:orange;
Cosa significa top:-20vh;?
significa che lo spigolo in alto a sinistra del contenitore deve essere spostato in alto in ragione del 20% dell'ampiezza verticale
dello schermo rispetto alla posizione che avrebbe assunto nel caso di posizionamento statico.
A questo contenitore sono state assegnate le seguenti proprietà di stile:
position:relative; left:35%;top:-20vh; width:33%; background-color:yellow; border-style:solid; border-color:orange;
Ma quali sono le proprietà di stile assegnate al contenitore di tutti questi contenitori? Sono:
background-color:beige; border-style:solid; border-color:green; height:80vh;.
Come esercizio provate ad eliminare la property height:80vh;. Dovreste essere in grado di capire il perchè dell'effetto che otterrete.
Per concludere, a questo contenitore sono state assegnate le seguenti proprietà di stile:
position:relative; left:70%;top:-40em; width:27%; background-color:white; border-style:solid; border-color:orange;
Esercizio 3
Esempio di posizionamento assoluto
La property left, top, right, bottom, applicate ad un oggetto con position:absolute consentono di modificare la posizione dello spigolo superiore sinistro
del box contente l'oggetto, secondo i valori assegnati alle suddette proprietà.
A left, top, right e bottom possono essere applicati valori di offset espressi con le seguenti unità di misura:
- x.x em: multipli del font-size ereditato dal contenitore;
- x.x px: multi pli del pixel
- x.x%: % dell'ampiezza, width, del contenitore (solo per left e right
- .....
A questo contenitore sono state applicate le seguenti proprietà di stile:
position:absolute; top:1em; left:1em; width:33%; background-color:yellow; border-style:solid; border-color:orange;
Alla div contenente questo paragrafo sono state assegnate le seguenti proprietà di stile:
position:absolute; left:36%; top:1em; width:33%; background-color:yellow; border-style:solid; border-color:orange;
Cosa significa top:1em;?
Significa che lo spigolo in alto a sinistra del contenitore deve essere spostato in basso in ragione di una volta la misura del font-size ereditato dal contenitore dell'oggetto.
A questo contenitore sono state assegnate le seguenti proprietà di stile:
position:absolute; left:36%; top:10em; width:33%; background-color:yellow; border-style:solid; border-color:orange;
Ma quali sono le proprietà di stile assegnate al contenitore di tutti questi contenitori? Sono:
position:relative; background-color:beige; border-style:solid; border-color:green; height:80vh;.
Come esercizio provate ad eliminare la property height:80vh;. Dovreste essere in grado di capire il perchè dell'effetto che otterrete.
Per concludere, a questo contenitore sono state assegnate le seguenti proprietà di stile:
position:absolute; left:71%; top:1em; width:27%; background-color:white; border-style:solid; border-color:orange;
Esercizio 4
Esempio di posizionamento fisso
Come esempio, ho adottato il posizionamento fisso per l'intestazione di questa lezione.
Esercizio 4
Esempio di posizionamento sticky
Immagine fissa nel contenitore.
Come esempio, ho adottato il posizionamento sticky per la foto di questa lucertola. In realtà non si tratta di una lucertela ma di un ramarro, che è una lucertola
un po più grande. Nello sviluppare questo esempio mi sono reso conto di non aver parlato della propietà di stile overflow.
Probabilmente non ho parlato di diverse altre propietà. La ragione, probabilmente, è che mi sto' concentrando sugli aspetti che è più difficile apprendere da soli.
Anzi, per essere onesti, di quelli che sono stati più difficili da apprendere per me. E, per essere sinceri, ci sono ancora diversi aspetti del posizionamento che
vorrei approfondire. Quali sono? Lo scoprirete, probabilmente, scaricando gli esercizi della lezione e modificando gli esempi.
Appunti
Questa sezione è destinata a contenere gli appunti personali del lettore.