Menu
Community /Pin to ProfileBookmark
@NogDogJun 06.2005 — #You can put the form within a fixed-width div. And if you use em units for all fixed dimensions (including the div's width), the form will maintain its proportions if the user changes the font size via the browser's view options:
CSS and Forms
Hi,
I want to know how to use CSS to create a form without tables by using <div> tags. I have tried it but everytime I change the size of my browzer window the form changes aswell.
[U]My question
Sign in
to post a comment2 Comments(s) ↴
0
@NogDogJun 06.2005 — #You can put the form within a fixed-width div. And if you use em units for all fixed dimensions (including the div's width), the form will maintain its proportions if the user changes the font size via the browser's view options:[code=html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Sample Form</title>
<style type="text/css">
<!--
body {
font-family: medium arial, helvetica, sans-serif;
margin: 0;
padding: 10px;
}
#form {
width: 25em;
margin: 0 auto;
padding: 0.5em;
background-color: silver;
border: outset 2px silver;
}
label {
display: block;
float: left;
width: 5.5em;
}
#form p {
margin: 0.5em 0;
}
fieldset {
margin: 0;
padding: 0.5em;
}
-->
</style>
</head>
<body>
<div id=form>
<form action="#" method=post>
<fieldset>
<legend>Sample Form</legend>
<p>
<label for=field1>Field 1:</label>
<input name=field1 type=text size=20 maxlength=20>
</p>
<p>
<label for=field1>Field 2:</label>
<input name=field2 type=text size=20 maxlength=20>
</p>
<p><label for=text>Enter text:</label></p>
<p><textarea name=text rows=4 cols=40></textarea></p>
</fieldset>
</form>
</div>
</body>
</html>
[/code]