La risorsa di IWA Italy sull'accessibilità del webLa risorsa di IWA Italy sull'accessibilità del Web

Webaccessibile.orgWebaccessibile.org


Accesso Rapido

Sei in: Home > Calendario senza tabella > Articolo: Terza Parte - Strutturare mesi e settimane

Terza Parte - Strutturare mesi e settimane

A cura di Diego La Monica | Venerdì 30 Marzo 2007
Link permanente

Strutturiamo il mese

Come abbiamo anticipato inizialmente, il calendario sarà strutturato secondo un elenco puntato non ordinato. Di conseguenza le settimane che comporranno il calendario saranno una serie di elementi di un unico elenco puntato:

  1.         <ul id=“box-calendario”>
  2.                 <li class=“settimana” id=“settimana-1″>
  3.                 </li>
  4.                 <li class=“settimana” id=“settimana-2″>
  5.                 </li>
  6.                 <li class=“settimana” id=“settimana-3″>
  7.                 </li>
  8.                 <li class=“settimana” id=“settimana-4″>
  9.                 </li>
  10.                 <li class=“settimana” id=“settimana-5″>
  11.                 </li>
  12.         </ul>

Ok abbiamo creato quello che in una tabella sarebbero state le 5 righe.
Osservate una cosa: ci sono cinque righe. Esattamente quante sono le settimane. In una tabella avremmo dovuto creare anche una riga di intestazione. Dove sarà andata a finire?
Per ora tralasciamo questo (importante) particolare e soffermiamoci sul resto.

Strutturiamo una settimana tipo

Tutte le settimane saranno organizzate in sette giorni. Il modo più conveniente di organizzare i sette giorni di ciascuna settimana è tramite un elenco puntato non ordinato secondo lo schema che segue:

  1.         <li class=“settimana” id=“settimana-1″>
  2.                 <li class=“giorno” id=“giorno-1″>
  3.                 </li>
  4.                 <li class=“giorno” id=“giorno-2″>
  5.                 </li>
  6.                 <li class=“giorno” id=“giorno-3″>
  7.                 </li>
  8.                 <li class=“giorno” id=“giorno-4″>
  9.                 </li>
  10.                 <li class=“giorno” id=“giorno-5″>
  11.                 </li>
  12.                 <li class=“giorno” id=“giorno-6″>
  13.                 </li>
  14.                 <li class=“giorno” id=“giorno-7″>
  15.                 </li>
  16.         </li>

Quanto riportato sopra rappresenta un solo giorno.

I commenti sono chiusi.