Riprodurre una scheda personale con i CSS
Introduzione
Almeno una volta nella vita, tutti noi abbiamo avuto a che fare con delle schede da compilare. Con l'avvento del Web, molti siti istituzionali hanno permesso agli utenti di scaricare delle riproduzioni delle schede e dei moduli che si trovano negli uffici. In genere queste schede sono in formato PDF o in alcuni casi in un formato compatibile con i più diffusi word processor. Per chi si occupa di fogli di stile, le schede da compilare costituiscono un ottimo esercizio di formattazione. In questo articolo vedremo come riprodurre con i CSS un'ipotetica scheda in cui inserire i nostri dati personali.
Il codice
Partiamo da una semplice struttura (X)HTML:
<div class="scheda"> <h2>I miei dati anagrafici</h2> <p class="numero">1.</p> <ul class="dati"> <li><strong>Nome</strong></li> <li><strong>Cognome</strong></li> <li><strong>Luogo di nascita</strong></li> <li><strong>Data di nascita</strong></li> <li><strong>Nazionalità</strong></li> <li><strong>Indirizzo</strong></li> <li><strong>Numero di telefono</strong></li> <li><strong>Persone con cui vivo</strong></li> </ul> </div>
Vogliamo che il numero della sezione compaia affianco ai dati anagrafici da inserire. Inoltre vogliamo che le voci dei singoli
dati si incastonino nel bordo inferiore degli elementi li, riproducendo in questo modo il classico spazio bianco
presente in molte schede di questo tipo, che ricorda da vicino il layout dei menu dei ristoranti. Il codice
CSS potrebbe dunque essere:
body {
margin: 2em;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
background: #fff;
color: #000;
}
.scheda {
border: 1px solid #000;
width: 70%;
}
.scheda:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
clear: both;
visibility: hidden;
}
h2 {
border-bottom: 1px solid #000;
text-transform: uppercase;
margin: 0;
padding: 0.5em;
}
p.numero {
font-size: 2em;
float: left;
margin: 0;
width: 1em;
padding: 0.2em 0.1em 0 0.5em;
}
ul.dati {
width: 80%;
float: left;
margin: 0;
padding: 0;
}
ul.dati li {
display: block;
margin: 1em 0;
border-bottom: 1px solid;
}
ul.dati li strong {
padding: 0 0.2em 0.3em 0;
background: #fff;
color: #000;
position: relative;
bottom: -0.4em;
}
Il risultato finale risulta compatibile con Internet Explorer 5 Windows tramite l'aggiunta del seguente codice:
<!--[if lt IE 7]>
<style type="text/css">
ul.dati {list-style /**/: none;}
ul.dati li strong {
height /**/: 0;
margin-left /**/: -1em;
bottom /**/: -0.8em;
}
p.numero {padding-top /**/: 0.4em;}
</style>
<![endif]-->
Il posizionamento degli elementi all'interno della scheda è stato realizzato tramite la proprietà
float. Da notare l'utilizzo dell'easy clearing per il
contenimento dei float:
.scheda:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
clear: both;
visibility: hidden;
}
Explorer Windows contiene automaticamente i float nel loro contenitore, e quindi il codice sopra riportato vale solo per i browser standard compliant. L'effetto di incastonatura nel bordo si ottiene con un codice molto semplice:
ul.dati li strong {
padding: 0 0.2em 0.3em 0;
background: #fff;
color: #000;
position: relative;
bottom: -0.4em;
}
L'elemento strong viene pozionato in modo relativo, al fine di coprire con il suo sfondo (uguale allo sfondo
della pagina) il bordo inferiore dell'elemento li.
Infine una nota sull'accessibilità degli elenchi: come avrete notato, il marcatore dell'elenco non ordinato
è stato soppresso tramite la dichiarazione display: block per l'elemento li e non con
list-style: none. La ragione risiede nel fatto che la seconda dichiarazione può causare problemi
ai lettori di schermo, in particolare per quanto riguarda la successione negli elenchi ordinati. Ringrazio
Michele Diodati per la preziosa segnalazione. Tuttavia, come si è visto,
Explorer 5 Windows necessita purtroppo della suddetta dichiarazione, in quanto sembra che il semplice
display: block non sia sufficiente a sopprimere il marcatore di elenco in questo browser.