Form con campi allineamento

[egalizia]

Salve
sto provando ad aggiungere uno stile ad un form ma trovo parecchi problemi nell' allineamento dei cambi ( premetto che purtroppo sono alle prime armi nella programmazione web e nell' uso dei css ).
Ho preso spunto da un form con css preso in rete. Ho fatto un pò di modifiche al css senza molti risultati.
Una cosa strana è che quando ero riuscito ad ottenere un risultato grafico buono sul server dove ho le pagine andando a visualizzare le pagine da un client gli allineamenti sono tutti sballati e cambiano a seconda del programma che uso per vedre la pagina. Metto il codice che ho usato


Form

<form method="post" action="inserito.php">

	<div id="form">
		<h1>Dati Utente </h1>
		<label for="Cognome">Cognome :</label><input type ="text" name="Cognome" id="Cognome" />
		<label for="Nome">Nome  </label><input type ="text" name="Nome" id="Nome" /> <br />
		<label for="Com_N">Luogo di Nascita :</label><input type ="text" name="Com_N" id="Com_N" />
		<label for="Data_N">Data di nascita :</label><input type ="text" name="Data_N" id="Data_N" /> <br />
		<label for="Com_R">Comune di Residenza :</label><input type ="text" name="Com_R" id="Com_R" />
		<label for="Via_R">Via :</label><input type ="text" name="Via_R" id="Via_R" /> <br />
		<label for="Civ_R">Civico : </label><input type ="text" name="Civ_R" id="Civ_R" />
		<label for="Int_R">Interno :</label><input type ="text" name="Int_R" id="Int_R" /> 
		<label for="Telefono">Telefono : </label><input type ="text" name="Telefono" id="Telefono" /> <br />
		<input type="submit" value="Invia" id="submit" name="submit"><input type="reset" value="Reimposta" id="reset" name="reset" >
	</div>

</form>

Css

body {
	background-color: #000;
	color: #fff;
	font-family: Verdana, sans-serif;
	font-size: 14px
	}

#form {
	width: 90%;
	margin: 10px auto;
	background: #222;
	/* padding: 25px 0; */
	overflow: hidden;
	
	/* -moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px; */
	}
	
h1 {
	font-size: 16px;
	color: #FCCC69;
	margin-bottom: 20px; 
	text-align: center;
	}
	
label, input, textarea { /*Stili comunu agli elementi del form */
	color: #dedede; /* Colore del test */
	float: left; /* float a sinistra */
	font-family: Verdana, sans-serif; /* Tipo di carattere del testo */
	margin: 40px; /* Larghezza */
	}
	
label { /* Stili per le label */
	display: inline-block; /* impostiamo label come elemento bloccato */
	line-height: 10px; /* Altezza della riga */
	width: 20px; /* Larghezza */
	}
	
input, textarea { /*Stili per il campo testo e per la textarea */
	background: #1C1C1C; /* Colore sfondo */
	border: 1px solid #323232; /* bordo */
	color: #fff; /* colore testo */
	height: 20px; /* altezza */
	line-height: 20px; /* Altezza riga */
	width: 245px; /* Largezza */
	padding: 0 10px; /* Padding */
	}
	
input {
	 padding-left: 10px;
	
	}
	
textarea { /* Stili specifici per la textarea */
	background #1C1C1C; /* Sfondo si può mettere anche immagine aggiungendo url('percorso immagine') no-repeat 235px 95px */
	font-size: 12px;
	height: 200px;
	width: 320px;
	overflow: hidden; /* disabilita la scrollbar in IE */}
	

#submit {
	padding: 0;
	width: 100px;
	}
	
#reset {
	padding: 0;
	width: 100px;
	}
	
#Com_N {
	padding: 0;
	width:245px;
	padding-left: 10px;
	}

#Data_N	{
	padding: 0;
	width:135px;
	padding-left: 10px;
	}
	
#Com_R {
	padding: 0;
	width:245px;
	padding-left: 10px;
	}
	
#Civ_R {
	padding: 0;
	width:40px;
	padding-left: 10px;
	}
	
#Int_R {
	padding: 0;
	width:40px;
	padding-left: 10px;
	}
	
br {
	clear: left;
	}

 

[Max 1]

Per capire sarebbe meglio che ci facessi vedere la pagina online, perchè così premesso che non ci hai detto il tipo di allineamento che vuoi e neanche il difetto che trovi, ci costringi a copiare il codice e assemblarlo per poter vedere come funziona sempre che tu abbia postato tutto cio che serve.

 

[egalizia]

Ok non avevo pensato a farvi vedere un layout ora ti allego 2 immagini mi ci sono picchiato un pò modificando il css aggiongendo dei br con clear: left;






prima immagine con firefox e risutla centrata nella pagina mentre la seconda con IE rimane tutta a sx i campi direi che ora sono apposto come incolonnamento ma se riuscissi a sistemarli senza usare il br per tabularli sarebbe meglio.

Il problema fondamentale che cambia la visone a seconda del browser che uso e alla risoluzione che viene usata sul pc client. Anche interlinea è un pò ecessiva ....


PS

Altra cosa strana su IE bordi squadrati su firefox arrotondati

 

[egalizia]

dovrò aggiungere altri campi come posso fdare per ridurre gli spazi tra label e textarea input..... e abbassare interlinea?

 

[Jonn]

Perchè secondo te la maggior parte delle form che si trovano su qualsiasi sito web sono posizionate verticalmente?

Nome:
Text area

Cognome:
Text area

Luogo di nascita:
Text area

Data di nascita:
Text area

Comune di residenza:
Text area

.....

Perchè si gestisce meglio la formattazione dagli schermi più grandi a quelli mobile, altrimenti per farla come la tua e visualizzarla correttamente a tutte le risoluzioni devi usare come minimo le media queries in CSS per gestire i vari range di risoluzioni orizzontali (width) dei display: fino a 640 - da 640 a 800 - da 800 in su.