How do I make an HTML page based on <div> tags fool proof?
I have written an HTML doc based on <div></div> by writing an external CSS.
But somehow the appearance settings change when I move on to a new browser.
Also my back-ground color does not get re-sized.Just the text increases/decreases in size when I zoom in/out.
Please help
<html>
<head>
<title>Forms</title>
<link rel="stylesheet" type="text/css" href="style.css"></link>
</head>
<body bgcolor="white">
<form>
<div class="st1">
<font face="Times New Roman" size="5"><b>Personal Details</b></font>
</div>
<div class="st2">
<font face="Times New Roman" size="5"><b>Contact Details</b></font>
</div>
<div class="st4">
<font face="Times New Roman" size="5"><b>Login Details</b></font>
</div>
<div class="st3">
<font face="Times New Roman" size="5"><b>Other Details</b></font>
</div>
<div class="st1a">
<div style="position:absolute;left:22.5%;TOP:2;height:100%">
First name<br>
<input type="text" name="firstname" size="12"><br>
<div style="position:relative;top:4%">
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female
</div>
<div style="position:relative;top:7%">
<select name="Day">
<option selected="selected">-DAY-</option>
<script language="javascript">
for(i = 1; i <= 31; i++){
document.write("<option value='"+i+"'>"+i+"</option>");
}
</script>
</select>
<select name="Month">
<option selected="selected">-MONTH-</option>
<option>Jan</option>
<option>Feb</option>
<option>Mar</option>
<option>Apr</option>
<option>May</option>
<option>Jun</option>
<option>Jul</option>
<option>Aug</option>
<option>Sep</option>
<option>Oct</option>
<option>Nov</option>
<option>Dec</option>
</select>
<select name="Country">
<option selected="selected">-YEAR-</option>
<script language="javascript">
for(i = 2000; i >= 1950; i--){
document.write("<option value='"+i+"'>"+i+"</option>");
}
</script>
</select>
</div>
<div style="position:relative;top:11%">
<select name="Country">
<option selected="selected">-Select a country-</option>
<option>India</option>
<option>Germany</option>
<option>France</option>
</select>
</div>
<div style="position:relative;top:13%">
<input type="text" name="SS">
</div>
<div style="position:relative;top:13%">
<font size="2">Mandatory for people living in United States Of America</font>
</div>
<div style="position:relative;top:13.5%">
<input type="text" name="SS">
</div>
<div style="position:relative;top:19.5%">
<select name="Area">
<option selected="selected">-Select Area-</option>
<option>India</option>
<option>Germany</option>
<option>France</option>
</select>
<input type="text" name="SS">
</div>
<div style="position:relative;top:26%">
<input type="text" name="SS">
</div>
<div style="position:relative;top:26%">
<font size="2">Please enter the Promo Code.if you have come to this <br>page as a part of promotion.</font>
</div>
</div>
<div style="position:absolute;left:45%;TOP:2;height:100%">
Middle name<br>
<input type="text" name="middlename" size="12">
</div>
<div style="position:absolute;left:67%;TOP:2;height:100%">
Last name<br>
<input type="text" name="Lastname" size="12">
</div>
<div style="position:absolute;left:0%;top:5%">
<font color="red">*</font> Name<br><br>
<font color="red">*</font> Gender<br><br>
<font color="red">*</font> Date Of Birth<br><br>
<font color="red">*</font> Citizenship<br><br>
<font > Social Security#</font><br><br>
<font > Social Insurance#</font><br><br>
<font color="red">*</font> How did you<br> hear about us?<br><br>
Promo Code
</div>
</div>
<div class="st2a">
<div style="position:absolute;left:30%;height:100%">
<div style="position:relative;top:4%">
<input type="text" name="address" size="35"><br>
<input type="text" name="address2" size="35">
</div>
<div style="position:relative;top:6%">
<input type="text" name="city">
</div>
<div style="position:relative;top:9%">
<input type="text" name="state">
</div>
<div style="position:relative;top:13%">
<input type="text" name="zip">
</div>
<div style="position:relative;top:17%">
<select name="country" style="Width:250px">
<option selected="selected" >-Select a country-</option>
<option>India</option>
<option>Germany</option>
<option>France</option>
</select>
</div>
<div style="position:relative;top:22.5%">
<input type="text" name="country" size="6">
<input type="text" name="area" size="6">
<input type="text" name="phone" size="12">
</div>
<div style="position:relative;top:25%">
<input type="text" name="country" size="5">
<input type="text" name="phone">
</div>
<div style="position:absolute;left:0%;top:59%;height:100%">
Country
</div>
<div style="position:absolute;left:30%;top:59%;height:100%">
Area
</div>
<div style="position:absolute;left:60%;top:59%;height:100%">
Phone#
</div>
</div>
<div style="position:absolute;left:0%;top:5%">
<font color="red">*</font> Home Address<br><br><br>
<font color="red">*</font> City<br><br>
<font color="red">*</font> State<br><br>
<font color="red">*</font> Zip/Postal Code<br><br>
<font color="red">*</font> Country Of Residence<br><br>
<font color="red">*</font> Phone<br><br>
Mobile
</div>
</div>
<div class="st3a">
<div style="position:absolute">
<div style="position:relative;left:40%;top:5%">
<input type="text" name="user">
</div>
<div style="position:relative;left:40%;top:5.5%">
<font size="2">The id for login.Minimum 6 characters</font>
</div>
<div style="position:relative;left:40%;top:6%">
<input type="text" name="email">
</div>
<div style="position:relative;left:40%;top:6.5%">
<font size="2">Your e-mail id for communication purposes.</font>
</div>
<div style="position:relative;left:40%;top:8%">
<input type="password" name="pwd">
</div>
<div style="position:relative;left:40%;top:15%">
<input type="password" name="pwd">
</div>
<div style="position:relative;left:40%;top:15.5%">
<font size="2">8 to 16 characters with atleast one numeric digit and no spaces.<br>The password is case sensitive.</font>
</div>
</div>
<div style="position:absolute;left:0%;top:7.5%">
<font color="red">*</font> User Id<br><br>
<font color="red">*</font> E-mail Id<br><br><br>
<font color="red">*</font> Password<br><br>
<font color="red">*</font> Re-type Password
</div>
</div>
<div class="st4a">
<div style="position:absolute">
<div style="position:relative;left:40%;top:5%">
<input type="text" name="Q">
</div>
<div style="position:relative;left:40%;top:5%">
<font size="2">The id for login.Minimum 6 characters<br>Example-What is your mother's birth place?</font>
</div>
<div style="position:relative;left:40%;top:16%">
<input type="text" name="Q">
</div>
<div style="position:relative;left:40%;top:16%">
<small>The Hint answer is case sensitive.Please keep the Hint Question and<br> Answer different from the User id.</small>
</div>
</div>
<div style="position:absolute;left:0%;top:7.5%">
<font color="red">*</font> Hint Question<br><br开发者_如何转开发><br><br>
<font color="red">*</font> Hint Answer
</div>
</div>
<div style="left:45%;bottom:13%;position:absolute">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</div>
</div>
</form>
</body>
</html>
And here is my STYLE SHEET
.st1{
position:absolute;
margin:1;
left:0%;
top:0%;
background-color:Orange;
text-align:left;
width:49.5%;
Height:4%
}
.st1a{
position:absolute;
margin:1;
left:0%;
top:4%;
background-color:#FFE6CD;
text-align:left;
width:49.5%;
height:45%
}
.st2{
position:absolute;
margin:1;
right:0%;
top:0%;
background-color:Orange;
text-align:left;
width:50%;
Height:4%
}
.st2a{
position:absolute;
margin:1;
right:0%;
top:4%;
background-color:#FFE6CD;
text-align:left;
width:50%;
Height:45%
}
.st3{
position:absolute;
margin:1;
right:0%;
top:49.5%;
background-color:Orange;
text-align:left;
height:4%;
width:50%
}
.st3a{
position:absolute;
margin:1;
left:0%;
top:53%;
background-color:#FFE6CD;
text-align:left;
height:31%;
width:49.5%
}
.st4{
position:absolute;
margin:1;
left:0%;
top:49.5%;
background-color:Orange;
text-align:left;
height:4%;
width:49.5%
}
.st4a{
position:absolute;
margin:1;
right:0%;
top:53%;
background-color:#FFE6CD;
text-align:left;
height:31%;
width:50%
}
- Do use a Doctype (that triggers standards mode)
- Do not use anything other than
position: static(the default) except with great caution. Normal flow is your friend - Do validate
- Do not use the
styleattribute - Do use class names and ids that have some meaning
- Do use semantic markup such as
<label>and not presentational markup such as<b>and<font> - Do make sure the content makes sense without stylesheets (e.g. don't have a label in one part of a document and a field in a completely different part of a document and then try to use CSS to link them together)
- Do not use client side JavaScript to generate important content (such as the content of a
<select>element)
There are two ways:
1) Learn HTML/CSS really well, test in every major browser (IE, Firefox, Chrome, Opera, Safari) and fix as needed
2) Do not write any HTML/CSS, write in another language/environment that can generate HTML as output, essentially pushing browser compatibility worries into the middle layer so that you don't have to worry about it. Not sure if a 100% fool proof solution like that exists; maybe GWT?
Take a look at something like CSS Reset, which should start all browsers off on the same footing, and then you apply your style sheets.
This is because you put fixed width in the div that contains the color and that's why when zooming the div the size remains same. ALso, I think you are not zooming in/out, rather you are just resizing the browser. Please mention the browser name, so that everyone can get a better idea of what you're seeing. Also please follow what MK said.
加载中,请稍侯......
精彩评论