Questo articolo spiega come creare un layout a 3 colonne in CSS. Le istruzioni si applicano a CSS3 e versioni precedenti.

Disegna il tuo layout

Puoi disegnare il tuo layout su carta o in a programma di grafica. Se hai già in mente un wireframe o un design ancora più ampio, semplificalo alle scatole di base che compongono il sito. Questo design che accompagna questo articolo ha tre colonne nell'area del contenuto principale, oltre a un'intestazione e un piè di pagina. Se guardi da vicino, puoi vedere che le tre colonne non sono uguali in larghezza.

Dopo aver disegnato il layout, puoi iniziare a pensare alle dimensioni. Questo progetto di esempio avrà le seguenti dimensioni di base:

• Non più di 900 pixel di larghezza
instagram viewer
• 20 px grondaia a sinistra
• 10 px tra colonne e righe
• Colonne larghe 250 px, 300 px e 300 px
• La riga superiore è alta 150 px
• La riga in basso è alta 100 px

Scrivi HTML/CSS di base e crea un elemento contenitore

Dal momento che questa pagina sarà una valida HTML documento, inizia con un contenitore HTML vuoto.

Aggiungi gli stili CSS di base a azzera i margini, i bordi e i padding della pagina. Mentre ce ne sono altri stili CSS standard per i nuovi documenti, questi stili sono il minimo necessario per ottenere un layout pulito. Aggiungili all'inizio del documento.

Per iniziare a costruire il layout, inserisci un elemento contenitore. A volte capita che tu possa sbarazzarti del contenitore in un secondo momento, ma per la maggior parte dei layout a larghezza fissa, avere l'elemento contenitore rende più facile la gestione su diversi Web browser.

Dai uno stile al contenitore

Il contenitore definisce l'ampiezza del contenuto della pagina Web, nonché eventuali margini all'esterno e padding all'interno. Per questo documento, il contenitore è largo 870 px con un margine di 20 pixel a sinistra. La grondaia è impostata con uno stile di margine, ma il padding sul contenitore viene azzerato per evitare che gli elementi siano larghi quanto il contenitore.

Se salvi il documento ora, sarà difficile vedere il contenitore perché non contiene nulla. Se aggiungi del testo segnaposto, sarai in grado di vedere l'elemento contenitore in modo più chiaro.

Usa un tag titolo per l'intestazione

Il modo in cui decidi di modellare la riga di intestazione dipende molto da cosa contiene. Se la riga di intestazione avrà solo una grafica del logo e un titolo, allora utilizzando un tag titolo (

) ha più senso che usare a

. Puoi modellare il titolo nello stesso modo in cui stili un div ed evitare tag estranei.

L'HTML per la riga di intestazione va nella parte superiore del contenitore e ha questo aspetto:

Quindi, per impostare gli stili su di esso, è stato aggiunto un bordo rosso nella parte inferiore in modo da poter vedere dove finisce, i margini e il riempimento sono stati azzerati, la larghezza impostata al 100% e l'altezza a 150 px.

Non dimenticare di far galleggiare questo elemento con il float: left; proprietà. La chiave per scrivere layout CSS è far galleggiare tutto, anche le cose che hanno la stessa larghezza del contenitore. In questo modo, saprai sempre dove si troveranno gli elementi sulla pagina.

UN Selettore discendente CSS stili applicati solo agli elementi H1 che si trovano all'interno dell'elemento #container.

Per ottenere tre colonne, inizia costruendo due colonne

Quando crei un layout a tre colonne con CSS, devi dividere il layout in gruppi di due. Quindi per questo layout a tre colonne, la colonna centrale e quella destra e raggruppate e posizionate accanto alla colonna sinistra in un layout a due colonne dove la colonna di sinistra è larga 250 px e la colonna di destra è larga 610 px (300 ciascuna per le due colonne, più 10 px per il margine tra loro).

La colonna a sinistra viene spostata a sinistra, mentre l'altra viene spostata a destra. Poiché la larghezza totale di entrambe le colonne è 860 px, c'è un margine di 10 px tra di loro.

Aggiungi due colonne all'interno della seconda colonna larga

Per creare le tre colonne, aggiungi due div all'interno della seconda colonna più ampia, proprio come hai aggiunto 2 div all'interno della colonna del contenitore nell'ultimo passaggio.

Poiché questi due riquadri larghi 300 pixel si trovano all'interno di un riquadro largo 610 pixel, ci sarà di nuovo una grondaia di 10 pixel tra di loro.

Aggiungi nel piè di pagina

Ora che il resto della pagina è in stile, puoi aggiungere il piè di pagina. Usa un ultimo div con un ID "piè di pagina" e aggiungi contenuto in modo che tu possa vederlo. Puoi anche aggiungere un bordo in alto, così saprai da dove inizia.

Aggiungi i tuoi stili e contenuti personali

Ora che hai finito il layout, puoi iniziare ad aggiungere i tuoi stili e contenuti personali. Ricorda che i bordi dell'intestazione e del piè di pagina sono stati aggiunti per mostrare le sezioni del layout, non specificamente per il design.