CSS: riproduzione di una scheda personale

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

Partiamo dalla seguente struttura 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 è il seguente:

body {
	margin: 2em;
	padding: 0;
	font-family: Helvetica, Arial, sans-serif;
	background: #fff;
	color: #000;
}

.scheda {
	border: 1px solid #000; 
	width: 30%;
	margin: 0 auto;
}
.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 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;
}

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.

Potete visionare l'esempio finale in questa pagina.