Utente:Gvf/Template sinottici con uso delle classi

Questa pagina è una bozza!

Motivazioni

• Unificare la visualizzazione delle tabelle
• Spostare per quanto possibile l'impaginazione nei CSS togliendola dai dati
• Semplificare e alleggerire il codice dei template
• Migliorare l'accessibilità
• Rendere possibile la personalizzazione della visualizzazione

Elenco classi necessarie

• sinottico
  • si applica a tutta la tabella, definisce le caratteristiche della tabella e quelle comuni a tutti gli elementi della stessa
    • larghezza tabella
    • bordo
    • margini
    • padding
    • dimensioni caratteri
    • float
    • clear
    • colore fondo
    • colore carattere
• sinottico-testata
  • si applica alla sola testata (va inserita due volte a livello di riga e di campo)
    • centra il testo
    • dimensione del carattere
    • fondo grigio di default (modificabile con style="background: <colore>"; )
• sinottico-divisione
  • si applica alle varie barre di divisione
    • centra il testo
    • dimensione del carattere
    • fondo grigio di default (modificabile con style="background: <colore>"; )
• sinottico th
  • si applica a tutta la colonna delle etichette (usando la wikisintassi !)
    • larghezza colonna
    • allineamento testo orizzontale
    • allineamento testo verticale
• sinottico-piede
  • si applica alla ultima riga della tabella
    • centra il testo
    • dimensione del carattere
    • fondo grigio di default (modificabile con style="background: <colore>"; )

Contenuto delle varie classi

 
.sinottico {
    border:1px solid #aaaaaa;
    background-color:#f9f9f9;
    padding:3px;
    font-size: 95%;
    clear:right;
    width:250px;
    float:right;
    margin: 0 0 1em .5em;
    vertical-align: top;
}
 
.sinottico th {
    background-color: #f2f2f2;
    padding: 0em 0.5em;
    text-align: right;
    vertical-align: top;
}
 
.sinottico td {
    padding: 0em 0.2em;
    vertical-align: top;
}
 
.sinottico_testata th {
    font-size: 120%;
    padding: 0em 0.5em;
    background-color: #dedede;
    text-align: center;
}
 
.sinottico_piede {
    text-align: center;
    font-size: 90%;
    background:#EFEFEF;
}
 
.sinottico_divisione th {
    color: black;
    font-size: 100%;
    padding: 0em 0.5em;
    background-color: #eeeeee;
    text-align: center;
}