Allineamento testo del form
Buongiorno a tutti.
Ho fatto un form che vorrei impaginare meglio. (Vedi immagine)http://portier.altervista.org/content/esempio.jpg
In particolar modo vorrei allineare meglio la parola "Annate" che cambia posizione nei vari browser.
Però mi piacerebbe anche allineare i vari testi a sinistra. Qualcuno può aiutarmi ? Grazie.
Per maggior completezza allego anche il relativo listato.
IL CSS:
Codice:
<style type="text/css">
#formBP {
width: 800px;
margin: 50px auto;
background: #BDC1FA url(content/gradient.png) repeat-x top;
padding: 25px;
overflow: hidden;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
legend {
color: #203360;
font-size: 20px;
}
fieldset { padding: 8px; }
.field { margin-bottom: 6px; padding: 3px; }
div.field label { float: left; width: 140px; }
div.field input { width: 230px; }
div.field select { width: 235px; }
.lascia { margin-bottom: 6px; padding: 3px; }
div.lascia label { float: left; width: 140px; }
div.lascia select .giorno, .mese { width: 60px; }
/* div.lascia select .anno { width: 350px; } */
.annate { margin-bottom: 6px; padding: 3px }
div.annate label { float: left; padding-left: 80px; width: 140px; }
div.annate select { float: left; width: 100px; }
fieldset.field { border: none; padding: 8px 3px; }
fieldset { overflow: hidden; padding: 8px; }
.field { float: left; }
div.field label { display: block; }
.lascia { float: left; }
div.lascia label { display: block; }
.annate { float: left; }
div.annate label { display: block; }
.options { list-style: none; margin: 0; padding: 4px 0 0 8px; }
.options input, .options label { float: right; }
.options li { float: left; margin-right: 8px; }
</style>
IL FORM
Codice:
<div id="formBP">
<form method="post" action="input.php">
<fieldset>
<legend>Inserisci un nuovo studente nell'archivio</legend>
<div class="field">
<label for="surname">Cognome:</label>
<input type="text" id="surname" name="cognome" />
</div>
<div class="field">
<label for="name">Nome:</label>
<input type="text" id="name" name="nome" />
</div>
<div class="field">
<label for="doc">Documento:</label>
<select name="tipoDoc" >
<option selected value="1"> BADGE CON FOTO </option>
<option value="2"> BADGE SENZA FOTO </option>
<option value="3"> CERTIFICATO UNIVERSITA'</option>
<option value="4"> LIBRETTO UNIVERSITARIO </option>
<option value="5"> CARTA IDENTITA' </option>
<option value="6"> PATENTE </option>
<option value="7"> PASSAPORTO </option>
<option value="8"> PERMESSO DI SOGGIORNO </option>
</select>
</div>
<div class="field">
<label for="ndoc">Nr. Documento:</label>
<input type="text" id="nDoc" name="nDoc" />
</div>
<div class="lascia">
<label for="rilasciato">Rilasciato in data:</label>
<select name="giorno">
<?php
for($i=1;$i<32;$i++){
echo "<option value=\"" . $i . "\">" . $i . "</option>\n";
}
?>
</select>
<select name="mese">
<?php
for($i=1;$i<13;$i++){
echo "<option value=\"" . $i . "\">" . $i . "</option>\n";
}
?>
</select>
<select name="anno">
<?php
for($i=2015;$i>1999;$i--){
echo "<option value=\"" . $i . "\">" . $i . "</option>\n";
}
?>
</select>
</div>
<div class="annate">
<label for="annate">Annate:</label>
<select name="arco" >
<option selected value="1"> </option>
<option value="2"> 2014-2015 </option>
<option value="3"> 2013-2014 </option>
<option value="4"> 2012-2013 </option>
<option value="5"> 2011-2012 </option>
<option value="6"> 2010-2011 </option>
<option value="7"> 2009-2010 </option>
<option value="8"> 2008-2009 </option>
<option value="9"> 2007-2008 </option>
</select>
</div>
<div class="field">
<label for="ente">Ente Certificatore:</label>
<select name="da" >
<option selected value="1"> </option>
<option value="2"> COMUNE </option>
<option value="3"> QUESTURA </option>
<option value="4"> UNIVERSITA' </option>
<option value="5"> M C T C </option>
<option value="6"> U.C.O. </option>
<option value="7"> M.C. </option>
<option value="8"> MIT-U.C.O. </option>
</select>
</div>
<div class="field">
<label for="luogo">Luogo - Provincia:</label>
<input type="text" id="luogo" name="luogo" />
</div>
</fieldset>
<input type="submit" name="submit" class="css_button" value="INSERISCI">
