Grid responsive!!

Eddai! sembra un ossimoro, no? però devo dire che funzionano benino una volta capite.. ne parlavo quanche tempo fa in un post.. ovvero il fatto che le tabelle/griglie sono superate dall’html3.. ma ce le troviamo riapparire nell’html5.. come mai? perchè hanno un significato semantico.

Alcune cose non avrebbero lo stesso significato se non fossero rappresentate secondo una tabella. E questa non è una semplice scelta stilistica da racchiudere nei fogli di stile, ma è SIGNIFICATO e come tale deve essere nell’html, in modo che se la pagina viene vista solo come CONTENUTI, in ogni modo il messaggio viene trasmesso..

ovvero?!?!?!esempio in un comunissimo questionario Vero e FAlso o delle domande a risp multipla. Se i radio e check box, ovvero i quadratini o rotondini dove potete clikkare e spuntare la risposta non sono in qualche modo “associati” alla domanda..

iframe 600pxX480px

[iframe src=”http://carnevali.lilithstudio.it/jq-mobile/grid01.html” width=”600″ height=”480″]
come si fa?!?!

Se nel fare una pagina responsive.. poi a prima vista non riesco più a ricondurre quale risposte appartengono a quale domande…CAvolo!! Chissenefrega che è responsive.. non è più utilizzabile! Quindi veniamo alla pratica..

Da una settimana sto litigando con jquerymobile.. rimando ad un altro post le mie prime impressioni HARGGGHH!!!

Quindi se vogliamo una griglia responsive di due colonne sarà così

<div>
<div><div>a. Lucia invita Marco e suo figlio a una festa di compleanno</div></div>
<div><div><fieldset data-role=”controlgroup” data-type=”horizontal”>
<input type=”radio” name=”radio-choice-h-2″ id=”radio-choice-h-2a” >
<label for=”radio-choice-h-2a”>Vero</label>
<input type=”radio” name=”radio-choice-h-2″ id=”radio-choice-h-2b” >
<label for=”radio-choice-h-2b”>Falso</label>
</fieldset></div></div>
</div>
<div>
<div><div>a. Lucia invita Marco e suo figlio a una festa di compleanno</div></div>
<div><div><fieldset data-role=”controlgroup” data-type=”horizontal”>
<input type=”radio” name=”radio-choice-h-2″ id=”radio-choice-h-2a” >
<label for=”radio-choice-h-2a”>Vero</label>
<input type=”radio” name=”radio-choice-h-2″ id=”radio-choice-h-2b” >
<label for=”radio-choice-h-2b”>Falso</label>
</fieldset></div></div>
</div>

Ma in questo modo .. la tabella c’è e si vede!

a voi la scelta!

iframe 300pxX450px

[iframe src=”http://carnevali.lilithstudio.it/jq-mobile/grid01.html” width=”300″ height=”480″]