HTML + CSS pattern: layout lineare con intestazione corpo piedipagina centrato fluido

Questa pagina contiene le istruzioni per la realizzazione di un layout lineare con un'intestazione un corpo ed un piè di pagina centrati e orizzontalmente fluidi, cioè la loro dimensione cambia al variare delle dimensioni dello schermo.

Esempio

Per realizzare un layout lineare è opportuno prima di tutto creare i tre contenitori generici intestazione corpo e piedipagina con i marcatori div. Il codice html per la creazione delle tre sezioni è il seguente:

<div class="intestazione">intestazione</div>
<div class="corpo">corpo</div>
<div class="piedipagina">corpo</div>

Mentre il seguente è il codice CSS in modo che il layout sia lineare:

body{margin-left: 10%; margin-right: 10%; font-family: verdana,helvetica,sans-serif;}

div {border: 1px solid #000;}

div#intestazione{ position: relative; 
                  text-align: left; 
                  width: 100%; height: 30px; 
                  margin-top:5%; margin-bottom:2%; 
                  background-color:#FFCC00;}

div#corpo{ position: relative; 
           text-align: left;  
           width: 100%; height: 400px; 
           margin-bottom:2%; 
           background-color:#FFEEBB;}

div#piedipagina{ position: relative; 
                 text-align: left; 
                 width: 100%; height: 30px; 
                 background-color:#FFCC00;}

La proprietà position: è necessaria per la gestione della posizione di un elemento e può essere applicata a tutti gli elementi. Il valore relative posiziona l'elemento relativamente al suo box contenitore, nel nostro caso il box contenitore è la pagina stessa.

All'interno del body settiamo il valore del margine destro e del margine sinistro a 10% in modo da centrare il nostro layout.

Copiando il codice sottostante nella <head> della propria pagina si puo avere un esempio diretto di quanto spiegato


<link type="text/css" rel="stylesheet" 
         href="https://www.asiconline.org/accessibilita/progetti/pattern/layoutLineare2.css" />

Un esempio completo di pagina avente layout lineare con intestazione corpo e piè di pagina centrati si può avere con il seguente codice.

Esempio:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
  <head>
    <title>Gruppo Accessibilità dell'Associazione degli Informatici
    Catanesi: CSS pattern</title>
    <meta content="Accessibilità, ASIC, usabilità, web content" />
    <meta http-equiv="Content-Type" content="text/html" charset="ISO-8859-1" />
    <link type="text/css" rel="stylesheet" 
             href="https://www.asiconline.org/accessibilita/progetti/pattern/layoutLineare2.css" />

  </head>

<body>
<div id="intestazione">intestazione</div>
<div id="corpo">corpo</div>
<div id="piedipagina">piedipagina</div>

</body>
</html>

Torna in cima