Currently, I'm using tables to provide formatting for my forms. I'd like to move to using CSS for the formating, however I'm having problems. My thought was to use assorted DIV's to control the formatting, however I don't understand why the WIDTH is ignored when I set the DISPLAY to INLINE. (See <!-- m --><a class="postlink" href="http://www.gatewayorlando.com/content/reservationRequestV3_submit.asp">http://www.gatewayorlando.com/content/r ... submit.asp</a><!-- m -->).
David H
<style>
div.mainContentBlock
{
position: relative;
width: 500px;
top: 25px;
left: 10px;
margin: 0, 10px;
font-family: verdana;
font-size: 10pt;
border-style: solid;
border: 1px;
}
div.fieldLabelBlock
{
width: 200px;
text-align: right;
border-style: solid;
border: 1px;
display: inline;
}
div.fieldBlock
{
width: 300px;
text-align: right;
border-style: solid;
border: 1px;
display: inline;
}
</style>
</head>
<body>
<div class="mainContentBlock">
<div class="fieldLabelBlock">Name</div><div class="fieldBlock"><input type="text"></div><br>
<div class="fieldLabelBlock">email Address</div><divclass="fieldBlock"><input type="text"></div>
</div>The width is ignored when displayed as an inline element, because inline elements cannot have a specific width other than the width that they are. You cannot, for example, set the width of a SPAN element without setting its display value to block. If you need to make an object break after an inline-element, try using margins.I've attached a text file with a method that Paul Jr (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/member.php?s=&action=getinfo&userid=9705">http://www.webdeveloper.com/forum/membe ... serid=9705</a><!-- m -->) uses.You need to float your form blocks (those that contain the input tags, left:
float: left
That will let them line up next to each other but still control width.
There is a better method, check this out:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<style type="text/css" >
/******************* CSS BASED FORMS *********************/
div.row {
clear: both;
padding-top: 2px;
width: 100%;
}
div.row span.label, div.row label {
float : left;
width : 30px;
margin-right: 0px;
text-align: right;
border: 0px solid red;
}
.login div.row label, .login div.row span.label {
float: left;
width : 30px;
}
div.row div.group {
float : left;
margin-right: 3px;
border: 0px solid green;
}
div.row div.group label {
float: none;
text-align: left;
padding-left: 3px;
}
</style>
</head>
<body>
<fieldset class="login" >
<legend >User Login</legend>
<form action="{$smarty.const.HTTP_PATH}/user.php" method="post">
<div class="row">
<label >User:</label>
<input type="text" name="uname" size="15" maxlength="25" value="" />
</div>
<div class="row">
<label >Pass:</label>
<input type="password" name="pass" size="15" maxlength="25" />
</div>
<div class="row">
<span class="label">Grp:</span>
<div class="group">
<input type="text" name="one" size="15" maxlength="25" value="" /><br />
<label>one</label>
</div>
<div class="group">
<input type="text" name="two" size="15" maxlength="25" value="" /><br />
<label>two</label>
</div>
</div>
</form>
</fieldset>
</body>
</html>
There is actually a small bug with doing it like this on the divs that are grouped on the bottom -- it shows up one pixel to the left in IE. I haven't figured a way around that specific problem, but I am still using this layout for my forms.Actually, it had occurred to me that FLOATing was what I needed to do. I had forgotten that I had enountered a variation of the problem a week or two ago and using FLOAT solved it. THX
Here's the initial study...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
div.mainContentBlock
{
position: relative;
width: 490px;
top: 25px;
left: 10px;
margin: 0, 10px;
font-family: verdana;
font-size: 10pt;
border-style: solid;
border: 1px;
}
div.listResults2C1FFFFFF
{
height: 30px;
width: 166px;
vertical-align: top;
text-align: right;
background-color: #FFFFFF;
padding: 0px;
margin: 0px;
float: left;
}
div.listResults2C2FFFFFF
{
height: 30px;
width: 320px;
vertical-align: top;
text-align: left;
background-color: #FFFFFF;
padding: 0px;
margin: 0px;
float: right;
}
</style>
</head>
<body>
<div class="mainContentBlock">
<div class="listResults2C1FFFFFF">Name</div>
<div class="listResults2C2FFFFFF"><input type="text"></div>
<div class="listResults2C1FFFFFF">email Address</div>
<div class="listResults2C2FFFFFF"><input type="text"></div>
<div class="listResults2C1FFFFFF">Reservation Type</div>
<div class="listResults2C2FFFFFF"><select><option>Orlando International Airport (MCO)</select></div>
<div class="listResults2C1FFFFFF">email Address</div>
<div class="listResults2C2FFFFFF"><input type="text"></div>
</div>
</body>
</html>
David H
<style>
div.mainContentBlock
{
position: relative;
width: 500px;
top: 25px;
left: 10px;
margin: 0, 10px;
font-family: verdana;
font-size: 10pt;
border-style: solid;
border: 1px;
}
div.fieldLabelBlock
{
width: 200px;
text-align: right;
border-style: solid;
border: 1px;
display: inline;
}
div.fieldBlock
{
width: 300px;
text-align: right;
border-style: solid;
border: 1px;
display: inline;
}
</style>
</head>
<body>
<div class="mainContentBlock">
<div class="fieldLabelBlock">Name</div><div class="fieldBlock"><input type="text"></div><br>
<div class="fieldLabelBlock">email Address</div><divclass="fieldBlock"><input type="text"></div>
</div>The width is ignored when displayed as an inline element, because inline elements cannot have a specific width other than the width that they are. You cannot, for example, set the width of a SPAN element without setting its display value to block. If you need to make an object break after an inline-element, try using margins.I've attached a text file with a method that Paul Jr (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/member.php?s=&action=getinfo&userid=9705">http://www.webdeveloper.com/forum/membe ... serid=9705</a><!-- m -->) uses.You need to float your form blocks (those that contain the input tags, left:
float: left
That will let them line up next to each other but still control width.
There is a better method, check this out:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<style type="text/css" >
/******************* CSS BASED FORMS *********************/
div.row {
clear: both;
padding-top: 2px;
width: 100%;
}
div.row span.label, div.row label {
float : left;
width : 30px;
margin-right: 0px;
text-align: right;
border: 0px solid red;
}
.login div.row label, .login div.row span.label {
float: left;
width : 30px;
}
div.row div.group {
float : left;
margin-right: 3px;
border: 0px solid green;
}
div.row div.group label {
float: none;
text-align: left;
padding-left: 3px;
}
</style>
</head>
<body>
<fieldset class="login" >
<legend >User Login</legend>
<form action="{$smarty.const.HTTP_PATH}/user.php" method="post">
<div class="row">
<label >User:</label>
<input type="text" name="uname" size="15" maxlength="25" value="" />
</div>
<div class="row">
<label >Pass:</label>
<input type="password" name="pass" size="15" maxlength="25" />
</div>
<div class="row">
<span class="label">Grp:</span>
<div class="group">
<input type="text" name="one" size="15" maxlength="25" value="" /><br />
<label>one</label>
</div>
<div class="group">
<input type="text" name="two" size="15" maxlength="25" value="" /><br />
<label>two</label>
</div>
</div>
</form>
</fieldset>
</body>
</html>
There is actually a small bug with doing it like this on the divs that are grouped on the bottom -- it shows up one pixel to the left in IE. I haven't figured a way around that specific problem, but I am still using this layout for my forms.Actually, it had occurred to me that FLOATing was what I needed to do. I had forgotten that I had enountered a variation of the problem a week or two ago and using FLOAT solved it. THX
Here's the initial study...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
div.mainContentBlock
{
position: relative;
width: 490px;
top: 25px;
left: 10px;
margin: 0, 10px;
font-family: verdana;
font-size: 10pt;
border-style: solid;
border: 1px;
}
div.listResults2C1FFFFFF
{
height: 30px;
width: 166px;
vertical-align: top;
text-align: right;
background-color: #FFFFFF;
padding: 0px;
margin: 0px;
float: left;
}
div.listResults2C2FFFFFF
{
height: 30px;
width: 320px;
vertical-align: top;
text-align: left;
background-color: #FFFFFF;
padding: 0px;
margin: 0px;
float: right;
}
</style>
</head>
<body>
<div class="mainContentBlock">
<div class="listResults2C1FFFFFF">Name</div>
<div class="listResults2C2FFFFFF"><input type="text"></div>
<div class="listResults2C1FFFFFF">email Address</div>
<div class="listResults2C2FFFFFF"><input type="text"></div>
<div class="listResults2C1FFFFFF">Reservation Type</div>
<div class="listResults2C2FFFFFF"><select><option>Orlando International Airport (MCO)</select></div>
<div class="listResults2C1FFFFFF">email Address</div>
<div class="listResults2C2FFFFFF"><input type="text"></div>
</div>
</body>
</html>