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.
Bordi multipli con 'box-shadow' di CSS3Il modo più rapido e semplice per circondare un box con più bordi di... |
Sfumature lineari su IE6-9, linear-gradient CSS3 e un po' di SVGUtilizzare la funzione linear-gradient CSS per creare sfumature... |
Stili specifici per l'orientamento dell'iPad con le Media QueriesGestire con gli stili e le media queries le modalità di... |
Campo per la ricerca con i CSSDedicare la giusta attenzione al modulo per le ricerche, componente... |
Box model 'naturale' con border-boxDimenticare per sempre i problemi legati al box model grazie ad un... |
Guida CSS3Scoprire e usare al meglio tutte le novità dell'ultima versione dei... |
Guida CSS Tecniche essenzialiTesto, immagini, layout, form, liste, tabelle: soluzioni pronte per... |
Guida CSS di baseI CSS servono per gestire tutto il layout di un sito Web. E'... |
Ogni mercoledì, direttamente nella tua e-mail: guide, articoli, tutorial, FAQ e approfondimenti tecnici su CSS e Web Design.
Iscriviti alla newsletter
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |