HTML Layout Cleanup?

-2

Я делаю jsp, который ncludes 5 jsp все вместе. На моем четвертом ... это работает, но ... мой дизайн выглядит неуклюжим. Можете ли вы указать какие-либо предложения, чтобы они выглядели лучше или чище? Мы ценим любые предложения. БлагодаряHTML Layout Cleanup?

CSS

table.det 
{ } 

table.det td 
{ 
border: none; 

} 


fieldset.det 
{  
display:block; 
float:left; 

font-family:Verdana, Arial, Helvetica, sans-serif; 
font-size:12px; 
margin-top:20px; 
margin-left:20px; 
border:2px solid #CCCCCC; 

} 
fieldset.det legend 
    { 
    padding:2px 5px; 
    border:2px solid #CCCCCC; 

    }

JSP:

<tr> 
<th> 
<span onclick="toggleDiv('filtering', 'filterImg')" style="cursor: hand;">Filters&nbsp;<img name="filterImg" src="../images/minus.gif" /></span> 
</th> 
</tr> 
<tr> 
<td> 
<div id="filtering" style="display:block;"> 
    <table class ="det"> 
     <tr> 
      <td> 
    Workload Year:&nbsp;<select size="1" name="wYearSelect"> 
          <option value="2007">2007</option> 
          <option value="2008">2008</option> 
          <option value="2009">2009</option> 
          <option value="2010">2010</option> 
          <option value="2011">2011</option> 
          <option selected value="2012">2012</option> 
          <option value="2013">2013</option> 
          <option value="2014">2014</option> 
         </select> 
    Fiscal Year:&nbsp;<select size="1" name="wYearSelect"> 
          <option value="2007">2007</option> 
          <option value="2008">2008</option> 
          <option value="2009">2009</option> 
          <option value="2010">2010</option> 
          <option value="2011">2011</option> 
          <option selected value="2012">2012</option> 
          <option value="2013">2013</option> 
          <option value="2014">2014</option> 
         </select> 

    Condition Code:&nbsp;<select size="1" name="condCodeSelect"> 
          <option selected value="">&nbsp;</option> 
          <option value="2007">A</option> 
          <option value="2008">B</option> 
          <option value="2009">C</option> 
          <option value="2010">D</option> 
          <option value="2011">E</option> 
          <option value="2012">F</option> 
          <option value="2013">G</option> 
          <option value="2014">H</option> 
         </select> 


    Customer:&nbsp;<select size="1" name="customerSelect"> 
          <option selected value="">&nbsp;</option> 
                 </select> 

    Repair Facility:&nbsp;<select size="1" name="repFacSelect"> 
          <option selected value="">&nbsp;</option> 
                  </select><br/> 
    Work Type:&nbsp;<select size="1" name="workTypeSelect"> 
          <option selected value="">&nbsp;</option> 
          <option value="10">Rebuild</option> 
          <option value="11">IROAN</option> 
          <option value="12">SOAR</option> 
          <option value="13">Special</option> 
         </select> 
    Special Indicator:&nbsp;<select size="1" name="specIndSelect"> 
          <option selected value="">&nbsp;</option> 
          <option value="RST">RESET</option> 
         </select> 
    WBS:&nbsp;<select size="1" name="wbsSelect"> 
        <option selected value="">&nbsp;</option> 
             <!-- etc --> 
       </select> 
       <br/> 
    Appropriation:&nbsp;<select size="1" name="appropSelect"> 
          <option selected value="">&nbsp;</option> 
                 </select> 

    MWSLIN:&nbsp;<input type="text" name="mwslin" value=""/> 
    Serial #:&nbsp;<input type="text" name="mwslin" value=""/> 
    <input type="checkbox" name="include_carryover">Include Carryover</input> 

