CSS Layout Monolitico

Autore: Bocchi Cinzia
Ultimo aggiornamento: 09/02/2014

1
Layout monolitico

Il layout monolitico adatto a siti di piccole dimensioni (con un ordine di pagine sotto la
decina). Il layout monolitico si compone di quattro sezioni fondamentali:
header
navigazione
contenuti
footer

Generalmente la navigazione disposta orizzontalmente sotto l'header, ma pu anche
essere disposta a fianco dei contenuti, ma senza estendersi verticalmente come o pi di
quest' ultima (si otterebbe in questo caso un layout a due colonne).
In un layout monolitico si dovrebbe sempre specificare e dichiarare esplicitamente la
larghezza dell'area principale. Non dichiarando la larghezza esplicitamente, il layout si
adatta alla larghezza della finestra del browser. Questo potrebbe costringere un utente
con monitor ad alte o altissime risoluzioni a stringere la finestra del browser per aumentare
la leggibilit del sito. Infatti, linee di testo troppo lunghe causano difficolt di lettura.
Vediamo il codice HTML di questo layout.

<!DOCTYPE html>
<html>
<head>
<title>Layout monolitico</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="header">
LAYOUT MONOLITICO<br>
HEADER
</div> 
<div id="navigation">
NAVIGATION
</div> 
<div id="content">
CONTENT
</div> 

<div id="footer">
FOOTER
</div> 
</div> 
</body>
</html>

2
Nel seguito vengono mostrati tre diversi stili per il layout proposto.

Layout monolitico fisso

Fig. 1 Esempio di layout monolitico fisso

body {
margin: 0;
padding: 0;
}
#wrapper {
margin: 0 auto;
width: 920px;
}
#header {
height: 100px;
margin: 10px 0 0 0;
padding: 10px;
background-color: #334433;
color: #FFF;
}
#navigation {
margin: 0;
padding: 10px;
background-color: #6699AA;
color: #FFF;
}
#content {
height: 350px;
margin: 0;
padding: 10px;

3
background-color: #AACCCC;
color: #FFF;
}
#footer {
margin: 0 0 10px 0;
padding: 10px;
color: #FFF;
}

Le regole riguardanti il colore di sfondo (background-color) e il colore in primo piano (color)
sono state aggiunte unicamente per rendere visibile le sezioni nella pagina web.

Layout monolitico fluido

Fig. 2 Esempio di layout monolitico fluido

body {
margin: 0;
padding: 0;
}
#wrapper {
margin: 0 auto;
/*920:1280 = x:100 ==> = 72%*/
width: 72%;
}
#header {
height: 100px;
margin: 10px 0 0 0;
padding: 10px;

4
color: #FFF;
}
#navigation {
margin: 0;
padding: 10px;
color: #FFF;
}
#content {
height: 350px;
margin: 0;
padding: 10px;
color: #FFF;
}
#footer {
margin: 0 0 10px 0;
padding: 10px;
color: #FFF;
}


Layout monolitico elastico

html {
font-size:100%;
}
body {
margin: 0;
padding: 0;
}
#wrapper {
margin: 0 auto;
/*1px = 0.0625em ==> 920px = 57.5em*/
width: 57.5em;
}
#header {
/*100px = 6.25em*/
height: 6.25em;
/*10px = 0.625em*/
margin: 0.625em 0 0 0;

5
padding: 0.625em;
color: #FFF;
}
#navigation {
margin: 0;
padding: 0.625em;
color: #FFF;
}
#content {
/*350px = 21.875em*/
height: 21.875em;
margin: 0;
padding: 0.625em;
color: #FFF;
}
#footer {
margin: 0 0 0.625em 0;
padding: 0.625em;
color: #FFF;
}


Fig. 3 Esempio di layout monolitico elastico

6
La figura 4 mostra come variano i layout al variare della dimensione del font del browser.
La figura 5 mostra il modo in cui si modificano i layout al diminuire della dimensione della
finestra del browser.

Carattere Molto Piccolo (in Chrome)
FISSO

FLUIDO

ELASTICO

Fig. 4 Variazione dei layout al variare della dimensione del font del browser

7

Zoom al 50%
FISSO

FLUIDO

ELASTICO

8
Zoom al 150%
FISSO

FLUIDO

ELASTICO

Fig. 5 Variazione dei layout al variare della dimensione della finestra del browser

9
Confronto del codice

FISSO FLUIDO ELASTICO
#html
font-size:100%;

#body
margin: 0;
padding: 0;

margin: 0;
padding: 0;

margin: 0;
padding: 0;

#wrapper
margin: 0 auto;

width: 920px;

margin: 0 auto;
/*920:1280=x:100 ==>
x=72%*/
width: 72%;

margin: 0 auto;
/*1px = 0.0625em ==>
920px = 57.5em*/
width: 57.5em;

#header

height: 100px;

margin: 10px 0 0
0;
padding: 10px;
background-color:
#334433;
color: #FFF;

height: 100px;

margin: 10px 0 0 0;
padding: 10px;
background-color:
#334433;
color: #FFF;

/*100px = 6.25em*/
height: 6.25em;
/*10px = 0.625em*/
margin: 0.625em 0 0 0;
padding: 0.625em;
background-color:
#334433;
color: #FFF;

#navigation
margin: 0;
padding: 10px;
background-color:
#6699AA;
color: #FFF;
margin: 0;
padding: 10px;
background-color:
#6699AA;
color: #FFF;

margin: 0;
padding: 0.625em;
background-color:
#6699AA;
color: #FFF;
#content

height: 350px;
margin: 0;
padding: 10px;
background-color:
#AACCCC;
color: #FFF;

height: 350px;
margin: 0;
padding: 10px;
background-color:
#AACCCC;
color: #FFF;

/*350px = 21.875em*/
height: 21.875em;
margin: 0;
padding: 0.625em;
background-color:
#AACCCC;
color: #FFF;

#footer
margin: 0 0 10px
0;
padding: 10px;
background-color:
#334433;
color: #FFF;

margin: 0 0 10px 0;
padding: 10px;
background-color:
#334433;
color: #FFF;

margin: 0 0 0.625em 0;
padding: 0.625em;
background-color:
#334433;
color: #FFF;

10

Quest'opera stata rilasciata con licenza Creative Commons Attribuzione - Non commerciale - Condividi allo
stesso modo 3.0 Italia. Per leggere una copia della licenza visita il sito web
http://creativecommons.org/licenses/by-nc-sa/3.0/it/ o spedisci una lettera a Creative Commons, 171
Second Street, Suite 300, San Francisco, California, 94105, USA.

CSS Layout Monolitico

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS Layout Monolitico

Uploaded by

Copyright:

Available Formats

Autore: Bocchi Cinzia

Ultimo aggiornamento: 09/02/2014

You might also like