基于div的html页面设计 [英] div based designing of an html page
本文介绍了基于div的html页面设计的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在设计一个基于div的html表单，但是设计没有得到正确的引用
这是我的html和css的一部分
I am designing a div based html form but the design is not getting alligned properly
Here is part of my html and 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>
My Css
My 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;
}推荐答案
There really is not a simple solution to your code entirely. I would direct you to a site with a pretty good instruction set on horiz/vertical centering with block/in-line elements etc. I added a couple of div''s with style of clear:both and it improved the two divs calllog and typevisit. I think if you play around with some of the stuff or else go to a template site and just start inserting some of your fields you may get a good feel for what you need to do.
Try adding
There really is not a simple solution to your code entirely. I would direct you to a site with a pretty good instruction set on horiz/vertical centering with block/in-line elements etc. I added a couple of div''s with style of clear:both and it improved the two divs calllog and typevisit. I think if you play around with some of the stuff or else go to a template site and just start inserting some of your fields you may get a good feel for what you need to do.
Try adding
<div class="clear"></div>at the end of the calllog divs to see what I mean. Your css file should have a class definition of
at the end of the calllog divs to see what I mean. Your css file should have a class definition of
.clear{
clear:both;
} for the div to work correctly. Your code is too long to experiment and do it all for you. Read the tutorial and experiment. That is what makes it fun...
Check out Tutorial
for the div to work correctly. Your code is too long to experiment and do it all for you. Read the tutorial and experiment. That is what makes it fun...
Check out Tutorial
这篇关于基于div的html页面设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
