Lez.11 - Corso Avanzato Css

Layout Fisso in un foglio di stile Css
- Layout Fisso ad 1 Colonna
- Layout Fisso ad 2 o più Colonne

Layout Fisso ad Una Colonna

I layout fissi, detti anche statici, sono una ottima scelta per chi ha bisogno di avere una precisa dimensione della pagina.

Posizionando in maniera specifica i diversi elementi grafici che compongono la nostra pagina web, con i layout fisso, siamo sicuri che le distanze fra i vari elementi vengono mantenute invariate.

L'unità di misura per il layout fisso è il pixel, che dà una dimensione ben determinata e fissa.

Per quanto riguarda la grandezza di una pagina, si sa, che è data soprattuto dalla larghezza della pagina, la quale può essere scelta a piacere anche se uno dei valori che va per la maggiore è il layout di 960 pixel, questa misura è rivolta soprattutto a dispositivi con schermi da computer portatili e a tablet.
Per concludere con il layout fisso siamo certi che quando un visitatore allarga la pagina sullo schermo il contenuto della pagina non si allargherà per tutta la larghezza dello schermo ma avrà al massimo la larghezza che noi abbiamo impostato.

Layout Fisso ad Una Colonna.

Il Codice:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Layout Fisso ad una colonna</title>
  <meta charset="utf-8">
  <style type="text/css">
     body {
	    background-color: #323232;
	    margin: 0;
    }
    #container {
	    width: 960px;
	    margin: 0 auto;
	    background-color: white;
    }
    header {
	    background-color: darkseagreen;
	    padding: 60px;
    }
    nav {
	    background-color: #A6A29F;
	    padding: 16px;
	    text-align: center;
    }
    section {
	    padding: 16px 60px;
    }
    section p {
	    text-align: justify;
    }
    footer {
	    background-color: darkseagreen;
	    text-align: right;
	    padding: 16px 60px;
    }
    img {
	    float: left;
	    margin-right: 26px;
    }
  </style>
 </head>
 <body>
   <div id="container">
     <header>
       <h1>Layout Fisso ad una sola colonna</h1>
     </header>
     <nav>
       Link 1  |  Link 2  |  Link 3
     </nav>
     <section>
       <h2>Titolo della section</h2>
       <h3>Sottoto titolo 1 della section</h3>
       <img src="vostra_immagine.jpg">
       <p>Questo è un paragrafo che si trova dopo la vostra_immagine.jpg. Questo è un paragrafo che si trova accanto la vostra_immagine.jpg. Questo è un paragrafo che si trova accanto la vostra_immagine.jpg. Questo è un paragrafo che si trova accanto la vostra_immagine.jpg. Questo è un paragrafo che si trova accanto la vostra_immagine.jpg.</p>
       <p>Questo è un paragrafo che si trova dopo la vostra_immagine.jpg. Questo è un paragrafo che si trova accanto la vostra_immagine.jpg. Questo è un paragrafo che si trova accanto la vostra_immagine.jpg. Questo è un paragrafo che si trova accanto la vostra_immagine.jpg. Questo è un paragrafo che si trova accanto la vostra_immagine.jpg..</p>
       <h3>Sottoto titolo 2 della section</h3>
       <p>Questo è un paragrafo che si trova dopo la vostra_immagine.jpg. Questo è un paragrafo che si trova dopo la vostra_immagine.jpg. Questo è un paragrafo che si trova dopo la vostra_immagine.jpg. Questo è un paragrafo che si trova dopo la vostra_immagine.jpg. Questo è un paragrafo che si trova dopo la vostra_immagine.jpg.</p>
     </section>
     <footer>
       Questa pagina è stata realizzato da Antonio
     </footer>
   </div>
 </body>               
</html>                    


Layout Fisso ad Due o Più Colonne.

Come abbiamo già detto, nel layout fisso le dimensioni vanno calcolate in piexl, quindi per avere un layout a due o più colonne basta dividere la larghezza della pagina dando una misura ben precisa ai vari componenti in maniera che la somma dei pixel sia esattamente quella da noi impostata.
Nell'esempio riportato sotto abbiamo diviso la pagina in 2 colonne composte da un elemento section con accanto un elemento aside.

Vediamo subito che se sommiamo il padding (imbottitura) e width (larghezza) dei due elementi il totale è esattamente il totale da noi impostato al container (width: 960px;).

Per concludere possiamo dire che con i layout fissi possiamo dividere la nostra pagina web in quante colonne noi vogliamo, l'importate dare una misura ben precisa ai vari componenti in maniera che la somma dei pixel sia esattamente quella da noi voluta.

Layout Fisso a Due Colonne.

Il Codice:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Layout Fisso a due colonne</title>
  <meta charset="utf-8">
  <style type="text/css">
    body {
	    background-color: #323232;
	    margin: 0;
    }
    #container {
	    width: 960px;
	    margin: 0 auto;
	    background-color: #B8BAC6;
    }
    header {
	    background-color: darkseagreen;
	    padding: 60px;
    }
    nav {
	    background-color: #A6A29F;
	    padding: 16px;
	    text-align: center;
    }
    section {
	    background-color: white;
	    padding: 16px 60px;
	    width: 540px;
	    float: left;
    }
    section p {
	    text-align: justify;
    }
    aside {
	    width: 180px;
	    float: right;
	    padding: 60px 60px;
    }
    footer {
	    background-color: darkseagreen;
	    text-align: right;
	    padding: 16px 60px;
	    clear: both;
    }
    img {
	    float: left;
	    margin-right: 26px;
    }
  </style>
 </head>
 <body>
  <div id="container">
    <header>
	    <h1>Layout Fissi a 2 colonne</h1>
    </header>
    <nav>
	    Link 1  |  Link 2  |  Link 3
    </nav>
    <section>
	    <h2>Titolo della section</h2>
	    <h3>Sottoto titolo 1 della section</h3>
	    <img src="vostra_immagine.jpg">
	    <p>Questo è un paragrafo che serve come contento della sezione. Questo è un paragrafo che serve come contento della sezione. Questo è un paragrafo che serve come contento della sezione.</p>
	    <p>Questo è un paragrafo che serve come contento della sezione. Questo è un paragrafo che serve come contento della sezione. Questo è un paragrafo che serve come contento della sezione. Questo è un paragrafo che serve come contento della sezione.
	    Questo è un paragrafo che serve come contento della  sezione.</p>
	    <h3>Sottoto titolo 2 della section</h3>
	    <p>Questo è un paragrafo che serve come contento della sezione. Questo è un paragrafo che serve come contento della sezione. Questo è un paragrafo che serve come contento della sezione. Questo è un paragrafo che serve come contento della sezione.
	    Questo è un paragrafo che serve come contento della sezione.    </p>
    </section>
    <aside>
	    <p>Testo di Aside.</p>
	    <p>Testo di Aside.</p>
	    <p>Testo di Aside.</p>
	    <p>Testo di Aside.</p>
	    <p>Testo di Aside.</p>
	    <p>Testo di Aside.</p>
	    <p>Testo di Aside.</p>
    </aside>
    <footer>
            Questa pagina è stata realizzato da Antonio
    </footer>
  </div>
 </body>               
</html>