0

div ベースの HTML フォームをデザインしていますが、デザインが適切に配置されていません

div ベースのデザインで複雑なフォームを適切にデザインする方法。div ベースのデザインを使用して設計された複雑なフォームのリンクを持っている人はいますか?

ここに私のhtmlとcssの一部があります

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

<div class="mainContainer">
    <div id="header"><div class="lblNormal">SERVICE CALL REPORT</div></div>
    <div id="callLog" >
        <div id="callLog1">  <label  class="lblNormal">SERVICE CALL LOG</label></div>
        <div id="callLog1"> <input type="text" class="textboxNormal" id="SerCallLog" name="txtSerCallLog" /></div>
    </div>
    <div id="typeVisit">
        <div id="typeVisit1"><div class="lblNormal">TYPE OF VISIT</div></div>
        <div id="typeVisit1">
            <select>
                <option value="Inspection">Inspection</option>
                <option value="Installation">Installation</option>
                <option value="Preventive">Preventive</option>
                <option value="Breakdown">Breakdown</option>
                <option value="Other">Other</option>
            </select>  
        </div>
        <div id="typeVisit1"><div class="lblNormal">TYPE OF SERVICE</div></div>
        <div id="typeVisit1">
            <select>
                <option value="WARRANTEE">WARRANTEE</option>
                <option value="EXCOMA">EXCOMA</option>
                <option value="COMA">COMA</option>
                <option value="SECOMA">SECOMA</option>
                <option value="SMA">SMA</option>
                <option value="SPUMA">SPUMA</option>
                <option value="OCS">OCS</option>
            </select>  
        </div>      
    </div>
    <div id="callRec">
        <div id="callRec1"><label  class="lblNormal">CALL RECEIVED ON:</label></div>
        <div id="callRec1"><input type="text" class="textboxNormal" id="CallRecOn" name="txtCallRecOn" /></div>
        <div id="callRec1"><label  class="lblNormal">TIME(in hrs.)</label></div>
        <div id="callRec1"><input type="text" class="textboxNormal" id="CallTime" name="txtCallTime" /></div>       
        <div id="callRec1"><label  class="lblNormal">CALL ATTENDED ON:</label></div>
        <div id="callRec1"><input type="text" class="textboxNormal" id="CallAttendedOn" name="txtCallAttendedOn" /></div>
        <div id="callRec1"><label  class="lblNormal">TIME IN(in hrs.):</label></div>
        <div id="callRec1"><input type="text" class="textboxNormal" id="TimeIn" name="txtTimeIn" /></div>
        <div id="callRec1"><label  class="lblNormal">TIME OUT(in hrs.):</label></div>
        <div id="callRec1"><input type="text" class="textboxNormal" id="TimeOut" name="txtTimeOut" /></div>     
        <div id="callRec1"><label  class="lblNormal">TIME ON CALL(in hrs.):</label></div>
        <div id="callRec1"><input type="text" class="textboxNormal" id="TimeOnCall" name="txtTimeOnCall" /></div>       
    </div>
    <div id="assoData">
        <div id="assoData1"><div class="lblNormal">ASSOCIATE DATA:NAME</div></div>
        <div id="assoData1"><input type="text" class="textboxNormal" id="AssociateDataName" name="txtAssociateDataName" /></div>
        <div id="assoData1"><div class="lblNormal">LOCATION:</div></div>
        <div id="assoData1"><input type="text" class="textboxNormal" id="AssociateDataLocation" name="txtAssociateDataLocation" /></div>
        <div id="assoData1"><div class="lblNormal">TEL:</div></div>
        <div id="assoData1"><input type="text" class="textboxNormal" id="AssociateDataTel" name="txtAssociateDataTel" /></div>      
    </div>
    <div id="equipData">
        <div id="equipData1"><div class="lblNormal">EQUIPMENT DATA SR.NO.:</div></div>
        <div id="equipData1"><input type="text" class="textboxNormal" id="EquipmentDataSrNo" name="txtEquipmentDataSrNo" /></div>
        <div id="equipData1"><div class="lblNormal">MODEL:</div></div>
        <div id="equipData1"><input type="text" class="textboxNormal" id="EquipmentDataModel" name="txtEquipmentDataModel" /></div>
        <div id="equipData1"><div class="lblNormal">LOAD DATA:</div></div>
        <div id="equipData1"><input type="text" class="textboxNormal" id="EquipmentDataLoadData" name="txtEquipmentDataLoadData" /></div>   
    </div>
    <div id="battData">
        <div id="battData1"><div class="lblNormal">BATTERY DATA:TYPE-</div></div>
        <div id="battData1">
            <select>
                <option value="SMF">SMF</option>
                <option value="WT">WT</option>              
            </select>  
        </div>
        <div id="battData1"><div class="lblNormal">MAKE:</div></div>
        <div id="battData1"><input type="text" class="textboxNormal" id="BattaryDataMake" name="txtBattaryDataMake" /></div>
        <div id="battData1"><div class="lblNormal">VOLTS:</div></div>
        <div id="battData1"><input type="text" class="textboxNormal" id="BattaryDataVolts" name="txtBattaryDataVolts" /></div>  
        <div id="battData1"><div class="lblNormal">AH:</div></div>
        <div id="battData1"><input type="text" class="textboxNormal" id="BattaryDataAh" name="txtBattaryDataAh" /></div>
        <div id="battData1"><div class="lblNormal">NOS:</div></div>
        <div id="battData1"><input type="text" class="textboxNormal" id="BattaryDataNOS" name="txtBattaryDataNOS" /></div>
    </div>
    <div id="battCond">
        <div id="battCond1"><div class="lblNormal">BATTERY CONDITION:CHARGING VOLTAGE:</div></div>
        <div id="battCond1"><input type="text" class="textboxNormal" id="BattaryConditionChargingVoltage" name="txtBattaryConditionChargingVoltage" /></div>
        <div id="battCond1"><div class="lblNormal">VDC</div></div>
        <div id="battCond1"><input type="text" class="textboxNormal" id="BattaryConditionVDC" name="txtBattaryConditionVDC" /></div>
        <div id="battCond1"><div class="lblNormal">DISCHARGE VOLTAGE(ON LOAD):</div></div>
        <div id="battCond1"><input type="text" class="textboxNormal" id="BattaryConditionDiscVolt" name="txtBattaryConditionDiscVolt" /></div>  
        <div id="battCond1"><div class="lblNormal">VDC</div></div>
        <div id="battCond1"><input type="text" class="textboxNormal" id="BattaryConditionOnLoadVDC" name="txtBattaryConditionOnLoadVDC" /></div>        
    </div>
    <div id="maintenance">
        <div id="preveMaintMain">
            <div id="preveMaint">
                <div id="preveMaint1">
                    <div class="lblNormal">PREVENTIVE MAINTENANCE</div>
                </div>
                <div id="preveMaint1">
                    <div><div class="lblNormal">Condition of Ventilation</div></div>
                    <div><div class="lblNormal">Condition of Nut & Bolts of Equipment</div></div>
                    <div><div class="lblNormal">Condition of Input & Output Cables</div></div>
                    <div><div class="lblNormal">Condition of FAN , METER & LED Indication</div></div>
                    <div><div class="lblNormal">Equipment cleaned with vacuum</div></div>
                </div>
                <div id="preveMaint1">
                    <div>
                        <select>
                            <option value="Good">Good</option>
                            <option value="Bad">Bad</option>                            
                        </select>  
                    </div>
                    <div>
                        <select>
                            <option value="Good">Good</option>
                            <option value="Bad">Bad</option>                            
                        </select>  
                    </div>
                    <div>
                        <select>
                            <option value="Good">Good</option>
                            <option value="Bad">Bad</option>                            
                        </select>  
                    </div>
                    <div>
                        <select>
                            <option value="Good">Good</option>
                            <option value="Bad">Bad</option>                            
                        </select>  
                    </div>
                    <div>
                        <select>
                            <option value="Yes">Yes</option>
                            <option value="No">No</option>                          
                        </select>  
                    </div>
                </div>
            </div>
            <div id="preveMaintVolt">
                <div></div>
                <div><div class="lblNormal">Input Voltage</div><input type="text" class="textboxNormal" id="InputVoltage" name="txtInputVoltage" />VAC<div class="lblNormal">Output Voltage</div><input type="text" class="textboxNormal" id="OutputVoltage" name="txtOutputVoltage" />VAC</div>
                <div><div class="lblNormal">Checked Battery Back up (In Min.)</div><input type="text" class="textboxNormal" id="CheckedBattBackup" name="txtCheckedBattBackup" /></div>
            </div>
        </div>
        <div id="batMainNFault">
            <div id="battMaint">
                <div id="battMaint1"><div class="lblNormal">BATTERY MAINTEINANCE :</div></div>
                <div id="battMaint1">
                    <div><div class="lblNormal">Condition of Nut, Bolts & Links :</div></div>
                    <div><div class="lblNormal">Terminals & Lugs OK :</div></div>
                    <div><div class="lblNormal">Filled D.M.Water :</div></div>
                    <div><div class="lblNormal">Gravity & Voltage Checked :</div></div>
                    <div><div class="lblNormal">Cleaning Done :</div></div>
                </div>
                <div id="battMaint1">
                    <div>
                        <select>
                            <option value="Good">Good</option>
                            <option value="Bad">Bad</option>
                        </select>  
                    </div>
                    <div>
                        <select>
                            <option value="Yes">Yes</option>
                            <option value="No">No</option>
                        </select>  
                    </div>
                    <div>
                        <select>
                            <option value="Yes">Yes</option>
                            <option value="No">No</option>
                        </select>  
                    </div>
                    <div>
                        <select>
                            <option value="Yes">Yes</option>
                            <option value="No">No</option>
                        </select>  
                    </div>
                    <div>
                        <select>
                            <option value="Yes">Yes</option>
                            <option value="No">No</option>
                        </select>  
                    </div>
                </div>
            </div>
            <div id="faltReported">
                <div id="faltReported1"><div class="lblNormal">FAULT REPORTED</div></div>
                <div id="faltReported2"><input type="text" class="textboxNormal" id="faultReported" name="txtfaultReported" /></div>
            </div>
        </div>
    </div>
    <div id="solutions">
        <div id="solutions1"><div class="lblNormal">SOLUTION</div></div>
        <div id="solutions2">
            <textarea rows="2" cols="50"> </textarea> 
        </div>
    </div>
    <div id="remark">
        <div id="remark1"><div class="lblNormal">REMARKS</div></div>
        <div id="remark2">
            <textarea rows="2" cols="50"> </textarea> 
        </div>
    </div>
