Psizionamento Label e input

giovedì 04 gennaio 2007 - 23.41

Elenco Threads

Stanze Forum

Aggiungi ai Preferiti

Cerca nel forum

squilibrio Profilo | Expert

527 messaggi | Data Invio: gio 4 gen 2007 - 23:41

Ciao a tutti, ho dei problemi nella creazione di un'area di inserimento con

label (incolonnate) - campo inserimento

nella prima riga della mia area di inserimento, dovrei avere

label - radio button - input - listbox (tutti sulla stessa riga e tutti accanto)

nella seconda

label (incollanata con quella sopra) - input (incolonnato col radio sopra)

in pratica è come se dovessi realizzare una tabella a due colonne (label e area di inserimento)

io ci ho provato ma gli elementi nella prima riga risultano distaziati.

Dato che il codice HTML generato dai componenti .NET è parecchio "sporco" ho preferito postare il codice HTML con gli oggetti .NET, per semplificare la logica

Non ho particolari esigenze, vorrei adottare la soluzione piu semplice per "incolonnare" gli elementi ma che allo stesso sia adattabile per altre situazioni e in altri contesti (utilizzando la stessa struttura di fogli stile, simile a quella che ho provato a creare) che fanno uso di altri CSS

Grazie per l'aiuto!

div class="page" id="insert">
<div class="insert-area">
<asp:Label ID="tbDestinatario" runat="server" AssociatedControlID="ddlDestinatario">Destinatario:</asp:Label>
<asp:TextBox ID="tbFindDestinatario" runat="server" CssClass="find"></asp:TextBox>
<asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal" TextAlign="Left">
<asp:ListItem Selected="True">ID</asp:ListItem>
<asp:ListItem>Nome</asp:ListItem>
</asp:RadioButtonList>
<asp<img src="images/smilies/biggrin.gif" border="0" alt="">ropDownList ID="ddlDestinatario" runat="server">
</asp<img src="images/smilies/biggrin.gif" border="0" alt="">ropDownList>
</div>
<div class="insert-area">
<asp:Label ID="lblNome" runat="server" AssociatedControlID="tbOggetto">Oggetto:</asp:Label>
<asp:TextBox ID="tbOggetto" runat="server" CssClass="input"></asp:TextBox>
<asp:RequiredFieldValidator ID="NomeRequired" runat="server" ControlToValidate="tbOggetto"
ErrorMessage="Data non corretta." ToolTip="" ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
</div>

</div>

div#insert {
width: 520px;
text-align: center;
margin: 0 auto;
}

div#insert .insert-area {
width: 520px;
height: 20px;
padding: 2px;
margin: 0 auto;
}

div#insert label {
float: left;
text-align: right;
display: block;
width: 70px
}

div#insert .input {
margin-left: 10px;
width: 180px;
float: left;
}

div#insert .find {
margin-left: 10px;
width: 70px;
float: left;
}

div#insert select {
margin-left: 10px;
font: 11px verdanaa, arial, helvetica, sans-serif;
color: #666666;
float: left;
}

trasportation Profilo | Junior Member

104 messaggi | Data Invio: ven 5 gen 2007 - 15:26

Per utilizzare i div in un'impaginazione di questo tipo impaginazione ti consiglio di impostare un stile per label che determina la larghezza della stessa, tutti i controlli li allinei (float) a destra ed a ogni controllo imposti una larghezza.

Eccoti un'esempio:

<div style="clear:both;">
<div style="float:left;width:200px">Mia etichetta</div>
<div style="float:left;">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></div>
<div style="float:left;width:200px">Mia etichetta 2</div>
<div style="float:left;">
<asp:RadioButtonList ID="RadioButtonList2" runat="server" RepeatDirection="Horizontal" TextAlign="Left">
<asp:ListItem Selected="True">ID</asp:ListItem>
<asp:ListItem>Nome</asp:ListItem>
</asp:RadioButtonList>
</div>
</div>
<div style="clear:both;">
<div style="float:left;width:200px">Mia etichetta 3</div>
<div><asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></div>
</div>

Se usi questo tipo di formattazione senza tabelle suppongo che sia dovuto al fatto che la tua pagina deve essere conforme alla lege stanca (o cose del genere), se è così il tuo form non risulta comunque conforme per via del tipo di impaginazione scelto (almeno secondo la mia esperienza).

Spero di esserti stato utile e di aver capito il tuo problema

R.
/*
* web: http://www.robertobeccari.it
*/

Torna su

Stanze Forum

Elenco Threads

Partecipa anche tu! Registrati!

Hai bisogno di aiuto ?
Perchè non ti registri subito?

Dopo esserti registrato potrai chiedere
aiuto sul nostro Forum oppure aiutare gli altri

Consulta le Stanze disponibili.

Registrati ora !