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
Ultimi articoli CSS
Il posizionamento del contenuto generato da CSSIntrodurre le forme, come i triangoli, e posizionarle per abbellire... |
CSS3 Border-radius e Box-shadow su Internet Explorer con CSS3PIEUtilizzare CSS3PIE per implementare importanti proprietà CSS3 anche... |
Forme con i CSS: disegnare triangoliCome generare forme sfruttando solamente i CSS per disegnare triangoli |
Web Fonts: ottimizzazione cross-browserInserire font con la direttiva @font-face su tutti i browser con un... |
Progress Bar con CSS3Realizzare una barra di avanzamento cross-browser sfruttando la... |
Guide CSS
Guida CSS3Scoprire e usare al meglio tutte le novità dell'ultima versione dei... |
Guida CSS Tecniche essenzialiTesto, immagini, layout, form, liste, tabelle: soluzioni pronte per... |
Guida Interfacce web con PhotoshopQuesta guida mostra con semplici esempi come lavorare ad un layout e... |
Newsletter @CSS
Ogni mercoledì, direttamente nella tua e-mail: guide, articoli, tutorial, FAQ e approfondimenti tecnici su CSS e Web Design.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Google AdWords Base27 Febbraio 2012 a Milano |
|
|
Corso Webmaster base12 Marzo 2012 a Milano |
|
|
Corso Webmaster base20 Febbraio 2012 a Roma |
|
|
Corso Google AdWords Base28 Marzo 2012 a Roma |