Layout complessi a tre colonne (Parte I)

In questo articolo andremo a lavorare con i CSS per lacreazione di un layout graficamente gradevole e complesso,che risulti compatibile a tutti i browsers. Al termine dellosviluppo la grafica assomiglierà a questa.

Layout a 3 colonne:

Come prima cosa, creiamo un semplice layout composto da trecolonne con uno spazio bianco tra l' una e l' altra econ la colonna centrale che detta l' altezza di tutto ildocumento. Iniziamo con quattro DIVs ed i loro relativistili.

  1. Innanzitutto, impostiamo il margine (margin) e l' imbottitura (padding) dell' elemento body

      body {    margin:9px 9px 0 9px;    padding:0;    background:#FFF;}
  2. Definiamo ora il primo elemento, un DIV che avrà come id il valore "level0". L' unica definizione di stile che le associamo è il background, di un colore a scelta

      #level0 {     background:#FC0;}
  3. Nidifichiamo nel "level0" una seconda DIV, identificata "level1" che creerà lo spazio tra la colonna di sinistra ed il separatore sinistro. Avrà questi attributi

      #level1 {    margin-left:143px;    padding-left:9px;    background:#FFF;}
  4. A questo punto nidifichiamo in "level1" una DIV identificata con "level2"

      #level2 {    background:#FFF3AC;}
  5. Infine, nidifichiamo una DIV "level3" in "level2" per dar vita alla colonna di destra

      #level3 {    margin-right:143px;    padding-right:9px;    background:#FFF;}#main {    background:#CCC;}

Aggiungere il Top Nav e l' Ad Bars

Fino ad ora abbiamo visto come creare tre colonne dellastessa identica altezza. Prima di continuare, impostiamo latop navigation bar e l' advertisement block. Immetteremopergiunta sia in "level1" sia in "level2"una DIV con id "topBar" che, a sua volta,conterrà un' altra DIV con id "advBar".Ecco il tutto in CSS

...#topBar {    background:#FC0;}#advBar {    background:#FFF3AC;}</style>...<body>  <div id="level0">    <div id="level1"><div id="topBar">  This is the top navigation bar.  <div id="advBar">    This is the advertisement bar.  </div></div><div id="level2">  <div id="level3">    <div id="main">The code you are reading.    </div>  </div></div>    </div>  </div></body>...

Il box Tip-o-the-Day

Ora come ora abbiamo solo tre blocchi nei quali si possonoinserire dei contenuti (l' area principale, la topnavigation e il blocco advertisement) e ciascuno di questisarà tanto alto quanto i contenuti in esso presenti lorichiederanno; al contrario, ne è forzata lalarghezza, così che il contenuto di un blocco noninvada quello a lui vicino. Inseriamo ora il box "Tip ofthe day" grazie alla proprietà float, cosìche il contenuto dell' area principale si regoli inautomatico. Per farlo abbiamo messo una nuova DIV("tipDay") nella DIV "main" ,impostandone la proprietà float a destra edassegnandole un preciso valore width (larghezza):

#tipDay {    float:right;    width:175px;    background:#FFF3AC;}

Contenuti:

Affrontiamo ora il problema di come permettere l'inserimento dei contenuti in ciascuna barra. Il modopiù naturale per farlo sarebbe l' usare laproprietà float, ma questo causerebbe problemi di resavisiva del layout per coloro che lo visualizzerebbero conOpera ed Internet Explorer; per non aver problemi dovremoquindi definire posizioni assolute, senza la proprietàfloat.

Riempire la Nav Bar  sinistra  e quelladestra

Per quanto riguarda la Nav Bar di sinistra, aggiungiamo unaDIV con id "lftBar" da posizionare nel"level0" , prima o dopo del "level1".Ecco il codice CSS relativo:

#lftBar {    position:absolute;    width:143px;    top:9px;    left:9px;}

Per quella destra useremo una DIV con id "rgtBar" ,da inserire in "level2" prima o dopo"level3" impostando a relative l' attributoposition del "level2". Ecco il tutto:

#level2 {    background:#FFF3AC;    position:relative;}...#rgtBar {    position:absolute;    width:143px;    top:0;    right:0;}

Continua a leggere la seconda parte >



Ti potrebbe interessare anche

commenta la notizia