Il layout a due colonne con posizionamenti assoluti presenta dei significati vantaggi esterni rispetto all’analogo con i float. Questi sono l’accessibilità e delle migliori chanche di indicizzazione e posizionamento sui motori di ricerca. Ha però uno svantaggio: non consente di avere la colonna di navigazione più lunga della colonna dei contenuti se vogliamo avere un footer a larghezza piena. Se siamo disposti ad accettare questa condizione, a parer mio il layout con posizionamenti assoluti è da preferire.

Anche in questo caso le sezioni fondamentali sono quattro: header, navigazione, contenuti e footer. Cambia il codice HTML, in quanto la navigazione deve essere preceduta dai contenuti. Ecco quindi l’HTML elementare di questo layout:

<body>
    <div id=”container”>
        <div id=”header”></div>
        <div id=”content”></div>
        <div id=”navigation”></div>
        <div id=”footer”></div>
    </div>
</body>

Ora vediamo quali sono le regole CSS minimali per realizzare un layout a due colonne con i posizionamenti assoluti:

div#container{
    position: relative;
    }

div#content{
    margin-right: 200px;
    }

div#navigation{
    position: absolute;
    top: 80px; /*l’ altezza dell’ header*/
    right: 0;
    width: 180px;   /*un po’ di meno per evitare l’ uso del padding*/
    }

In sostanza il meccanismo è questo: il container viene dichiarato position:relative per consentire il posizionamento al suo interno. Il div dei contenuti lascia spazio sulla destra per la navigazione e allo stesso tempo, implicitamente, permette al footer di disporsi a fondo pagina riprendendosi il flusso degli elementi; infine la navigazione è posizionata assolutamente.

Anche qui vediamo il risultato.

Allo stesso modo con cui abbiamo realizzato il layout a due colonne cromatiche con i float, possiamo ottenere il layout a due colonne cromatiche con il colore e con l’ immagine di background.

Scarica il file zip di questa lezione
22 / 41

Layout a due colonne fluidi

I Video di HTML.it

Costruire una pagina con Twitter Bootstrap – Parte 3

Dopo aver scaricato ed inserito tutti i componenti necessari per usare Bootstrap all’interno della nostra pagina web, sarà necessario utilizzare […]