Assembliamo le conoscenze

A questo punto del nostro cammino, abbiamo quasi tutte le informazioni per poter costruire il nostro calendario. Se lo facessimo ci renderemo conto di avere un elenco puntato di giorni per ciascuna settimana, riportante solo il numero del giorno, talvolta come testo talvolta come collegamento ipertestuale. Facciamo un esperimento, proviamo a disabilitare il foglio di stile (possibile grazie alla developer toolbar disponibile sia per Firefox che per Internet Explorer), attualmente costituito dalla sola classe “hidden”, ci renderemo conto che i giorni del mese sono organizzati in un modo particolarmente semplice da interpretare (utenti disabili o meno).

Elaboriamo lo stile del calendario

Siamo pronti quindi a costruire le regole di stile al quale il nostro elenco puntato sarà vincolato.
Prima regola. Il calendario avrà una dimensione prestabilita (elaborata in EM) e non avrà i pallini che identificano l’elenco puntato:

  1.         #box-calendario{
  2.                 background-color: #fffff0;
  3.                 border: 0px solid #404040;
  4.                 width: 16em;
  5.                 height: 11.95em;
  6.                 margin-left: 0px;
  7.                 margin-top: 0px;
  8.                 padding-left: 0px;
  9.                 list-style: none;
  10.         }

Seconda regola. Tutti i giorni della settimana elencati avranno un altezza prestabilita, ed essendo un elenco puntato a loro volta, non avranno il pallino che solitamente lo identifica:

  1.         #box-calendario li ul{
  2.                 margin-left: 0px;
  3.                 padding-left: 0px;
  4.                 padding-top: 0px;
  5.                 list-style: none;
  6.                 height: 2em;
  7.         }

Terza regola. Tutti i margini devono essere a zero:

  1.         #box-calendario li{
  2.                 margin-top: 0px;
  3.                 padding-top: 0px;
  4.         }
  5.         #box-calendario li ul{
  6.                 margin-left: 0px;
  7.                 margin-top: 0px;
  8.         }
  9.         #box-calendario .settimana li{
  10.                 margin-left: 0px;
  11.         }

Quarta regola. Giorni e settimane saranno elementi fluttuanti:

  1.         #box-calendario .settimana{
  2.                 float: left;
  3.         }
  4.         #box-calendario .giorno{
  5.                 width: 1.90em;
  6.                 height: 1.90em;
  7.                 text-align: center;
  8.                 display: block;
  9.                 float: left;
  10.                 border : 1px solid #808080;
  11.                 background-color:#ffffff;
  12.                 color: #800000;
  13.         }