Come allineare testo e descrizione

[iceberg]

Buon giorno (anzi buona sera ), come posso formattare tutte le Label a DX e tutti i Text Box a SX, quindi per fare in modo che

attualmente ogni coppia label+textbox è centrata, io invece vorrei ottenere il risultato che si avrebbe applicando due colonne di una tabella; è possbile?


div#register {
width: 540px;
margin: 0px;
text-align: center;
}

div#register .register-area {
width: 540px;
height: 20px;
vertical-align: middle;
text-align: center;
padding: 2px;
}


<div class="register-area">
<asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">User Name:</asp:Label>
<asp:TextBox ID="UserName" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName" ErrorMessage="User Name is required." ToolTip="User Name is required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
</div>
<div class="register-area">
<asp:Label ID="DataNascitaLabel" runat="server" AssociatedControlID="DataNascita">Data di nascita:</asp:Label>
<asp:TextBox ID="DataNascita" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="DataNascita" ErrorMessage="Data non corretta." ToolTip="Data non corretta." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
</div>

Grazie 1k

[salasir]

Non ho capito molto ma credo che potresti intevenire dando specifiche ai tag:

label { float: left; }
textarea { float: right: }

eventualmente condizionandolo al tuo id o class (#register label { ... oppure .register-area label { ...

PS utilizza i delimitatori [ code] [ /code] (senza spazi) per inserire il codice.

[iceberg]

Grazie mille, ho seguito il tuo consiglio

 
div#register label { float: left; }
div#register input{ float: right: }

con questa soluzione però le label sono allineati a sinistra (bordo sinistro), io invece vorrei che possero allieati a destra, quindi attaccati al textbox

in pratica la situazione dovrebbe essere

(all'inizio metto "-" per simulare uno spazio

-----labellabellabel|textboxtextboxtextb
-labellabellabellab|textboxtext
-----------------label|textboxtextbox

Grazie per l'aiuto

[salasir]

Visto che avevo capito a metà?

Dovrebbe funzionare così:

div#register label { float: left; text-align:right; display:block;
                           width:155px; }   <== gli dai la dimensione che vuoi tu !
div#register input{ margin-left:10px; }

[iceberg]

Fantastico!! Ora sto cercando di modificare la mia pagina in funzione dei tuoi suggerimenti, ma ho un problemino generato da una serie di div a cascata

#leftcenter-area {
    border: 0;
    float: left;
    width: 550px;
    text-align: center;
    margin: 0;
}

div#register .register-area {
    width: 300px;
    height: 20px;
    vertical-align: middle;
    text-align: center; 
    padding: 2px;
}

div#register label {
...
}

div#register input {
...
}




<div id="leftcenter-area">  
<div class="register-area">
label e input...
</div>
<div class="register-area">
label e input...
</div>
</div>

Il mio problema è che in FF l'area non risulta centrata ma spostata a sinistra, mentre in IE è correttamente centrata... analizzando a ritroso i div credo che il problema sia dovuto al <div id="leftcenter-area"> anche se eventuali testi inseriti in questo div risultano correttamente centrati, come posso centrare anche i div contenuti all'interno??

Infinite grazie!

[salasir]

dai margin: 0 auto; al div "div#register .register-area ...".

Occhi alla corretta utilizzazione di TUTTI i tag del form (form, fieldset, ...)

[iceberg]

Niente!

Continua a vedere il div centrato solo con IE

[salasir]

div#register .register-area {
    width: 300px;
    height: 20px;
    vertical-align: middle;
    text-align: center; 
    padding: 2px;
}
<div id="leftcenter-area">  
<div class="register-area">

:master:
Ho notato che hai definito <div class="register-area"> come se fosse figlio di <div id="register">, mentre nella realtà è figlio di <div id="leftcenter-area">.
Oppure l'esempio che hai indicato non corrisponde al vero?

[iceberg]

In effetti la struttura esatta è:

<div id="leftcenter-area">
<div class="page" id="register>
<div class="register-area">
label e input...
</div>
</div>
...

Hai ragione!! Se metto

margina: 0 auto nel div register è OK!!!

Mi chiarisci due dubbi?

per quale motivo in alcuni casi per centrare con FF devo fare margin: 0 e in questo caso ho dovuto fare margin: 0 auto (che differenza c'è? in FF?)

non capisco per quale motivo ho dovuto mettere, per allineare le label a destra il float: left, mentre non ho fatto nulla per allinerare i textbox a sinistra.... quale è stata la logica utilizzata?

Stra grazie mille!

[salasir]

margin: 0 auto; è la tecnica corretta per centrare un elemento lascaindo gestire al browser lo spazio eccedente uniformemente diviso ai lati. Ovviamente IE non riesce a gestirlo :rollo: .

Quindi deve essere utilizzato un text-align: center nel contenitore "padre" del blocco interessato.