Programmazione Web » Css » Come realizzare un layout fluido a due colonne
Come realizzare un layout fluido a due colonne
Difficoltà:
Scritto da Michele Sassi
Sito Web: http://www.comefaccio.net 
Questo tutorial è stato letto 1950 volte
Con questa lezione vedremo come creare un layout semplice ed elegante impaginando su due colonne i contenuti del nostro sito!
L'impaginazione avverrà principalmente in due colonne, ognuna delle quali conterrà a sua volta dei box. Ogni box rappresenterà una sezione del nostro sito!
Passiamo alla stesura del codice Css:
<style>
body {
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0%;
}
/* proprietà delle due colonne principali*/
.colonna {
width: 46%;
float: left;
margin: 1%;
border: 1px solid #ccc;
}
/* proprietà dei box interni alle colonne */
.interna {
width: 94%;
float: left;
margin: 1%;
border: 1px solid #ccc;
}
.interna h1 {
background-color: #FF9900;
color: #0000FF;
font-size: 20px;
}
</style>
Ogni colonna occuperà il 46% dello schermo, sarà allineata al margine sinistro ed avrà un margine pari all'1% dello schermo. Al contrario, i box interni alle colonne occuperanno il 94% dell'elemento in cui sono contenuti (la colonna principale nel nostro caso), si allineeranno a sinistra (nella colonna) e avranno un margine pari all'1%. Abbiamo anche voluto creare uno stile per i titoli h1 presenti all'interno dei box, ma questo è solo un dettaglio grafico!
Questo layout è anche chiamato layout fluido; si adatterà infatti ad ogni risoluzione in quanto è stato creato con valori in percentuale! Se preferite usare i valori in px (layout fissi) fate pure, ma sappiate che la struttura che avete creato sarà ben visibile solo alla risoluzione alla quale state progettando!
Passiamo ora all'(X)HTML necessario per creare la struttura vera e propria delle colonne e dei relativi box interni:
<!-- inizio prima colonna -->
<div class="colonna">
<div class="interna">
<h1>Sezione 1 </h1>
<p>Contenuto della sezione 1 </p>
</div>
<div class="interna">
<h1>Sezione 2 </h1>
<p>Contenuto della sezione 2 </p>
</div>
<div class="interna">
<h1>Sezione 3 </h1>
<p>Contenuto della sezione 3 </p>
</div>
</div>
<!-- inizio seconda colonna -->
<div class="colonna">
<div class="interna">
<h1>Sezione 4 </h1>
<p>Contenuto della sezione 4 </p>
</div>
<div class="interna">
<h1>Sezione 5 </h1>
<p>Contenuto della sezione 5 </p>
</div>
<div class="interna">
<h1>Sezione 6 </h1>
<p>Contenuto della sezione 6 </p>
</div>
</div>
Ora che avete capito come funziona, potete anche provare a creare un layout a tre colonne! Buon lavoro!
Aggiungi questo tutorial ai preferiti
