CSS  »  Articoli  »  Nessuna selezione 

Nella prima parte dell'articolo abbiamo lavorato con Photoshop realizzando il modello grafico del nostro template. In questa seconda sezione metteremo mano al codice XHTML e CSS per convertire la grafica in una forma pronta per il web. Il modello grafico sarà sezionato nei modi opportuni per fornire gli elementi grafici necessari alla creazione di un layout CSS senza tabelle.

Passo 1: la struttura

Il nostro layout è suddiviso in due colonne a larghezza fissa, una testata ed un footer che si estende per tutta la lunghezza della pagina: ecco il markup XHTML che ci servirà da base per l'applicazione del CSS e il template prima della formattazione con il foglio di stile.

Esistono vari modi per realizzare un layout di due colonne a larghezza fissa; in questo caso optiamo per una soluzione basata sul float: le due colonne scorrono entrambe a sinistra e il footer si sposterà dinamicamente in basso, adattandosi alla colonna più lunga.

Applichiamo una prima formattazione per azzerare i margini e il padding di ogni elemento, centriamo il div container e impostiamone la larghezza a 770 pixel (pari a quella delle guide più esterne del design in Photoshop):

Aggiungiamo dei colori di sfondo temporanei ai div principali, in modo da renderci conto di come si presentano e, contemporaneamente al settaggio della larghezza, impostiamo anche lo scorrimento a sinistra della sidebar e del div content:

In questo modo il div content si disporrà a sinistra e il div sidebar a destra; questo avviene perché nel codice XHTML abbiamo il content prima del sidebar, se così non fosse dovremmo adottare un'altra soluzione.

Coloriamo lo sfondo dell'header, lo sfondo di quella che sarà la barra di navigazione e il div footcontainer:

Ecco l'esempio.

Passo 2: La barra di navigazione principale

Col posizionamento assoluto, spostiamo a destra il div nav che contiene la lista col menu di navigazione. Per fare ciò dobbiamo impostare la posizione del div padre su relative oltre a stabilirne l'altezza (visto che ci siamo la impostiamo già da ora uguale a quella che avrà alla fine):

Impostiamo margini, padding e altezza per la lista e per i link, e facciamo scorrere a sinistra tutti gli elementi in modo da avere un menu orizzontale:

Eliminiamo anche lo stile da tutte le liste:

ul{ list-style: none; }

Impostiamo a zero i bordi per i fieldset e le eventuali immagini, oltre a stabilire alcune regole generali per i link:

a:link, a:visited { color: #39f; text-decoration: none; }
a:hover { color: #147; text-decoration: underline; }
img, fieldset{ border: 0; }

Ecco come si presenta ora il template.

Dobbiamo ancora realizzare la parte grafica della navigazione, quindi apriamo Photoshop e tagliamo le immagini che ci serviranno per il menu. È bene prestare cura a come si ritagliano le immagini, un buon design non deve presentare sbavature o imprecisioni.

Altri articoli

Altre guide

Altre newsletter