Ciao a tutti e benvenuti in questa nuova parte del corso per front-end developer su come affiancare diversi elementi orizzontalmente in HTML e CSS. Vediamo subito un esempio di cosa andremo a creare:
Come potete vedere dall’immagine andremo a creare una serie di 3 div, che verranno allineati uno a fianco all’altro. Ottenere questo effetto è semplicissimo, quindi senza altre esitazioni andiamo a vedere come ottenerlo.
Come allineare dei div che sono uno sopra all’altro
Come potete immaginare per creare questi tre elementi avremo bisogno di 4 div:
- 1 div per contenere il tutto
- 3 div per le varie sezioni (skills)
Il codice HTML per realizzare questo layout è del tipo:
<div id='skills-section'><!-- solito container --><div class="container"><h3>I miei servizi</h3><div id='skills'><div class="skill"><h4>Web design</h4><p>Lorem</p></div><div class="skill"><h4>Web marketing</h4><p>Lorem</p></div><div class="skill"><h4>Branding</h4><p>Lorem</p></div></div></div> </div>
Se andiamo però a visualizzare questo codice nel nostro browser noteremo che i tre div sono posti uno sopra l’altro. Questo succede perché in HTML, la regola CSS default per il layout dei div è:
display: block;
Quando un elemento ha display block, questo occuperà una intera linea nel browser non permettendo ad altri elementi di posizionarsi sulla stessa linea.
Per ora i nostri div sono posizionati in questo modo:
allineare div uno a fianco all’altro con CSS
Adesso andiamo passiamo al codice CSS.
Questo è il codice CSS utilizzato per questo esempio (non includendo regole non pertinenti):
#skills-section{
text-align: center; /*contenuto centrato*/
margin-top: 50px; /*spazio superiore*/
}
.skill{
/*larghezza dei div skill, in pagina ne abbiamo 3 quindi 100 / 3
lasciando un po' di spazio per i margini
*/
width: 28%;
display: inline-block; /*questi div saranno posti uno a fianco all'altro*/
margin: 2%; /*un po di spazio tra i div*/
color: #2d3e50;
}
Analizziamo questo codice.
La regola più importante per ottenere l’effetto dei div allineati orizzontalmente è:
display: inline-block;
Questa regola viene applicata a tutti gli elementi con classe = skill, che abbiamo assegnato ai div da allineare. (vedere codice HTML)
Gli elementi con display: inline-block vengono posizionati sulla stessa linea a patto che ci sia abbastanza spazio. Per questo dobbiamo specificare una larghezza per i div, in modo da farli entrare tutti sulla stessa linea.
Siccome abbiamo 3 div da allineare, possiamo avere una larghezza di ~30%
Il motivo per cui andiamo ad utilizzare una larghezza di 28% dello schermo e non 33% (100 / 3) è perché dobbiamo lasciare un po’ di spazio per i margini.
Se non teniamo contro dei margin, probabilmente non vi sarà abbastanza spazio sullo schermo per allineare il tutto, ed uno dei div andrà a posizionarsi sotto agli altri.
Ora possiamo applicare alcune regole di stile e ci siamo! Abbiamo ottenuto dei div allineati orizzontalmente uno affianco all’altro. Aggiungiamo questo codice a quello delle lezioni precedenti ed otteniamo una cosa del genere.
Grazie per aver seguito questa parte della guida per font-end developer su come affiancare dei div utilizzando HTML e CSS. Se avete qualche domanda su questa guida o problemi con la codifica in generale, commentate in basso e vi risponderò immediatamente :)
Ci vediamo alla prossima parte del corso :)