Quindi una delle cose che potresti aver notato mentre stai attraversando un altro
codice è che a volte quando fai confusione con l'altezza e la larghezza di un elemento.
Scoprirai che non è più abbastanza grande da contenere tutto il testo che
volevi mostrare.
Quindi, cosa puoi fare quando il contenuto non si adatta più
all'interno della scatola che hai creato con la tua altezza e larghezza.
Bene, puoi usare un overflow di proprietà per determinare come le persone saranno in grado di
accedere a quel contenuto, o se saranno anche in grado di accedervi a tutti.
I quattro valori per l'overflow,
includono visibile, il che significa fondamentalmente se hai disegnato una scatola.
E c'e' un sacco di testo dentro,
il testo verra' fuori dagli schemi.
Quindi, non importa cosa, il contenuto è visibile anche se va al di fuori delle righe.
Hidden fa praticamente il contrario.
Dice, [SUONO] se hai qualcosa dentro questa scatola ed è troppo grande,
non c'è più.
Non si vede.
Ora questa non è una grande idea, perché causerà problemi
se l'utente aumenta la dimensione del carattere sul proprio browser.
Quindi se hai fatto una specie di scatola di 600 x 800 pixel,
e pensi, oh questo sarà fantastico, nessun problema.
Chiunque sarà in grado di leggerlo.
Cosa succederà se qualcuno entra e aumenta la dimensione del carattere?
La casella non diventa più grande, ma il testo lo fa, quindi
potrebbe non essere in grado di visualizzare il contenuto.
Quindi una terza opzione è quella di dare lo scorrimento dell'overflow.
E ciò che farà è in realtà darà una
barra di scorrimento orizzontale e verticale all'elemento.
Anche se è solo un paragrafo, all'improvviso il tuo paragrafo ha una barra di scorrimento in modo che
le persone possano vedere tutto ciò che c'è in esso.
Il valore finale è auto, e quello che fa è che dice, oh,
aggiungerò solo barre di scorrimento se necessario.
A seconda di come la persona sta visualizzando il sito in questo momento.
Ho intenzione di andare avanti e
elencare alcune risorse per mostrarvi alcuni esempi di come appare l'overflow.
Ma per ora, andremo avanti e continueremo ad andare avanti.
Perché quello che volevo condividere con voi è questa idea di altri valori di visualizzazione.
Anche in questo caso i browser cambiano sempre.
HTML5 e le versioni future cambiano sempre e
stanno cercando di aggiungere nuovo supporto.
Il problema è quando vedi questi nuovi
strumenti interessanti che non funzionano sempre su tutti i browser.
Quindi inline, blocco inline, blocco e nessuno funzioneranno ovunque.
Ma qui ci sono alcuni altri che stanno lentamente iniziando a ottenere l'accettazione.
E quelli sono tavolo, griglia e flexbox.
Per la griglia e la flexbox, lascio a te giocare con esso.
Ma volevo mostrarvi un esempio di dove molti dei miei studenti trovano l'
esposizione del tavolo davvero utile. Il
modo in cui una visualizzazione della tabella funziona è che non si crea una tabella reale con il
codice HTML, né si ha la tabella dei tag.
Ma stai dicendo al tuo browser che vuoi strutturarlo come se fosse un tavolo.
Quindi, dovresti rendere qualsiasi tipo di elemento contenente visualizzazione: tabella.
E poi tutto ciò che vuoi allineare in belle colonne,
useresti display: table-cell.
Quindi questo suona molto confuso, quindi
volevo assicurarmi di averti dato un esempio da portare avanti con me.
Quindi ho qui un codice che è fondamentalmente solo un div,
un paio di div con alcuni paragrafi in esso.
E quello che volevo fare era assicurarmi che non avessero
tutti gli stessi contenuti.
Come puoi vedere, ognuno dei div è ora uno accanto all'altro perché
abbiamo detto che non vogliamo che siano sotto l'altro.
Ma non e' proprio quello che speravi che fosse.
Quindi andiamo avanti e proviamo ad aggiungere quel galleggiante a sinistra.
Salva, vado avanti qui a rinfrescarmi.
E vedete, sembra un po' meglio.
Quindi, questo è fantastico perché volevamo che tutto fosse l'uno accanto all'altro.
Ma quello che faro' ora e' mostrarti qualcosa che non funziona
molto bene.
E questa è l'idea di quando lo ridimensionerò.
Ora puoi vedere questa idea di che l'overflow potrebbe essere davvero importante perché
ora le cose stanno andando al di fuori dei div stessi.
Inoltre, non ho davvero alcun tipo di margine tra di loro.
Quindi andiamo avanti e aggiungiamo overflow, Hidden,
o scroll, solo per mostrarvi di cosa stavo parlando lì per un secondo.
Vado avanti e lo rinfregio.
E ora potete vedere che tutto è contenuto all'interno della casella di contenuto, e
io posso effettivamente entrare qui e posso scorrere ognuno di questi.
In realtà non sono un grande fan di questo,
perché non mi piace che la gente abbia bisogno di sapere che possono scorrere.
Quindi proveremo qualcosa di nuovo qui, invece quello che ho intenzione di fare è impostare
la larghezza sul 30%, e ho intenzione di andare avanti e utilizzare il blocco in linea.
E diamo un'occhiata a come appare adesso.
Devo ricordare, sto usando un nuovo foglio di stile, quindi ho bisogno di entrare e
cambiare il mio HTML, quindi sto usando quel foglio di stile.
Il numero di volte in cui stavo venendo con questi esempi per te in cui ho dimenticato di
cambiare il foglio di stile, o l'ho dimenticato e chiamato sbagliato era davvero imbarazzante.
Quindi spero che eviterai gli stessi problemi che ho avuto io.
Qui vado a rinfrescarlo.
Si può vedere che questo non è lo sguardo che stiamo sperando.
Si ridimensiona, ma non sta facendo quello che vogliamo perché ognuno ha la
sua particolare altezza perché vogliamo davvero che si adatti a questo.
Qui è dove entra la cella della tabella.
Cambierò il mio display da blocco inline a cella di tabella.
E per una volta, quando andro' a
rinfrescarmi, capiro' davvero perche' non funziona.
Ma voglio mostrarti che quando ho premuto «Refresh «sembra davvero bene
qui, perche' e' stato fatto in modo che tutto funzioni.
Ora, a seconda del browser in cui sei, questo potrebbe non funzionare.
Perché quello che vuoi veramente dire è, se ho intenzione di andare avanti e
fare questa cella di tabella usata, non dimenticare di andare nel tuo corpo e dire display.
Va bene e mi aggiorno e sarà lo stesso,
sarà solo uno stile di codifica migliore.
Ora, cercherò di mettere un sacco di esempi di codifica qui,
in questo corso CSS, in modo da poter giocare con esso.
Ma, non posso sottolineare abbastanza che, a volte non funzionerà esattamente allo stesso modo
per te, perché potresti usare un browser diverso.
Potresti utilizzare lo stesso browser, ma una versione diversa.
La cosa più importante è che tu entri lì,
e continui a provare questi nuovi valori, vedendo cosa succede e giocando con esso.
Quando arriva il momento per il tuo progetto finale, questo è quando essere veramente specifico per
assicurarsi che tutto sembra buono su ogni browser.
L' ultima cosa che voglio menzionare molto rapidamente è stata questa idea di visibilità.
E specifica se un elemento verrà visto o meno da un utente.
Ora ne abbiamo parlato prima quando ho parlato di display none, ma
quello che va avanti la visibilità è che si può effettivamente vedere che lo spazio è stato lasciato per esso.
Non c'e' niente li'.
Pertanto, quando si utilizza la visibilità, le opzioni sono visibili, nascoste o
compresse se si utilizzano le tabelle.
Se vedi questo e ti stai chiedendo quale sia la differenza tra display e
visibilità.
Basta ricordare che con la visualizzazione di nessuno
il browser agisce come se non fosse nemmeno lì.
Tu non vedi niente.
Con la visibilità nascosta, il browser lascerà lo spazio
che quell'elemento occuperebbe, semplicemente non lo mostra.
Quindi, finalmente, andiamo avanti e rivediamo.
Display è solo uno dei tanti strumenti che useremo per
posizionare gli elementi sulla tua pagina.
Il design iniziale, decidere come vuoi che la tua pagina abbia l'aspetto prima di iniziare
a codificare, renderà le cose più facili.
Non codificare pensando che voglio usare il design float giusto, e poi decidi oh,
dovrò usare float proprio qui.
Utilizzare tutti i diversi strumenti che abbiamo,
come ispezionare elemento, per vedere le diverse opzioni.
E rendera' la tua vita di codifica molto piu' semplice.
Vogliamo evitare di salvare l'aggiornamento, salvare l'aggiornamento.
Invece, usa questi strumenti e
scoprirai che stai prendendo decisioni davvero buone nel tuo design e nel tuo codice.
Grazie.