Layout web a due colonne posizionate in maniera assoluta con i CSS

Il box viene estratto dal flusso della pagina; può essere posizionato attraverso le proprietà left, right, top e bottom; esso si sovrappone agli altri elementi presenti nella pagina. Un box con "position:absolute" si riferisce al suo elemento genitore che abbia però position:relative. Questa è una cosa non di poco conto e si deve prestare molta attenzione. Divago un pò facendo vedere due esempi, in modo tale che sarà più semplice apprendere la costruzione di layout con questo metodo.
Si supponga di avere, in una pagina html, due box; uno lo chiamerò container e l' altro box1.
Ecco il codice:

#container{
width:500px;
height:400px;
margin:10px auto;
padding:0;
background-color:#ddd;
}
#box1{
position:absolute;
top:20px;
left:20px;
width:300px;
height:300px;
background-color:#666;
}

Tra i tag BODY scriviamo come segue:

<body>
<div id="container">
<div id="box1"></div>
</div>
</body>

Facile immaginare quello che vedremo nel browser. Avremo il box1 completamente "estratto" dal flusso della pagina, nonostante sia "incluso" nel div container, e posizionato a sinistra, con una distanza di 20 px dall' alto e dal vertice superiore sinistro, Ecco il file di esempio.

Visto? Il position:absolute >> prevale su qualsiasi altro tipo di posizionamento.
Adesso, sempre con lo stesso codice scritto sopra per i due box, apportiamo una piccola modifica al container ; cioè gli diamo un position:relative. Il box1 avrà sempre position:absolute. Che risultato avremo? Ecco il file di esempio. Questo cosa significa? Che un box con position:absolute FIGLIO di un altro box con position:relative, non verrà estratto dal flusso, ma contenuto al suo interno. Adesso ritorniamo all' argomento iniziale.

Position:static » è il valore di default di un box; l' elemento mantiene la sua posizione nel flusso del documento.

Position:relative » un box conserva la sua posizione nel flusso del documento ma può capitare che possa essere spostato rispetto all' origine del suo elemento genitore.

Position:fixed » come succede per il posizionamento assoluto, anche per "fixed" l' elemento viene estratto dal flusso della pagina, con la sola differenza che le coordinate di riferimento sono sempre quelle della finestra del browser.

Adesso che abbiamo appreso il principio del posizionamento, possiamo vedere la nostra pagina di layout; essa sarà composta da una testata (#header); sotto avremo un div che fa da contenitore (#container) all' interno del quale avremo una parte sinistra dedicata ai contenuti (#col-sx) ed una colonna destra per il menu (col-dx). Sotto il div #container, avremo il #footer. Diamo uno sguardo al file finale per poi analizzare il codice in esso contenuto. Di seguito il codice:

#header{
position:relative;
background-color:#f60;
height:80px;
text-align:left;
border-bottom:1px solid #00f;
}

Nulla di particolarmente difficoltoso in questa dichiarazione CSS; adesso vediamo il codice del div container:

#container{
position:relative;
background-color:#ddd;
text-align:left;
padding:0;
}

Questo contenitore deve avere al suo interno gli altri 2 che fungeranno da "colonne"; dopo sarà spiegato perchè è stata data una posizione relativa.

#col-sx{
position:relative;
margin-right:20%;
border-right:1px dashed #f00;
background-color:#fff;
padding-bottom:10px;
}
#col-dx{
position:absolute;
right:0;
top:0;
width:20%;
background-color:#ddd;
text-align:left;
}
#footer{
border-top:1px solid #000;
position:relative;
background-color:#888;
text-align:left;
height:50px;
}

Entriamo nel merito della dichiarazione di #container. Questo box serve ad identificare l' ingombro degli altri due, contenuti al suo interno. È stato dato il "position:relative" perchè le colonne che avranno "position:absolute" (#col-dx) si riferiscano proprio a #container, e non al body, come negli esempi che abbiamo visto all' inizio. Il box #col-sx è impostato con "position:relative" in modo tale che #container termina dove finisce #col-sx. La larghezza di #col-sx viene determinata attraverso il margin-right:20%, che è l' ampiezza della colonna destra. Ciò significa che la sua larghezza sarà dell' 80%.

La colonna destra (#col-dx) viene posizionata in maniera assoluta e gestita con le istruzioni right:0 e top:0. Attenzione: right e top, rispetto a quale box? #container ovviamente! Dopo che è stato "chiuso" il box #container, possiamo dichiarare il #footer, anch' esso con posizione relativa; si andrà a posizionare al di sotto di #container. Non rimane molto altro da dire ancora su questo layout se non il fatto che, visualizzato senza fogli di stile, verrà presentato prima il contenuto e poi il menu di navigazione, come è giusto che sia. Questo per agevolare coloro i quali non utilizzano browser visuali perchè in quel caso tutto il testo sarebbe posizionato all' ultimo posto.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati