CSS  »  Guide  »  Guida Layout dei siti con i CSS 

In un layout fisso, il contenitore principale ha la larghezza dimensionata in pixels. Un layout fisso è generalmente studiato per una dimensione standard e vi sono due principali larghezze utilizzate per questo tipo di layout, a seconda delle due più diffuse risoluzioni del monitor:

• 800x600 pixels
• 1024x768 pixels

Generalmente è uso lasciare circa 40-50 pixels come margine di tolleranza, quindi, le due dimensioni utilizzate sono all' incirca 760 pixels oppure 960 pixels. Sulla scelta della larghezza da utilizzare, c'è da dire che un layout pensato per una determinata risoluzione risulta decisamente poco professionale se visualizzato con una risoluzione minore.

Provate a visualizzare a risoluzione 800x600 un qualsiasi sito che riporta la dicitura "Sito ottimizzato per una risoluzione di 1024x768": la pagina per essere consultata necessiterà di uno scrolling orizzontale, che personalmente ritengo molto fastidioso.

A questo punto la soluzione migliore, se proprio si deve pensare ad un layout fisso, è impostare la larghezza del contenitore principale a 760 pixels o meno. Ecco come ottenere un contenitore centrato e largo 760 pixels:

body{
    text-align: center;   /*centra in IE 5.x */
    }

div#container{
    width: 760px;
    margin: 0px auto;   /*centra negli altri browsers*/
    text-align: left;   /*ripristina l' allineamento*/
    }

Seppure, con il passare del tempo si stia procedendo ad un progressivo aumento delle risoluzioni dei monitor, un sito quale A List Apart, uno tra i più autorevoli a livello internazionale in materia di webdesign, ha adottatto un layout fisso a larghezza 600 pixels.

Posso solo ipotizzare i due motivi che abbiano spinto Jeffrey Zeldman, fondatore del sito e co-fondatore del Web Standard Project a una scelta del genere:

• è adatto a qualsiasi risoluzione del monitor dell'utente, anche a 640x480 pixels;
• consente una maggiore leggibilità: è provato infatti che, sia sul web che sulla carta, leggere linee lunghe è più faticoso.

Ma torneremo ampiamente su questi aspetti in altri punti della guida.

Altri articoli

Altre guide

Altre newsletter