</td></tr><tr><td> 
    <fieldset> 
     <legend>Standard Materiel filter structure here</legend> 
    NSN:&nbsp;<input type="text" name="nsn" value=""/> 
    TAMCN:&nbsp;<input type="text" name="tamcn" value=""/> 
    PGD/Group:&nbsp;<input type="text" name="pgd" value=""/> 
    SAC :&nbsp;<select size="1" name="condCodeSelect"> 
          <option selected value="">&nbsp;</option> 
          <option value="2011">1</option> 
          <option value="2012">2</option> 
          <option value="2013">3</option> 
         </select> 
    <br/> 
    Nomenclature:&nbsp;<input type="text" name="nomen" value=""/> 
    </fieldset> 
    </td></tr><tr><td> 
    <fieldset class="det"> 
     <legend>Source of Repair</legend> 
     <input type="checkbox" name="sorCodes" value="A">MCA&nbsp;&nbsp;&nbsp;</input> 
       </fieldset> 
    <fieldset class="det"> 
     <legend>Schedule Type</legend> 
     <input type="checkbox" name="schedType" value="1">Regular</input><br/> 
     <input type="checkbox" name="schedType" value="2">Lot Job</input><br/> 
     <input type="checkbox" name="schedType" value="3">Batch Job</input> 
    </fieldset> 
    <fieldset class="det"> 
     <legend>Workload Type</legend> 
     <input type="checkbox" name="workloadType" value="1">SMC Workload</input><br/> 
     <input type="checkbox" name="workloadType" value="2">Other Workload</input> 
    </fieldset> 
    <fieldset class="det"> 
     <legend>Closure Level</legend> 
     <input type="checkbox" name="workloadType" checked value="1">Open</input><br/> 
     <input type="checkbox" name="workloadType" value="1">Physically Complete</input><br/> 
     <input type="checkbox" name="workloadType" value="2">Financially Complete</input> 
    </fieldset> 
</td></tr></table> 
</div> 
</td> 
</tr> 
<tr> 
<td align="center"> 
<button name="Generate Report" value="Generate Report">Generate Report</button> 
&nbsp;&nbsp;&nbsp;&nbsp; 
<button name="Clear Criteria" value="Clear Criteria">Clear Criteria</button> 
</td> 
</tr>

источник

2012-02-01 Doc Holiday

спасибо за Thanx партнера предложения –

На первый взгляд, избавившись от таблиц будет где-то начать, если вы можете.

Я направляюсь на работу, там будет более подробно рассмотрен.

Cheers!

EDIT - Вы можете вынуть границу на вашем fieldset.det legend, он должен каскадом вниз от fieldset.det

На вашем div id=filtering, не могли бы вы добавить дополнительный стиль к filteringid?

EDIT - вот что-то, что я бросил вместе, не сказав, что это ЛЮБОЕ, рядом с совершенным. Он дает вам макет div и способы легко изменить макет с помощью CSS. Кроме того, ознакомьтесь с этим сайтом для получения лучших практик, http://blog.sherpawebstudios.com/2009/06/17/top-10-html-form-layout-best-practices/.

CSS:

#wrapper{ width: 1040; overflow:hidden; } 
#filter { 
    cursor: hand; 
    font-size: 20px; 
    font-weight: bold; 
    margin-bottom: 10px; 
} 

.formLabel { 
    font-weight: bold; 
    text-align: right; 
    width: 160px; 
    float: left; 
} 

.field { 
    float: left; 
} 

.content:before, 
.content:after { 
    content: ""; 
    display:table; 
} 

.content:after { 
    clear: both; 
} 
/*IE 6/7 */ 
.content { zoom:1;margin-bottom: 10px;} 

.subset { 
    float: left; 
    margin: 0 15; 
} 

.subset div.formLabel { 
    width:100px; 
} 

#generate { 
    margin-right:15px; 
}

HTML:

