CSS: il Layout
Lezione 05 In questa lezione parleremo del codice CSS per il Layout di una pagina web.
In ambito editoriale, così come nel mondo informatico, è impossibile non pensare al layout , ossia alla collocazione dei vari elementi grafici nella pagina ma anche all’impaginazione più in generale. Il layout può essere visto come l’intelaiatura grafica di una pagina web. Inoltre, provate a pensare ad un libro che avete nella vostra libreria, oppure ad una rivista acquistata in edicola: avete mai visto una virgola penzolante o un titolo solitario col testo che si perde nelle pagine successive? Bene, se è accaduto, vuol dire che non vi è stata una corretta impaginazione. Più si ha cura e rispetto della punteggiatura, della scelta del font, del posizionamento delle immagini e della grafica in generale, più la pagina apparirà leggibile e ben curata. Pertanto il codice CSS potrà aiutarci a disegnare il layout più adeguato alla nostra pagina web.
Dopo aver trattato il box-model, passiamo ad analizzare le posizioni degli elementi di una pagina web, iniziando con la proprietà float !
Quando un elemento è floated, non segue più il flusso di default, bensì si ritrova “fluttuante” alla sinistra o alla destra del suo elemento genitore.
/* file styles.css */
img {
float: right;
margin: 10px;
}
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p><img src="https://www.ambrix.net/wp-content/uploads/2019/05/css-118-569410.png">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> </body> </html>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
In questo esempio è evidente come l’immagine venga posizionata alla destra del testo. Se lo si usa in questo modo, float esprime tutta la sua versatilità, racchiudendo il testo del paragrafo attorno all’immagine.
Ma cosa accade quando più elementi sono floted? Se inseriamo del codice html contenente due immagini, queste vengono visualizzate una sopra e l’altra sotto (come in una pila), in alternativa se utilizziamo il float possiamo affiancarle l’una all’altra. Tuttavia, ci sono degli accorgimenti di cui tener conto.
/* file styles.css */
.box {
width: 100px;
height: 100px;
float: left;
}
.navy { background: navy; }
.green { background: #b7d84b; }
.red { background: red; }
.purple { background: purple; }
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="navy box"></div> <div class="green box"></div> <div class="red box"></div> <div class="purple box"></div> </body> </html>
Nell’esempio di sopra abbiamo definito quattro box di colore diverso. Questi sono visualizzati allineati in fila e, a seconda delle dimensioni della finestra del browser, continuano in una nuova riga se non c’è abbastanza spazio.
/* file styles.css */
.box {
width: 100px;
height: 100px;
}
.navy { background: navy; }
.green { background: #b7d84b; }
.red { background: red; }
.purple { background: purple; }
.floated { float: left; }
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="navy floated box"></div> <div class="green floated box"></div> <div class="red box"></div> <div class="purple box"></div> </body> </html>
In questo caso, i riquadri blu e verde sono floated, mentre non lo sono gli altri due. Nel rendering, pertanto, non ritroviamo il box rosso, che è in realtà nascosto dietro il riquadro blu (è come se fosse ad un livello sottostante). I riquadri rosso e viola si comportano come se gli altri non ci fossero. Il risultato è quello di sopra.
A questo punto, come possiamo far riapparire il box rosso? Semplice, possiamo ricorrere alla proprietà clear per riposizionarlo nel flusso normale.
/* file styles.css */
.box {
width: 100px;
height: 100px;
}
.navy { background: navy; }
.green { background: #b7d84b; }
.red { background: red; }
.purple { background: purple; }
.floated { float: left; }
.cleared { clear: left; }
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="navy floated box"></div> <div class="green floated box"></div> <div class="red cleared box"></div> <div class="purple box"></div> </body> </html>
Wow, è riapparso! Impostando la proprietà clear: left, diciamo al riquadro rosso che deve posizionarsi sotto qualsiasi elemento che utilizza float: left. Può sembrare “l’arte dei pazzi”, almeno a me inizialmente ha dato qualche piccolo problemino di comprensione, tuttavia è sufficiente fare qualche prova per rendersi conto di ciò che accade. Così, se applichiamo la proprietà clear all’elemento finito nel limbo, possiamo fare in modo che questo si accorga degli elementi che fluttuano e venga quindi visualizzato. Provare per credere!
Fatte le opportune considerazioni, possiamo affermare che la proprietà float risulta utilissima a creare il layout sfruttanto il codice CSS. Detto ciò, passiamo all’opera: proviamo il nostro primo layout di pagina per una pagina web.
/* file styles.css */
#header {
background: #44accf;
height: 50px;
}
#content {
background: #b7d84b;
width: 75%;
height: 500px;
float: left;
}
#navigation {
background: #e2a741;
width: 25%;
height: 500px;
float: right;
}
#footer {
background: #ee3e64;
height: 50px;
clear: both;
}
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div id="header"></div> <div id="content"></div> <div id="navigation"></div> <div id="footer"></div> </body> </html>
Great!!! Semplice ed essenziale. La struttura della nostra prima homepage è bella e fatta. L’intestazione (header) dove inserire il titolo della pagina, il corpo centrale (content), la barra di navigazione (navigation) e il footer per le info e i credits a piè di pagina. Tuttavia, le cose si complicano se vogliamo creare qualcosa di più sofisticato.
Per creare layout più complessi, dobbiamo introdurre la proprietà position , che consente di decidere la modalità di posizionamento del riquadro di un elemento. Per default, un elemento segue il flusso normale di visualizzazione, in quanto non è posizionato in alcun modo speciale.
Analizziamo quindi, i principali valori da attribuire alla proprietà position. Se impostiamo la posizione su relative , attribuiamo lo spostamento di un riquadro relativamente alla posizione che occupa all’interno del flusso normale del documento html. Tale spostamento non influenza la posizione degli altri elementi che lo precedono o lo seguono.
/* file styles.css */
.box {
background: #44accf;
width: 200px;
height: 200px;
position: relative;
left: 20px;
}
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="box"></div> </body> </html>
Al contrario, gli elementi collocati in modo absolute non seguono il flusso normale, e ciò vuol dire che non si preoccupano veramente degli altri elementi. Con absolute un riquadro è sollevato dal flusso normale di renderizzazione e può essere posizionato in qualsiasi punto della pagina HTML, indipendentemente dalla posizione degli altri elementi, che si comportano come se non esistesse. La sua posizione è definita in modo assoluto rispetto al suo blocco contenitore oppure all’elemento radice stesso (generalmente l’elemento html ma per alcuni browser l’elemento body).
Altro valore molto utile da attribuire alla proprietà position, è fixed . Con esso il box è posizionato secondo le stesse modalità viste per absolute, ma con la differenza che in questo caso il posizionamento si adatta all’area di contenuto principale della finestra del browser. Scorrendo o di ridimensionando la pagina, l’elemento rimane fisso e ancorato alla posizione in cui è stato posizionato.
In conclusione vediamo un altro modo di utilizzo dei margini: possiamo usarli per posizionare gli elementi. Infatti, se impostiamo i margini di un elemento su auto , diciamo all’elemento di occupare uno spazio nullo in top e bottom, mentre si può occupare l’intero spazio disponibile sul lato destro e sinistro.
/* file styles.css */
.bboxed {
background: #44b3c2;
width: 150px;
margin: auto;
}
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p class="bboxed"><strong>Mettimi al centro dell'attenzione ...</strong></p> </body> </html>
Mettimi sempre al centro dell’attenzione …
Come risulta evidente, abbiamo sfruttato tutto lo spazio laterale del riquadro, lasciando zero pixel in alto e in basso
Dopo questa miniguida riguardante i layout con CSS, nella prossima lezione parleremo di Selettori Universali e Pseudoclassi.
