Area cliccabile striminzita? Allarghiamola

Il web dev’essere COMODO. Un’interfaccia con pulsanti ampi e spaziosi dove cliccare senza essere troppo precisi migliora la rapidità d’uso dell’applicazione e diminuisce la frustrazione dell’utente.

A questo proposito ci viene in aiuto CSS: basta infatti uno stile tipo questo per aumentare l’area cliccabile di un link:

A{display:block;*width:100%;padding:1em;}

E per checkbox radio buttons cosa si può fare? Ho realizzato un esempio che si basa sull’utilizzo di LABEL, che come molti di voi sapranno, quando cliccato seleziona/deseleziona il campo input ad esso legato. Il pregio è che non servono ne JavaScript ne links, il difetto è che non è il massimo dell’accessibilità mettere il campo INPUT all’interno del LABEL… ma se l’accessibilità non è tra le nostre priorità, siamo a posto!

http://www.mephit.it/jure%5Fwordpress%5Fcom/check/check.htm

EDIT (07/03/2008): Il W3C ammette l’uso di INPUT all’interno di LABEL, e nella definizione delle norme del WAI viene mostrato un esempio analogo,  quindi nessun problema per l’accessibilità!

Layout tableless, “clear” non serve!

Ricordate!!! NON SERVE!!! Fate così invece!! tutto stà nella classe “floatFix” da applicare al contenitore e che ripara il “FLOAT MODEL”.

<style>
.floatFix{overflow:hidden;width:auto;*width:100%;}
.box{background:#ccc;}
.col1di2{float:left;width:30%;}
.col2di2{float:left;width:70%;}
</style>

<div class="box floatFix">
<div class="col1di2">sinistra</div>
<div class="col2di2">destra<br/>destra<br/>destra<br/>destra<br/>
</div>