<div id = "wrapper" > 
    <div id = "filter" class ="clearfix"> 
     <span onclick="toggleDiv('filtering', 'filterImg')">Filters&nbsp;<img name="filterImg" src="../images/minus.gif" /></span> 
    </div> 
    <div class = "content"> 
     <div class = "formLabel"> 
      Workload Year:&nbsp; 
     </div> 
     <div class = "field"> 
    <select size="1" name="wYearSelect"> 
      <option value="2007">2007</option> 
      <option value="2008">2008</option> 
      <option value="2009">2009</option> 
      <option value="2010">2010</option> 
      <option value="2011">2011</option> 
      <option selected value="2012">2012</option> 
      <option value="2013">2013</option> 
      <option value="2014">2014</option> 
     </select> 
    </div> 
</div> 
<div class = "content"> 
    <div class = "formLabel"> 
     Fiscal Year:&nbsp; 
    </div> 
    <div class = "field"> 
     <select size="1" name="wYearSelect"> 
      <option value="2007">2007</option> 
      <option value="2008">2008</option> 
      <option value="2009">2009</option> 
      <option value="2010">2010</option> 
      <option value="2011">2011</option> 
      <option selected value="2012">2012</option> 
      <option value="2013">2013</option> 
      <option value="2014">2014</option> 
     </select> 
    </div> 
</div> 
<div class = "content"> 
    <div class = "formLabel"> 
     Condition Code:&nbsp; 
    </div> 
    <div class = "field"> 
     <select size="1" name="condCodeSelect"> 
      <option selected value="">&nbsp;</option> 
      <option value="2007">A</option> 
      <option value="2008">B</option> 
      <option value="2009">C</option> 
      <option value="2010">D</option> 
      <option value="2011">E</option> 
      <option value="2012">F</option> 
      <option value="2013">G</option> 
      <option value="2014">H</option> 
     </select> 
    </div> 
</div> 
<div class = "content"> 
    <div class = "formLabel"> 
     Customer:&nbsp; 
    </div> 
    <div class = "field"> 
     <select size="1" name="customerSelect"> 
      <option selected value="">&nbsp;</option> 
     </select> 
</div> 
</div> 
<div class = "content"> 
    <div class = "formLabel"> 
     Repair Facility:&nbsp; 
    </div> 
    <div class = "field"> 
     <select size="1" name="repFacSelect"> 
      <option selected value="">&nbsp;</option> 
     </select> 
    </div> 
</div> 
<div class = "content"> 
    <div class = "formLabel"> 
     Work Type:&nbsp; 
    </div> 
    <div class = "field"> 
     <select size="1" name="workTypeSelect"> 
      <option selected value="">&nbsp;</option> 
      <option value="10">Rebuild</option> 
      <option value="11">IROAN</option> 
      <option value="12">SOAR</option> 
      <option value="13">Special</option> 
     </select> 
    </div> 
</div> 
<div class = "content"> 
    <div class = "formLabel"> 
     Special Indicator:&nbsp; 
    </div> 
    <div class = "field"> 
     <select size="1" name="specIndSelect"> 
      <option selected value="">&nbsp;</option> 
      <option value="RST">RESET</option> 
     </select> 
    </div> 
</div> 
<div class = "content"> 
    <div class = "formLabel"> 
     WBS:&nbsp; 
    </div> 
    <div class = "field"> 
     <select size="1" name="wbsSelect"> 
      <option selected value="">&nbsp;</option> 
     </select> 
    </div> 
</div> 
<div class = "content"> 
    <div class = "formLabel"> 
     Appropriation:&nbsp; 
    </div> 
    <div class = "field"> 
     <select size="1" name="appropSelect"> 
      <option selected value="">&nbsp;</option> 
     </select> 
    </div> 
</div> 
<div class = "content"> 
    <div class = "formLabel"> 
     MWSLIN:&nbsp; 
    </div> 
    <div class = "field"> 
     <input type="text" name="mwslin" value=""/> 
    </div> 
</div> 
<div class = "content"> 
    <div class = "formLabel"> 
     Serial #:&nbsp; 
    </div> 
    <div class = "field"> 
     <input type="text" name="mwslin" value=""/> 
    </div> 
