HTML + CSS pattern: layout lineare con intestazione corpo fluido

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

Esempio

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

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

Mentre il seguente è il codice CSS:

div {border: 1px solid #000;}

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

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

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.

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="http://www.asiconline.org/accessibilita/progetti/pattern/layoutLineare.css" />

Un esempio completo di pagina avente layout lineare 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="http://www.asiconline.org/accessibilita/progetti/pattern/layoutLineare.css" />

  </head>

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

Torna in cima