Max La Ferla | Web Designer & Sviluppo Codice

Pubblicato da: Max
In data: 16 Dic 2021

Tempo di lettura: 5 min.

Template html/css

Ciao! oggi vedremo come realizzare un template html/css, ideale per piccoli progetti, ma che con piccole modifiche potremo utilizzarlo anche per progetti più corposi.

Mettiamoci subito a lavoro!

Innanzitutto creiamo come sempre la nostra pagina minima html.

Rimuoviamo l’h1 di prova, e inseriamo all’interno dell’header, due contenitori: uno per il logo e l’altro per il menù

Passiamo al foglio di stile.

Resettiamo margini e padding di body e html, e stilizziamo l’header.

Stilizziamo i due elementi all’interno dell’header:

Assegniamo a header__logo e header__menu, le stesse dichiarazioni di stile.

Dopodiché scriviamo una dichiarazione per header__menu, assegnandogli una larghezza del 90%, in modo che occupi la maggior parte del suo contenitore header.

Assegniamo Float:right al menù e Float:left al logo. Dopodiché aggiungiamo la proprietà clearfix assegnandola al contenitore header dei due elementi, per evitare che collassi.

Infine assegniamo a tutti gli elementi la proprietà box-sizing con valore border-box.

Creiamo in html la struttura per il footer. Passiamo al foglio di stile e inseriamo la regola footer con le dichiarazioni proprietà:valori che ci occorrono.

Come possiamo notare, il footer risulta attaccato all’header, com’è giusto che sia, in quanto segue il normale flusso della pagina,(inserito nell’html subito dopo l’header, il browser lo visualizza dopo l’header, fino a quando tra di loro non inseriamo altri elementi). Ma noi dobbiamo fare in modo che il footer, occupi sempre la parte inferiore della pagina, e stia sempre li anche in assenza di contenuti.

Per ottenere che il footer stia sempre in fondo pagina, stilizziamo il body, assegnandogli la proprietà display con valore flex, gli diamo un altezza minima del 100 % del viewport, e assegniamo alla proprietà flex-direction il valore column.

A questo punto creiamo una classe main-content che assegneremo in html al contenitore principale dei nostri contenuti, che sarà un tag section: <section class=”main-content”>qui i nostri contenuti</section>

Nel foglio di stile, scriviamo una regola con selettore main-content a cui assegneremo la dichiarazione proprietà:valore –> flex:1 in questo modo: .main-content{flex:1;}

Bene! Adesso che il nostro footer è posizionato correttamente in fondo alla pagina, passiamo ai contenuti.

Creiamo in html un contenitore main posizionato all’interno della section, e al suo interno inseriamo 3 section: una con classe con classe content, una con classe sidebar, e l’altra con classe widget.

Passiamo al foglio di stile e stilizziamo le tre section appena create.

Completiamo il nostro template, inserendo all’interno delle tre section un paragrafo p in ognuna di esse con un pò di testo, per provare come si comporta.