Layout web con due colonne flottanti e CSS

Le dimensioni delle colonne saranno "fluide", vale a dire che avranno misure in percentuale e si adatteranno alla larghezza della finestra del browser.

Questo del metodo float non è che solo un modo per avere il layout menzionato; in seguito vedremo come realizzare lo stesso layout con il metodo "position". Ma andiamo con ordine.

Inviterei a dare uno sguardo alla pagina senza nessuna associazione dei CSS.
Ciò che avete visto è quello che viene visualizzato in un browser senza nessun supporto per i Fogli di Stile. Inoltre la stessa cosa vale per coloro i quali si avvalgono di un browser testuale.
La pagina non è altro che un semplice testo senza nessuna rappresentazione grafica.
Adesso ci si deve preoccupare di "impaginare" in 2 colonne, assegnando dei DIV ad ogni area, compresi la testa ed il footer della pagina.
Cominciamo a vedere il codice più importante che compone ogni singolo DIV e, per un ordine a partire dall' alto, cominciamo dalla testa.

#header{
background-color:#f60;
height:80px;
}
#header h1{
margin:0;
padding:20px;
color:#fff;
}

Non ho fatto altro che impostare la formattazione del DIV header, assegnandogli un' altezza ed un colore di sfondo. Il codice che ho scritto successivamente si riferisce, per la "ereditarietà", a tutti i tag H1 inseriti nel DIV header. Infatti se scrivessi in un qualsiasi punto della pagina un titolo marcato con tag H1, non si avrebbe la stessa formattazione. Adesso passiamo al corpo della pagina; qui avremo una colonna posizionata sul lato sinistro alla quale verrà affiancata un' altra, alla sua destra, che potrebbe essere il menu di navigazione. Questo il codice:

#content{
width:78%;
float:left;
background-color:#fff;
border-right:1px dashed #00f;
margin-right:5px;
}
#content h2{
margin:0;
padding:20px;
color:#900;
font-size:1.2em;
}
#content p{
padding-left:20px;
padding-right:20px;
font-size:85%;
padding-bottom:10px;
margin-top:0;
line-height:1.5em;
}

Ecco che è stato applicato il metodo float al DIV nel quale ci sarà tutto il contenuto della pagina. Il float, infatti, è un metodo che è nato per impaginare una fotografia in articolo accompagnata dal testo. Quest' ultimo "gira" attorno alla foto. Con questo voglio dire che, posizionato al suo posto il contenuto, tutto quello che ci sarà nella pagina, verrà posizionato "intorno". Comunque, per tornare al codice, anche al DIV content ho assegnato una larghezza (width:78%), colore di sfondo, un bordo solo sul lato destro (border-right:1px dashed #00f;) ed un margine, sempre sul lato destro, di 5 pixel (margin-right:5px;), per fare in modo da avere un pò di spazio tra il DIV in oggetto e la colonna destra. Il codice #content h2 e #content p, si riferisce, rispettivamente, al tag H2 e del paragrafo, che si trovano esclusivamente nel DIV content.
Adesso passiamo alla colonna destra, o menu.

#coldx{
background-color:transparent;
}

Alla colonna di destra è stato solo assegnato il colore di sfondo: transparent; vale a dire che prende il colore assegnato al body. Non è necessario assegnare una larghezza, in quanto sarà di 17%; (78% la larghezza del contenuto + 5% il margine destro dello stesso DIV content = 83%. Se la finestra del browser è 100%, allora avremo: 100% - 83% = 17%). Il codice del tag H3 e del menu sono facilmente intuibili. Volendo, possiamo anche assegnare un' altezza sia alla colonna del contenuto che a quella di destra; per fare in modo da avere una pagina omogenea, si deve dare la stessa altezza ad entrambe.
In ultimo abbiamo il footer, il cui codice è:

#piede{
clear:left;
background-color:#999;
height:40px;
}

La dichiarazione clear:left assegnata al footer, annulla l' effetto del float, dato al DIV content, e fa in modo che il footer si trovi effettivamente al di sotto di esso. Dopo tutto questo bel pò di codice, possiamo vedere la pagina completa dell'esempio.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati