Newsgroup: it.comp.www.html
Titolo: allineare testo ed elementi dei form

saluti a tutti.
sono sicuro di star mangiando dell'oca, ma non ci cavo i piedi.
fino ad oggi non mi sono posto il problema perche' i form li allineavo
come ero piu' comodo con delle tabelle annidate, pero' adesso volevo
"pulire" di piu' il lavoro che ho fatto e semplificare il codice.
mi trovo in questa situazione: specifico style e dimensione del font
che devo usare in un css e poi inserisco alcune checkboxes ed alcuni
radio nel mio form. a fianco di questi elementi devo scriverci a cosa
corrispondono, ma, essendo il font che utilizzo relativamente piccolo,
il testo e' sempre un po' troppo in basso rispetto al radio/checkbox
che gli corrisponde. al di la' dell'aspetto grafico orribile ho il
problema che quando ci sono vari elementi uno sotto l'altro si rischia
di confonderli e non e' chiaro al 100% quel che si sta guardando.
mi aiutate a capire dove sto sbagliando?
un esempio banale di quello che vedo sbagliato e' --considerate che
sto ancora spostando le ultime cose dai sorgenti html al css--:
<table border="0" cellpadding="0" cellspacing="0" class="color-border"
width="450"><tr><td>
[...]
<table border="0" cellpadding="2" cellspacing="1" width="100%">
[...]
<tr class="color-row">
   <td height="18" colspan="2"><p class="label">&nbsp; <input
style="font-size:9px" type="radio" name="ut" value="1" checked> uno
<input type="radio" name="ut" value="0"> zero</p></td>
</tr>
[...]
</table>
[...]
</td></tr></table>
nel css c'e':
[...]
.color-border           {background-color:666666;}
.color-row              {background-color:fffff5;}
.label,.text,.link      {font-size:70%;font-family:
tahoma,arial,Geneva,Helvetica,sans-serif;}
td,p                    {font-family:
tahoma,arial,Geneva,Helvetica,sans-serif;}
[...]
quello che succede e' che il testo di fianco ai 2 radio compare molto
in basso, ed e' orripilante oltre che poco chiaro --soprattutto se ci
fosse una seconda fila di radio sotto--.
grazie in anticipo.
saluti.
-- 
Gianni Rondinini
Icem s.r.l. - 
http://www.icem.it
Tel: 
+39 0545 78036
Fax: 
+39 0545 78727

 saluti.
Potresti provare a mettere tutti gli elementi in celle separate.
Qualcosa del genere:
<body>
<table border="0" cellpadding="0" cellspacing="0" class="color-border"
width="180">
    <tr><td>
	<table border="0" cellpadding="2" cellspacing="1" width="100%">
	<tr class="color-row">
	  <td height="18" class="label">&nbsp; 
	  <input style="font-size:9px" type="radio" name="ut" value="1"
checked>
	  </td>
	  <td class="label">
	  uno
	  </td>
	  <td height="18" class="label">
	  <input type="radio" name="ut" value="0">
	  </td>
	  <td class="label">
	  zero
	  </td>
	  </tr>
	  </table>
     </td></tr>
</table>
</body>
-- 
Posted via Mailgate.ORG Server - 
http://www.Mailgate.ORG

 "pulire" di piu' il lavoro che ho fatto e semplificare il codice.
[..cut..]
Puoi dare uno sguardo all' impaginazione dei form con i css.
Una ventina di post più sotto ho scritto:
Impaginare i form con i css:
http://pro.html.it/articoli/id_485/idcat_31/pro.html
http://pro.html.it/articoli/id_487/idcat_31/pro.html
http://pro.html.it/articoli/id_488/idcat_31/pro.html
Sempre relativi ai form:
- l' articolo sulla marcatura (da leggere per primo):
http://pro.html.it/articoli/id_483/idcat_31/pro.html
- e quello su come migliorare i form con javascript,
validazione inclusa (da leggere per ultimo):
http://pro.html.it/articoli/id_541/idcat_11/pro.html
Ciao,
    Alessandro Fulciniti