</div> 
<div class = "content"> 
    <div class = "formLabel"> 
     Include Carryover: 
    </div> 
    <div class = "field"> 
     <input type="checkbox" name="include_carryover"></input> 
    </div> 
</div> 
<div class ="content"> 
    <div class = "subset"> 
     <h3>Standard Material filter structure here</h3> 

     <div class = "content"> 
      <div class = "formLabel"> 
       NSN:&nbsp; 
      </div> 
      <div class = "field"> 
       <input type="text" name="nsn" value=""/> 
      </div> 
     </div> 
     <div class = "content"> 
      <div class = "formLabel"> 
       TAMCN:&nbsp; 
      </div> 
      <div class = "field"> 
       <input type="text" name="tamcn" value=""/> 
      </div> 
     </div> 
     <div class = "content"> 
      <div class = "formLabel"> 
       PGD/Group:&nbsp; 
      </div> 
      <div class = "field"> 
       <input type="text" name="pgd" value=""/> 
      </div> 
     </div> 
     <div class = "content"> 
      <div class = "formLabel"> 
       SAC :&nbsp; 
      </div> 
      <div class = "field"> 
       <select size="1" name="condCodeSelect"> 
        <option selected value="">&nbsp;</option> 
        <option value="2011">1</option> 
        <option value="2012">2</option> 
        <option value="2013">3</option> 
       </select> 
      </div> 
     </div> 
     <div class = "content"> 
      <div class = "formLabel"> 
       Nomenclature:&nbsp; 
      </div> 
      <div class = "field"> 
       <input type="text" name="nomen" value=""/> 
      </div> 
     </div> 
    </div> 
    <div class = "subset"> 
     <h3>Source of Repair</h3> 
     <div class = "formLabel"> 
      MCA 
     </div> 
     <input type="checkbox" name="sorCodes" value="A"></input> 
    </div> 
    <div class = "subset"> 
     <h3>Schedule Type</h3> 
     <div class = "formLabel"> 
      Regular 
     </div> 
     <input type="checkbox" name="schedType" value="1"></input><br/> 
     <div class = "formLabel"> 
      Lot Job 
     </div> 
     <input type="checkbox" name="schedType" value="2"></input><br/> 
     <div class = "formLabel"> 
      Batch Job 
     </div> 
     <input type="checkbox" name="schedType" value="3"></input> 
    </div> 
    <div class = "subset"> 
     <h3>Workload Type</h3> 
     <div class = "formLabel"> 
      SMC Workload 
     </div> 
     <input type="checkbox" name="workloadType" value="1"></input><br/> 
     <div class = "formLabel"> 
      Other Workload 
     </div> 
     <input type="checkbox" name="workloadType" value="2"></input> 
    </div> 
    <div class = "subset"> 
     <h3>Closure Level</h3> 
     <div class = "formLabel"> 
      Open 
     </div> 
     <input type="checkbox" name="workloadType" checked value="1"></input><br/> 
     <div class = "formLabel"> 
      Physically Complete 
     </div> 
     <input type="checkbox" name="workloadType" value="1"></input><br/> 
     <div class = "formLabel"> 
      Financially Complete 
     </div> 
     <input type="checkbox" name="workloadType" value="2"></input> 
    </div> 
</div> 

<button name="Generate Report" value="Generate Report" id="Generate">Generate Report</button> 
<button name="Clear Criteria" value="Clear Criteria">Clear Criteria</button>

источник

2012-02-01 15:41:29

.... много apreciated –

@DocHoliday ты просто хочешь помочь очистки своего кода или определения лучшего макет? –

- любые предложения, чтобы сделать его более аккуратным. Я отшвырнул его, основываясь на некоторых требованиях, и они сказали, что он выглядит хорошо. Но я обычно пишу Java весь день, и это просто выглядело неуклюже для меня –

HTML Layout Cleanup?

ответ

Смежные вопросы