Come creare un layout con i css ed il box model. Esempi layout a 2 o 3 colonne.
ALLWEB free
Web Directory Script Linguaggi
Italiano Inglese Tutte
 
 26 Oct 2014
aggiungi in preferiti  
Home    Mappa directory    Script




Layout css e box model:

Le specifiche del W3C riguardanti il linguaggio XHTML prevedono che per il layout di una pagina web sia da deprecare l'utilizzo delle tabelle a favore del box model.

Per creare un corretto layout Ŕ indispensabile utilizzare la proprietÓ float dei css, senza la quale otterremo soltanto un susseguirsi verticale di box.

Primo punto fondamentale per creare un layout con i box model Ŕ quello di costruire un contenitore generale, ossia colui che contiene tutta l'impaginazione ed Ŕ posizionato in un punto prestabilito della finestra browser.
La posizione pu˛ essere fissa (stabilita da coordinate), oppure mobile (center, left, right). A tale proposito vi rimandiamo a questo articolo.

Per semplificare l'esempio in oggetto abbiamo inserito gli style all'interno della pagina, ma Ŕ sempre buona norma inserire fogli CSS esterni.
<html>
<head>
<style type="text/css">
body{text-align:center;}
div#boxbig{border:2px solid black; width:800px; height:600px; margin:0 auto 0 auto; text-align:left;}
</style>
</head>
<body>
<div id="boxbig">
Contenuto box, qui dobbiamo inserire il nostro layout.
</div>
</body>
</html>
Puoi vedere l'esempio cliccando qui.



Layout a 2 colonne semplici:

Per creare due semplici colonne dobbiamo inserire due box all'interno del contenitore generale, ed inserire un float:left; all'interno dei css che regolano la colonna di sinistra, ed un float:right; all'interno dei css che regolano la colonna di destra.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body{text-align:center;}
div#boxbig{border:2px solid black; width:800px; height:700px; margin:0 auto 0 auto; text-align:left;}
div#boxmenu{float:left; border:2px solid green; width:200px; height:696px;}
div#boxcontenuto{float:right; border:2px solid red; width:592px; height:696px;}
</style>
</head>
<body>
<div id="boxbig">
<div id="boxmenu">
Qui possiamo inserire il nostro menu di navigazione.
<ul>
<li>prima voce</li>
<li>seconda voce</li>
<li>seconda voce</li>
</ul>
</div>
<div id="boxcontenuto">
Qui inseriamo il contenuto della pagina.
</div>
</div>
</body>
</html>
Puoi vedere l'esempio cliccando qui.

Nell'esempio la larghezza del box contenuto Ŕ 592px e non 600px perchŔ abbiamo 4+4=8 px di bordo dei box da conteggiare. Per lo stesso motivo l'altezza non Ŕ 700px ma 996px (vedi esempio per maggior chiarezza).



Layout a 2 colonne con intestazione:

Per creare una colonna di intestazione dobbiamo inserire un box sopra i box con l'attributo float con larghezza pari a tutta la larghezza del box contenitore generale (boxbig).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body{text-align:center;}
div#boxbig{border:2px solid black; width:800px; height:850px; margin:0 auto 0 auto; text-align:left;}
div#boxintestazione{border:2px solid blue; width:796px; height:150px;}
div#boxmenu{float:left; border:2px solid green; width:200px; height:692px;}
div#boxcontenuto{float:right; border:2px solid red; width:592px; height:692px;}
</style>
</head>
<body>
<div id="boxbig">
<div id="boxintestazione">
Intestazione, titolo, immagini ecc...
</div>
<div id="boxmenu">
Qui possiamo inserire il nostro menu di navigazione.
<ul>
<li>prima voce</li>
<li>seconda voce</li>
<li>seconda voce</li>
</ul>
</div>
<div id="boxcontenuto">
Qui inseriamo il contenuto della pagina.
</div>
</div>
</body>
</html>
Puoi vedere l'esempio cliccando qui.

Nell'esempio la larghezza del box di intestazione Ŕ 796px perchŔ dobbiamo togliere 2+2=4 px di bordi agli 800px del box pi¨ grande (boxbig). Per lo stesso motivo sono state modificate anche le dimensioni width e height degli altri box.



Layout a 3 colonne con intestazione:

Per creare un layout a tre colonne Ŕ necessario inserire un terzo box all'interno del box big con una larghezza minima pari alla differenza fra la misura del box big meno la somma dei due box con l'attributo float (vedi l'esempio).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body{text-align:center;}
div#boxbig{border:2px solid black; width:800px; height:900px; margin:0 auto 0 auto; text-align:left;}
div#boxintestazione{border:2px solid blue; width:796px; height:150px;}
div#boxmenusx{float:left; border:2px solid green; width:150px; height:742px;}
div#boxmenudx{float:right; border:2px solid green; width:150px; height:742px;}
div#boxcontenuto{border:2px solid red; height:742px;}
</style>
</head>
<body>
<div id="boxbig">
Box big, largo 800px (compreso 2 px di bordo) <div id="boxintestazione">
Intestazione larga 796px
</div>
<div id="boxmenusx">
Menu di navigazione sinistro, largo 150px.
</div>
<div id="boxmenudx">
Menu di navigazione destro, largo 150px.
</div>
<div id="boxcontenuto">
Contenuto della pagina, larghezza libera.
</div>
</div>
</body>
</html>
Puoi vedere l'esempio cliccando qui.