HTML佈局清理？

Question

我製作了一個包含5個jsp的jsp。在我的第四個..它的運作，但..我的設計看起來很笨重。你能指出任何建議，使它看起來更好或更清潔？任何建議，將不勝感激。由於

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> 

Answer 1

乍一看，擺脫表將是地方開始，如果你能。

我正在上班將在那裏更徹底地查看它。

乾杯！

編輯 - 你可以拿出邊境上的fieldset.det legend，應該從fieldset.det

向下級聯在您div id=filtering，不能你額外的樣式添加到filteringid？

編輯 - 這是我扔在一起的東西，並不是說它在任何地方都接近完美。它爲您提供了一個div佈局和方法來通過CSS輕鬆更改佈局。此外，請查看此網站以獲取最佳形式練習，​​。

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>