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
Codice:




Dati Utente

Cognome :
Nome

Luogo di Nascita :
Data di nascita :

Comune di Residenza :
Via :

Civico :
Interno :
Telefono :







Css
Codice:

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;
}




Originariamente scritto da egalizia nel forum HTML e CSS in data 30-09-2015 08:07.