CSS  »  Articoli  »  CSS Template e layout 

Completiamo la struttura

A questo punto definiamo le altre colonne del layout: quella centrale (div #middle) e quella destra (div #right). Per posizionare usiamo ancora una volta il float: entrambi i div, analogamente al menu sinistro, hanno larghezza fissa, float a sinistra, margini a 0px, altezza al 100%:

#middle {
width: 508px;
float: left;
height: 100%;
margin: 0px;
}

#right {
float: left;
width: 130px;
height: 100%;
margin: 0px;
}

Il posizionamento dei tre div avviene come per un gioco ad incastro. Il div #left si posiziona sul bordo del box contenitore, il div #middle cercherà di fare altrettanto, ma troverà al suo fianco #left e, se c'è spazio si posizionerà accanto ad esso. Così avverrà per #right rispetto a #middle. Nel nostro caso lo spazio c'è per tutti e tre! È preciso. Se fate la somma delle tre larghezze avrete: 130 + 508 + 130 = 768. La larghezza del div #box. Forse stanno un pò stretti, ma è quello che volevamo ottenere! Ed ecco quello che succede se lo spazio non ci fosse (abbiamo aumentato a 330px la larghezza del div #left): i div adiacenti a #left andrebbero a cercarsi posto in basso.

Il funzionamento dovrebbe essere chiaro. Chiudo con un consiglio: potreste usare per i tre div larghezze in percentuale, nulla lo vieta. Ma la scelta delle tre percentuali dovrebbe essere fatta dopo tante prove per verificare il comportamento dei div a diverse risoluzioni, ridimensionando le finestre e con browser diversi. Con dimensioni in pixel tutto è più facile.

Riempiamo i box: il menu sinistro

A questo punto il layout di base è completato, ma per completezza è giusto accennare alla definizione degli stili per le altre sezioni. Iniziamo dal menu sinistro. I vari div sono formattati con l'uso delle sguenti classi:

• homepage
• menu
• preferiti
• testopref

Tutte le classi hanno larghezza automatica: il valore sarà quello del box parente, quindi 130px. Sulle classi .homepage, .preferiti e .testopref non spendiamo molte parole. Si tratta di impostazioni relative all'aspetto facilmente ricavabili dall'esame del codice.

Più complessa la classe .menu, quella che definisce l'elenco dei link interni della sezione PRO. La difficoltà stava nel rendere l'aspetto vagamente tridimensionale della tabella e di replicare l'effetto rollover. Tutto è stato fatto senza usare tabelle e immagini di alcun tipo, come quelle che servono nell'orginale alla resa dei bordi. La tecnica è quella vista negli articoli sui Rollover di navigazione con i CSS e sulle tabelle 3D già pubblicate. Si procede così:

1. con la classe .menu si definiscono le proprietà dello sfondo e del testo
2. con .menu : a si imposta l'aspetto dei link (meglio: dell'elemento <a>)
3. con .menu a : hover si crea l'effetto rollover

La maggiore complessità riguarda la classe .menu : a. A parte le proprietà del testo è fondamentale notare la dichiarazione display : block. Settando quest'ultima ottengo il risultato di mostrare ogni link su una riga diversa, senza fare uso di paragrafi. È decisivo, perchè in genere l'elemento <a> che definisce i link è di tipo inline, viene cioè definito all'interno di porzioni di testo e non dà orgine ad una nuova riga. In questo modo ottengo una bella barra dei menu, il cui effetto 3D è dato dalla particolare definizione e combinazione dei bordi superiore e inferiore (1px bianco quello inferiore, 1px nero quello superiore) con il colore di sfondo.

Riempiamo i box: la colonna centrale

La colonna centrale si articola in quattro sezioni (figura 1). Anche qui poco da evidenziare. L'unica lieve difficoltà consiste nella resa visiva del form del box di ricerca. Innanzitutto, abbiamo impostato i margini del form stesso a 0px: Internet Explorer tende infatti ad inserire uno spazio di alcuni pixel intorno agli elementi del form, il che avrebbe espanso l'altezza del div.

Una dichiarazione è stata dedicata anche al tag <input>: lo scopo era quello di allineare al centro l'immagine usata come pulsante di invio.

Un ultimo ritocco

Se visualizzate lo stato del lavoro fino al punto precedente, noterete che l'altezza delle due colonne laterali non si estende per tutto il documento. Abbiamo già spiegato questo comportamento negli articoli precedenti. Per risolvere tutto basta assegnare come immagine di sfondo al div #box la stessa usata per le colonne laterali. Il risultato sarà quello visibile nel documento iniziale.

Siamo alla fine. L'ultimo consiglio sembrerà banale: studiate, sperimentate, giocate con il codice. Con la consapevolezza che il futuro è questo. Vi propongo due eccellenti fonti di ispirazione e approfondimento:

• CSS Discuss - È la mailing list creata e curata da Eric Meyer. Ogni giorno decine di messaggi e discussioni su tutti gli aspetti dei CSS e su molte delle questioni toccate in queste lezioni.
• WebNouveau - prima o poi qualcuno doveva farlo: una raccolta di siti fatti senza tabelle e con i CSS. Molti sono esempi pregevoli e di grande impatto.

Altri articoli

Altre guide

Altre newsletter