HTML + CSS pattern: layout con intestazione menu e corpo

Questa pagina contiene le istruzioni per la realizzazione di un layout con un'intestazione un menù e un corpo, il tutto in modo orizzontalmente fluido, cioè la loro dimensione cambia al variare delle dimensioni orizzontali dello schermo.

Esempio

Per realizzare un layout con un'intestazione, un menu e un corpo, in modo fluido, è opportuno prima di tutto creare le due contenitori generici 'intestazione' e 'container' con i marcatori div, e all'interno del container, creare due contenitori, il menù e il corpo. Il codice html per la creazione delle due sezioni è il seguente:

<div id="intestazione">intestazione</div>

<div id="container">
    <div id="menu">menu</div>

    <div id="corpo">corpo</div>
</div>

Mentre il seguente è il codice CSS in modo da ottenere il layout intestazione menù corpo:

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

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

div#menu{background-color:#FFEEBB;
            position: absolute;
            width:20%;
            height:100%;
            border: 1px solid #000;
            }
    
div#corpo{background-color:#FFCC00;
            position: absolute;
            left: 20%;
            width:80%;
            height:100%;
            border: 1px solid #000;
            }

La proprietà position: è necessaria per la gestione della posizione di un elemento e può essere applicata a tutti gli elementi. Il valore absolute posiziona l'elemento in modo assoluto rispetto al box contenitore dell'elemento, nel nostro caso il box contenitore è il div container.

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/layoutIntestColonne.css" />

Un esempio completo di pagina html avente layout intestazione menu corpo 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: HTML + 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/layoutIntestColonne.css" />

  </head>

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

<div id="container">
    <div id="menu">menu</div>

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

Torna in cima