- Learn
- Guida Layout dei siti con i CSS
- Layout a due colonne con posizionamento assoluto
Layout a due colonne con posizionamento assoluto
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
Se vuoi aggiornamenti su Layout a due colonne con posizionamento assoluto inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Creare un sigillo in ceralacca con Photoshop – parte 2
In questa seconda parte della guida vedremo come rifinire i dettagli interni al sigillo di ceralacca, in modo da renderlo […]