trasformare un layout fluido in uno a larghezza fissa è molto semplice a questo punto: basterà aggiungere qualche regola CSS al body e al div con id container. Per delimitare spazialmente il contenitore è bene usare in questo caso dei bordi. Questo è il layout fisso: come si può notare la lettura risulta molto più agevole e restingendo la finestra si genera la scrollbar orizzontale, impedendo ad esempio che la navigazione si disponga su più righe, garantendo quindi una maggiore solidità Scarica l’esempio. Una nota importante: è importante controllare che la stampa di una pagina che lo utilizza venga bene. Sovente, infatti, i contenuti risultano tagliati. Il modo per evitare questo problema è definire una regola per il CSS di stampa. Questa la regola da aggiungere nel foglio di stile per la stampa:

<style type=”text/css” media=”print”>
div#container{
    width: auto;
    }
</style>

In questo modo la larghezza del container in fase di stampa verrà calcolata dal browser per occupare in larghezza solo la pagina di stampa.
14 / 41

Layout monolitico elastico

I Video di HTML.it