Visualizzazione risultati 1 fino 3 di 3

Discussione: Allineamento testo del form

  1. #1
    portier non è connesso Utente
    Data registrazione
    07-06-2014
    Messaggi
    127

    Predefinito Allineamento testo del form

    Buongiorno a tutti.
    Ho fatto un form che vorrei impaginare meglio. (Vedi immagine)
    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">

  2. #2
    karl94 non è connesso Staff AV
    Data registrazione
    03-10-2005
    Messaggi
    17,745

    Predefinito

    Per l'allineamento dovrebbe essere sufficiente impostare la proprietà CSS text-align su center per gli elementi label.
    Comunque per la differente visualizzazione a seconda del browser dovresti indicare l'indirizzo della pagina in questione e i browser che hai provato, con la descrizione del relativo comportamento.

  3. #3
    portier non è connesso Utente
    Data registrazione
    07-06-2014
    Messaggi
    127

    Predefinito

    Citazione Originalmente inviato da karl94 Visualizza messaggio
    Per l'allineamento dovrebbe essere sufficiente impostare la proprietà CSS text-align su center per gli elementi label.
    Comunque per la differente visualizzazione a seconda del browser dovresti indicare l'indirizzo della pagina in questione e i browser che hai provato, con la descrizione del relativo comportamento.
    Grazie karl94. E' bastato usare il text-align come hai suggerito. Mi scervellavo per capire come fare e invece la soluzione era semplice. Faccio altre verifiche e se è tutto OK non disturbo oltre. Grazie ancora per l'aiuto.

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •