CSS  »  Articoli  »  CSS Template e layout 

Il CSS per la stampa

Il nostro esempio è così ultimato. Non ci resta che definire le regole di stampa, che per comodità di consultazione dei lettori ho incorporato nel codice HTML insieme al resto del CSS. A layout ultimato è bene spostare tutto il CSS, incluso il commento condizionale, in file esterni. Ecco il CSS per la stampa:

body{font: 12pt Arial,sans-serif}
h1,h2,h3{font-family: "Trebuchet MS",Arial,sans-serif}
h1{font-size: 160%}
h2{font-size: 140%}
h3{font-size: 120%}
p{line-height: 1.2}
div#header{border-bottom: 1px solid #000}
div#nav,div#extra, a#skipnav{display:none}
div#footer{border-top: 1px solid #000;font-size: 80%}

La variante con le colonne laterali fisse

La progettazione con i fogli di stile, come sempre, consente di intervenire sulla presentazione di una pagina o un intero sito solo agendo sul codice CSS. Ho preparato la versione del layout liquido con colonne laterali fisse. Le due colonne laterali sono larghe 150 e 200 pixel: la colonna extra spesso infatti si presenta con maggiori contenuti rispetto alla navigazione. In questo caso per le false colonne si sono utilizzate due semplici jpg larghe quanto le colonne (padding incluso). Senza dubbio per i layout liquidi a tre colonne la soluzione con le laterali a larghezza fissa è la più utilizzata. Vediamo il CSS per intero:

html,body{margin: 0;padding: 0}
body{font: 76% Verdana,Arial,sans-serif}
h1,h2,h3{font-family: "Trebuchet MS",Arial,sans-serif;margin: 0}
h1{color: #7FA0B1;font-size: 200%}
h2{color: #B8B8B8;font-size: 180%}
h3{color: #A47E6A;font-size: 150%}
p{margin: 0 0 0.8em 0}

div#container{min-width: 550px;background: #FFF url(left.jpg) repeat-y left}
div#container2{background: url(right.jpg) repeat-y right}
div#header{height:70px;line-height: 70px;padding: 0 2%;
    background: #fff url(header.jpg) repeat-x bottom}
div#header a#skipnav{position: absolute;left: -9000px}

div#nav{float: left;width:140px;\width:150px;w\idth:140px;padding: 0 5px}
div#extra{float:right;width:190px;\width:200px;w\idth:190px;padding: 0 5px}}

div#content{margin: 0 210px 0 160px}
div#content p{line-height:1.3}

div#footer{clear:both; background: #fff url(footer.jpg) repeat-x top;color: #4E768A}
div#footer p{margin: 0;padding: 10px 0;text-align: center;font-size: 80%}

Le modifiche rispetto al layout con colonne percentuali riguardano solo le immagini di sfondo, le larghezze delle due colonne laterali e i margini della centrale.

Da notare come con qualche piccola modifica il layout che abbiamo visto si può trasformare in una versione semiliquida o addirittura in una versione a larghezza fissa. Il CSS degli esempi è incorporato nella pagina (mi raccomando sempre: in casi reali usare i CSS esterni!). Gli esempi e le immagini sono disponibili per il download. Alla prossima.

Altri articoli

Altre guide

Altre newsletter