template CSS per un sito con layout header - due colonne e Footer



1)
inseriamo l'html nella nostra pagina di lavoro

i blocchi costitutivi saranno dei div strutturati in questa maniera

  • div id="container"
    • div id="header"
    • div id="navbar"
    • div id="content"
      • div id="col1"
      • div id="col2"
    • div id="footer"






CODICE HTML



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
<!-- ho rimosso il codice css che ho trascritto sotto -->
</style>
</head>
 
<body>
<div id="container">
    <div id="header">
        <p>header</p>
    </div><!--chiusura header-->
    <div id="nabvar">
        <p>navbar</p>
    </div><!--chiusura navbar-->
    <div id="content">
        <div id="col1">
            <p>col1</p>
            <p>elementum ultrices dui   et sodales. Mauris pretium
rutrum mauris, sed   dignissim eros   consectetur quis. Proin ullamcorper
convallis lorem et   vehicula.   Phasellus lorem est, tincidunt vitae facilisis
vel, congue   vitae libero.   Nam blandit leo turpis. Nulla facilisi. Quisque
tincidunt urna quis   eros commodo imperdiet. Cras volutpat, orci in   tincidunt
tincidunt,   metus nunc aliquet lacus, nec pulvinar odio orci   non tortor.
Aliquam   condimentum ultrices sem quis accumsan. Cum sociis   natoque penatibus et
magnis dis parturient montes, nascetur ridiculus   mus. Proin sollicitudin
elit non nibh placerat adipiscing auctor   justo lobortis. Duis laoreet,
arcu sit amet aliquet accumsan, nulla   sem varius quam, id vestibulum
purus sapien at mauris. Curabitur in   sapien quam. </p>
        </div><!--chiusura col1-->
        <div id="col2">
            <p>col2</p>
            <p>elementum ultrices dui   et sodales. Mauris pretium
rutrum mauris, sed   dignissim eros   consectetur quis. Proin ullam
corper convallis lorem et   vehicula.   Phasellus lorem est, tincidunt
vitae facilisis vel, congue   vitae libero.   Nam blandit leo turpis.
Nulla facilisi. Quisque   tincidunt urna quis   eros commodo imperdiet.
Cras volutpat, orci in   tincidunt tincidunt,   metus nunc aliquet
lacus, nec pulvinar odio orci   non tortor. Aliquam   condimentum
ultrices sem quis accumsan. urabitur in   sapien quam. </p>
            <p>&nbsp;</p>
        </div><!--chiusura col2-->
    </div><!--chiusura content-->
    <div id="footer">
        <p>footer</p>
    </div>
</div><!--chiusura container-->
</body>
</html>
 

CODICE CSS



* {
    margin: 0px;
    padding: 0px;
    color: #FFF;
}/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    reset generale
    si tratta di mettere a 0 margin e padding di tutti gli elementi
    in questo caso ho usato, un po' rudemente
    il selettore universale asterisco per dare una regola per ogni elemento html
    normalemente si inserisce un apposito foglio css per un reset più mirato
    ========================================
*/
body {
    background-color: #CCC;
}
#container {
    background-color: #096;
    width: 960px;
    margin-right: auto;
    margin-left: auto;
} /* dimensiono e centro il contenitore */
#header {
    background-color: #6CF;
    height: 200px;
} /* altezza del header */
#nabvar {
    background-color: #366;
    height: 60px;
} /* altezza della navbar */
#content {
    background-color: #333;
    overflow: auto;
} /* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
                  qui la proprietà overflow fa il
                  cosiddetto clearfix, evita che il blocco
                  #content collassi a causa del fatto che le
                  colonne interne sono float
     =======================================
  */
#col1 {
    background-color: #936;
    width: 240px;
    float: left;
    min-height: 400px;
} /* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
                  qui fisso la larghezza della colonna in px
                  si possono ovviamente usare anche le misure %
                  attenzione a ricordare che in caso di padding e border non a 0
                  bisogna sottrarre le dimensioni dalla width.
                  Invertire il float left con il right sposta le
                  due colonne.
                  La proprietà min-height stabilisce l'altezza
                  minima della colonna e evita la paginetta corta
                  in caso di poco contenuto
     =======================================
  */
#col2 {
    background-color: #C90;
    width: 710px;
    float: right;
    min-height: 400px;
} /* uguale (e simmetrico) alla regola precedente */
#footer {
    height: 120px;
    background-color: #930;
    clear: both;
}/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
                  qui il clear : both fa scendere il footer
                  sotto le colonne
                  è il metodo classico ma in questo caso
                  dovrebbe bastare la regola
                  applicata al content
    =======================================
  */