Quinta Parte – Definizione delle regole di stile

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.         }

Potrebbero interessarti anche i seguenti articoli

Condividi:

Informazioni sull'autore

Diego La Monica
Diego La Monica
Programmatore esperto nei linguaggi del Web, ha scritto diversi articoli di carattere tecnico. Ha partecipato allo sviluppo di alcuni progetti OpenSource e ha tenuto diversi corsi per lo sviluppo di applicazioni web con strumenti Open Source. Le sue competenze in materia di analisi e sviluppo software gli hanno consentito di sviluppare un Framework Javascript per rendere più agevole lo sviluppo di applicazioni e siti web di ultima generazione cross-browser e multi piattaforma. La sua membership in IWA, gli ha consentito di partecipare ad alcuni gruppi di lavoro del W3C: HTML5 Working Group e Protocols and Formats Working Group al quale attualmente partecipa attivamente. Inoltre per IWA ha incarichi di responsabilità per la gestione e coordinamento delle Mailinglist tecniche e supporto alla manutenzione dei siti web.  Grazie alle sue competenza in materia di Standards, Usabilità ed Accessibilità ha avuto incarichi da diverse PA per lo  sviluppo e la resa di accessibilità dei siti istituzionali oltre ad avere incarichi per la manutenzione di software orientato al Web.

Commenti

Nessun commento

    Rispondi

    Link e informazioni