Guida base al CSS

Guida Topmanga

TEMPLATE CSS FREE - pag 3



Finiamo di impostare il CSS per creare facilmente un sito responsive a tre colonne.
Ricordati di seguire e di copiare tutti i codici in ordine, se sei arrivato qui in un altro modo, ti consiglio di ritornare alla pagina iniziale della spiegazione di questo template in HTML e CSS per scoprire come si fa un layout responsive a tre colonne con header e footer per il tuo sito. Vai qui

Finiamo di impostare il CSS, copia questo codice che ti permetterà di far finire l'effetto float dopo le colonne.

.row:after {
    content: "";
    display: table;
    clear: both;
}

Impostiamo lo stile del footer

.footer {background-color: #f1f1f1; padding: 10px;  text-align: center;}
Al footer, come all'header, assegnamo uno sfondo che puoi cambiare a tua scelta, un padding e impostiamo che il testo in esso contenuto abbia un allineamento centrale.
Finiamo la parte del CSS con questo ultimo codice:

@media (max-width: 600px) {.column { width: 100%; }}

</style>
</head>
che ci permette di rendere le tre colonne impilate una sopra l'altra invece che una accanto all'altra in caso di dispositivi con una grandezza massimo dello schermo di 600px. E' questo ultimo comando che rende il tuo sito responsive. Chiudiamo la parte dello stile compreso nella parte head

E ora impostiamo con l' HTML la vera e propria pagina del sito responsive.