Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 21 di 41
  • livello principiante
Indice lezioni

Layout a due colonne con posizionamento assoluto

Tecnica, vantaggi e problemi noti dell'approccio alternativo ai float
Tecnica, vantaggi e problemi noti dell'approccio alternativo ai float
Link copiato negli appunti

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

Ti consigliamo anche