</div><!-- Main div -->

</body>
</html>

私のcssの一部

 .mainContainer
    {
        width:100%; 
        height:90%;
        background-color:gray;  
    }

    .lblNormal
    {
        font-family:Verdana, Geneva, sans-serif;
        font-size:5px;  
    }

    .textboxNormal
    {       
        width:50px;
        height:8px; 
    }
    .textboxLarge
    {   
        width:100px;
        height:8px; 
    }
    .textboxSmall
    {   
        width:25px;
        height:8px; 
    }

    #header
    {
        width:50%;
        height:10%;
        background-color:gray;
    }
    #callLog
    {
        width:40%;
        height:10%; 
        border:1px solid black;
    }
    #callLog1
    {
        width:48%;
        height:90%;
        float:left;
        display:block;  
    }

    #typeVisit
    {
        width:100%;
        height:10%;
        border:1px solid black;
    }
    #typeVisit1
    {
        width:24.5%;
        float:left;
        display:block;
        height:90%;     
    }
    #callRec
    {
        width:100%;
        height:10%; 
        border:1px solid black;
    }
    #callRec1
    {
        width:7.9%;
        height:100%;
        float:left;
        display:block;

    }

    #assoData
    {
        width:100%;
        height:10%; 
    }
    #assoData1
    {
        width:16%;
        height:100%;
        float:left;
        display:block;  
    }


    #equipData
    {
        width:100%;
        height:10%;

    }
    #equipData1
    {
        width:16%;
        height:100%;
        float:left;
        display:block;

    }
    #battData
    {
        width:100%;
        height:10%;
        background-color:red;
    }
    #battData1
    {
        width:9.9%;
        height:100%;
        float:left;
        display:block;
        background-color:red;
    }

    #battCond
    {
        width:100%;
        height:10%;
        background-color:blue;
    }
    #battCond1
    {
        width:11%;
        height:100%;
        float:left;
        display:block;
        background-color:green;
    }

    #maintenance
    {
        width:100%;
        height:20%;
        background-color:black;
    }

    #preveMaintMain
    {
        width:49%;
        height:100%;
        float:left;
        display:block;
        background-color:aqua;
    }
    #preveMaint
    {
        width:100%;
        height:100%;
        float:left;
        display:block;
        background-color:aqua;
    }
    #preveMaint1
    {
        width:32%;
        height:100%;
        float:left;
        display:block;
        background-color:red;
    }
    #preveMaintVolt
    {   
        width:100%;
        height:100%;
        float:left;
        display:block;
        background-color:aqua;  
    }

    #batMainNFault
    {
        width:49%;
        height:100%;
        float:left;
        display:block;
        background-color:red;
    }
    #battMaint
    {
        width:100%;
        height:60%; 
        background-color:yellow;
    }
    #battMaint1
    {
        width:32%;
        height:100%;
        float:left;
        display:block;
        background-color:green;
    }

    #faltReported
    {
        width:100%;
        height:60%; 
        background-color:yellow;
    }
    #faltReported1
    {
        width:32%;
        height:100%;
        float:left;
        display:block;
        background-color:green;
    }
    #faltReported2
    {
        width:64%;
        height:100%;
        float:left;
        display:block;
        background-color:green;
    }

    #solutions
    {
        width:100%;
        height:10%;
        background-color:GREEN;
    }
    #solutions1
    {
        width:14%;
        height:100%;
        float:left;
        display:block;
        background-color:RED;
    }
    #solutions2
    {
        width:85%;
        height:100%;
        float:left;
        display:block;
        background-color:YELLOW;
    }

    #remark
    {
        width:100%;
        height:10%;
        background-color:BLUE;
    }
    #remark1
    {
        width:14%;
        height:100%;
        float:left;
        display:block;
        background-color:YELLOW;
    }
    #remark2
    {
        width:85%;
        height:100%;
        float:left;
        display:block;
        background-color:RED;
    }
4

1 に答える 1

0

何が複雑なのか、何が問題なのかはわかりませんが、IEでは見た目が悪いと言っているので、cssリセットを使用していないと仮定します。

CSS リセットとは何ですか? 要するに、 "

スタイルシートをリセットする目的は、デフォルトの行の高さ、余白、見出しのフォント サイズなどにおけるブラウザの不一致を減らすことです。

最初にこのリンクを確認し、それらのいずれかをダウンロードします (ただし、私は常に Eric Meyer のものを使用します) http://www.cssreset.com/

「コードを取得」ボタンを押します。取得したら、ヘッダーに挿入します。

完了したら、それに応じてスタイルを設定します。最も一般的なブラウザではすべてが同じに見えるはずです（すべてではないにしても）

于 2014-01-05T03:35:47.577 に答える