2011-01-24 22 views
0

は、だから私は、UIの問題の多くを持っている:おそらくCSSでUIの問題を修正していますか?あなたは、このスナップショットにここに見ることができるよう

enter image description here

フィールドはあらゆる場所にあり、フィールド間の間隔が悪いと、フィールドの長さは、行ありませんお互いにアップ。少なくともコントロールの長さ、スペーシング、およびそのような種類のものを修正するページに置くことができるCSSはありますか? CSSはどのようなものでしょうか?

私はこのことに悪いです/ /ありがとう!

EDIT:

例えば、「入力あなたの経済学の詳細」というセクションが

<div id="economicDetails"> 
       <table id="table4" cellpadding="4" cellspacing="0"> 
        <tr id="tr5"> 
         <td id="td6"> 
          &nbsp; 
         </td> 
         <td id="td7" style="text-align: right;"> 
          Indication Nickname 
         </td> 
         <td id="td8" colspan="3"> 
          <%= Html.TextBoxFor(m => m.STPData.ProjectName, new { @class = "economicTextBox", propertyName = "STPData.ProjectName", onchange = "UpdateField(this);" })%> 
         </td> 
        </tr> 
        <tr id="tr9"> 
         <td id="td10" style="width: 80px"> 
          <%= Html.LabelFor(m => m.EffectiveDate) %> 
         </td> 
         <td id="td11"> 
          <%= Html.TextBox("EffectiveDate", Model.EffectiveDate.HasValue ? Model.EffectiveDate.Value.ToString("dd-MMM-yyyy") : "", new { @class = "economicTextBox", propertyName = "EffectiveDate", onchange = "parseAndSetDt(this); ", dataType = "Date" })%> 
         </td> 
         <td id="td12"> 
          <%= Html.LabelFor(m => m.Notional) %> 
         </td> 
         <td id="td13" style="width: 350px"> 
          <span> 
           <%= Html.DropDownListFor(m => 
            m.ActiveProduct.CurrencyID, 
                  DropDownData.CurrencyList(), "", 
                  new { @class = "economicTextBox", propertyName = "ActiveProduct.CurrencyID", onchange = "UpdateField(this);" })%> 
          </span> 
          <%= Html.TextBoxFor(m => m.Notional, new { @class = "economicTextBox", propertyName = "Notional", onchange = "FormatAsMoney(this, 10000000000, true); UpdateField(this);" })%> 
         </td> 
        </tr> 
        <tr id="tr14"> 
         <td id="td15"> 
          <%= Html.LabelFor(m => m.MaturityDate) %> 
         </td> 
         <td id="td16"> 
          <%= Html.TextBox("MaturityDate", Model.MaturityDate.HasValue ? Model.MaturityDate.Value.ToString("dd-MMM-yyyy") : "", new { @class = "economicTextBox", propertyName = "MaturityDate", onchange = "parseAndSetDt(this); ", dataType = "Date" })%> 
          <%= Html.DropDownListFor(m => m.AmortizationComponent.MaturityBusinessDayConvention, DropDownData.BusinessDayConventionList(), "", new { propertyName = "AmortizationComponent.MaturityBusinessDayConvention", onchange = "UpdateField(this);" })%> 
         </td> 
         <td id="td17" style="width: 76px"> 
          Value Date 
         </td> 
         <td id="td18" style="width: 218px"> 
          <%= Html.TextBoxWithPermission("RateTimeStamp", Model.RateTimeStamp.HasValue ? Model.RateTimeStamp.Value.ToString("dd-MMM-yyyy") : "", new string[] { PERMISSIONS.hasICAdvanced }, new { @class = "economicTextBox", propertyName = "RateTimeStamp", onchange = "parseAndSetDt(this);", dataType = "Date" })%> 
          <br /> 
          <%= Html.CheckBoxForWithPermission(m => m.Current, new string[] { PERMISSIONS.hasICAdvanced }, new { @class = "economicTextBox", propertyName = "Current", onchange = "UseCurrent();UpdateField(this);" })%> 
          Current 
         </td> 
        </tr> 
        <tr id="tr19"> 
         <td id="td20"> 
          Holiday Cities 
         </td> 
         <td id="td21"> 
          <table id="table22"> 
           <tr id="tr23"> 
            <td id="td24"> 
             <div id="holidayCityLabel" style="color: Blue; text-decoration: underline; cursor: pointer" />   
             <div id="holidayCityList" style="overflow: auto" class="holidayCityList"> 
           <%foreach (SelectListItem holiday in DropDownData.HolidayDays()) 
            { %> 
           <% bool holidaySelected = Model.Trx.TransactionHolidayCityCollection.Find(item => item.IsDeleted == false && item.HolidayCityID.Value.ToString() == holiday.Value) != null; %> 
           <input type="checkbox" name="Trx.TransactionHolidayCityCollection" id="Holiday<%= holiday.Value %>" 
            value="<%=holiday.Value%>" <%= holidaySelected == false ? "" : "checked=checked" %> /> 
           <label id="HolidayLabel<%= holiday.Value %>" for="Holiday<%=holiday.Value%>"> 
            <%=holiday.Text%></label> 
           <br /> 
           <%} %> 
          </div> 
            </td> 
            <td id="td25"> 
            <span validationFor="holidayCity" style='display:none'> 
             <img class='validation' src='<%= VirtualPathUtility.ToAbsolute("~/img/exclamation.gif")%>' /> 
             </span> 
            </td> 
           </tr> 
          </table> 


         </td> 
        </tr> 
       </table> 
       <div id="div26" style="height: 10px" /> 
       <table id="table27" cellpadding="2" cellspacing="0"> 
        <tr id="tr28"> 
         <td id="td29" style="width: 90px;"> 
          &nbsp; 
         </td> 
         <td id="td30" style="width: 225px;" class="leftRightBorder componentHeader"> 
          Fixed Component 
         </td> 
         <td id="td31" style="width: 15px;"> 
          &nbsp; 
         </td> 
         <td id="td32" style="width: 100px;"> 
          &nbsp; 
         </td> 
         <td id="td33" style="width: 350px;" class="leftRightBorder componentHeader"> 
          Floating Component 
         </td> 
        </tr> 
        <tr id="tr34"> 
         <td id="td35"> 
          Fixed Rate 
         </td> 
         <td id="td36" class="leftRightBorder"> 
          <div id="div37" class="componentCell" style="font-style: italic"> 
           Calculated 
          </div> 
         </td> 
         <td id="td38"> 
          &nbsp; 
         </td> 
         <td id="td39"> 
          Index 
         </td> 
         <td id="td40" class="leftRightBorder"> 
          <table id="table41"> 
           <tr id="tr42"> 
            <td id="td43"> 
             <%= Html.DropDownListFor(m => m.FloatingComponent.IndexID, DropDownData.IndexDropList(), "", 
                                 new { propertyName = "FloatingComponent.IndexID", onchange = "UpdateField(this, false); FillIndexDescription();UpdateResetEnabled();" })%> 
            </td> 
            <td id="td44"> 
            <span id="indexDetailsDescription" propertyName="IndexOptions" style="padding-left: 15px; color: Blue; text-decoration: underline; 
             cursor: pointer" /> 
            </td> 
           </tr> 
          </table> 
         </td> 
        </tr> 
        <tr id="tr45"> 
         <td id="td46"> 
          &nbsp; 
         </td> 
         <td id="td47" class="leftRightBorder"> 
          &nbsp; 
         </td> 
         <td id="td48"> 
          &nbsp; 
         </td> 
         <td id="td49"> 
          Reset Day 
         </td> 
         <td id="td50" class="leftRightBorder"> 
          <span id="resetLabel" propertyName="ResetLabel" class="componentCell" style="color: Blue; text-decoration: underline; 
           cursor: pointer" /> 
         </td> 
        </tr> 
        <tr id="tr51"> 
         <td id="td52"> 
          &nbsp; 
         </td> 
         <td id="td53" class="leftRightBorder"> 
          &nbsp; 
         </td> 
         <td id="td54"> 
          &nbsp; 
         </td> 
         <td id="td55"> 
          Reset Convention 
         </td> 
         <td id="td56" class="leftRightBorder"> 
          <%= Html.DropDownListFor(m => m.ResetDayComponent.ResetBusinessDayConvention, DropDownData.BusinessDayConventionList(), "", new { propertyName = "ResetDayComponent.ResetBusinessDayConvention", onchange = "UpdateField(this);" })%> 
         </td> 
        </tr> 
        <tr id="tr57"> 
         <td id="td58"> 
          Frequency 
         </td> 
         <td id="td59" class="leftRightBorder"> 
          <%= Html.DropDownListFor(m => m.FixedComponent.PaymentFrequency, DropDownData.FrequencyDropList(), "", new { propertyName = "FixedComponent.PaymentFrequency", onchange = "UpdateField(this);" })%> 
         </td> 
         <td id="td60" /> 
         <td id="td61"> 
          Frequency 
         </td> 
         <td id="td62" class="leftRightBorder"> 
          <%= Html.DropDownListFor(m => m.FloatingComponent.PaymentFrequency, DropDownData.FrequencyDropList(), "", new { propertyName = "FloatingComponent.PaymentFrequency", onchange = "UpdateField(this);" })%> 
         </td> 
        </tr> 
        <tr id="tr63"> 
         <td id="td64"> 
          Payment Day 
         </td> 
         <td id="td65" class="leftRightBorder"> 
          <%= Html.DropDownListFor(m => m.FixedComponent.PaymentDay, DropDownData.DaysOfMonthList(), "", new { propertyName = "FixedComponent.PaymentDay", onchange = "UpdateField(this);" })%> 
          <%= Html.DropDownListFor(m => m.FixedComponent.PaymentBusinessDayConvention, DropDownData.BusinessDayConventionList(), "", new { propertyName = "FixedComponent.PaymentBusinessDayConvention", onchange = "UpdateField(this);" })%> 
         </td> 
         <td id="td66" /> 
         <td id="td67"> 
          Payment Day 
         </td> 
         <td id="td68" class="leftRightBorder"> 
          <%= Html.DropDownListFor(m => m.FloatingComponent.PaymentDay, DropDownData.DaysOfMonthList(), "", new { propertyName = "FloatingComponent.PaymentDay", onchange = "UpdateField(this);", disabled="disabled" })%> 
          <%= Html.DropDownListFor(m => m.FloatingComponent.PaymentBusinessDayConvention, DropDownData.BusinessDayConventionList(), "", new { propertyName = "FloatingComponent.PaymentBusinessDayConvention", onchange = "UpdateField(this);", disabled="disabled" })%> 
         </td> 
        </tr> 
        <tr id="tr69"> 
         <td id="td70"> 
          Roll Day 
         </td> 
         <td id="td71" class="leftRightBorder"> 
          <%= Html.DropDownListFor(m => m.FixedComponent.RollDay, DropDownData.DaysOfMonthList(), "", new { propertyName = "FixedComponent.RollDay", onchange = "UpdateField(this);" })%> 
          <%= Html.DropDownListFor(m => m.FixedComponent.RollBusinessDayConvention, DropDownData.BusinessDayConventionList(), "", new { propertyName = "FixedComponent.RollBusinessDayConvention", onchange = "UpdateField(this);" })%> 
         </td> 
         <td id="td72" /> 
         <td id="td73"> 
          Roll Day 
         </td> 
         <td id="td74" class="leftRightBorder"> 
          <%= Html.DropDownListFor(m => m.FloatingComponent.RollDay, DropDownData.DaysOfMonthList(), "", new { propertyName = "FloatingComponent.RollDay", onchange = "UpdateField(this);", disabled = "disabled" })%> 
          <%= Html.DropDownListFor(m => m.FloatingComponent.RollBusinessDayConvention, DropDownData.BusinessDayConventionList(), "", new { propertyName = "FloatingComponent.RollBusinessDayConvention", onchange = "UpdateField(this);" })%> 
         </td> 
        </tr> 
        <tr id="tr75"> 
         <td id="td76"> 
          First Roll Date 
         </td> 
         <td id="td77" class="leftRightBorder"> 
          <%= Html.TextBox("FixedComponent_FirstRollDate", Model.FixedComponent.FirstRollDate.HasValue ? Model.FixedComponent.FirstRollDate.Value.ToString("dd-MMM-yyyy") : "", new { @class = "economicTextBox", propertyName = "FixedComponent.FirstRollDate", onchange = "parseAndSetDt(this); ", dataType = "Date" })%> 
         </td> 
         <td id="td78" /> 
         <td id="td79"> 
          First Roll Date 
         </td> 
         <td id="td80" class="leftRightBorder"> 
          <%= Html.TextBox("FloatingComponent_FirstRollDate", Model.FloatingComponent.FirstRollDate.HasValue ? Model.FloatingComponent.FirstRollDate.Value.ToString("dd-MMM-yyyy") : "", new { @class = "economicTextBox", propertyName = "FloatingComponent.FirstRollDate", onchange = "parseAndSetDt(this); ", dataType = "Date" })%> 
         </td> 
        </tr> 
        <tr id="tr81"> 
         <td id="td82"> 
          Long Last Stub 
         </td> 
         <td id="td83" class="leftRightBorder"> 
          <%= Html.CheckBoxFor(m => Model.LongLastStub, new { propertyName = "LongLastStub", onchange = "UpdateField(this);" })%> 
         </td> 
         <td id="td84" colspan="2" /> 
         <td id="td85" class="leftRightBorder"> 
          &nbsp; 
         </td> 
        </tr> 
        <tr id="tr86"> 
         <td id="td87"> 
          Day Count 
         </td> 
         <td id="td88" class="leftRightBorder bottomBorder"> 
          <%= Html.DropDownListFor(m => m.FixedComponent.DayCountConvention, DropDownData.DayCountDropList(), "", new { propertyName = "FixedComponent.DayCountConvention", onchange = "UpdateField(this);" })%> 
         </td> 
         <td id="td89" /> 
         <td id="td90"> 
          Day Count 
         </td> 
         <td id="td91" class="leftRightBorder bottomBorder"> 
          <%= Html.DropDownListFor(m => m.FloatingComponent.DayCountConvention, DropDownData.DayCountDropList(), "", new { propertyName = "FloatingComponent.DayCountConvention", onchange = "UpdateField(this);" })%> 
         </td> 
        </tr> 
       </table> 
      </div> 
      </div> 

他の部分を、このマークアップを使用しているのと同じ形式で基本的にです。ありがとう!

+0

あなたのページへのリンクやHTMLを貼り付けることができます.CSSは –

+0

と書くことができます。それは本当に乱雑に見えます。現在のHTML/CSSを見ずに[Google](http://www.google.com/search?q=css+form+layout)に向かうのを助けることはできません。画像に基づいて問題を解決するために提供できる魔法のCSSはありません:D – thirtydot

+0

マークアップが追加されました。 – slandau

答えて

2

これは私がやることです。

  • すべてのインラインCSS、すなわちスタイル」=幅:80px」削除をしてLeftRightBorder
  • のようなクラスは、すべてのテーブル
  • 変更 『フィールドセット』にDIV economicDetailsを削除します。実際には、各グループに1つのFieldsetを追加します。だから多分3つまたは4つの異なるフィールドセット
  • すべてのラベル、入力、チェックボックスなどにクリーンなCSSを適用してください。
  • CSSをフィールドセットに適用して整列させてください。
+0

私はCSSの専門家ではありません。いくつかの例がありますか? – slandau

+0

私はこれが読むには素晴らしいリソースだと思います: http://articles.sitepoint.com/article/fancy-form-design-css –

関連する問題