/    Sign up×
Community /Pin to ProfileBookmark

Help converting a table-based form

Copy linkTweet thisAlerts:
May 19.2004

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 [url]http://www.gatewayorlando.com/content/reservationRequestV3_submit.asp[/url]).

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>

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@JonaMay 19.2004 — [font=arial]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.[/font]
Copy linkTweet thisAlerts:
@JonaMay 19.2004 — [font=arial]I've attached a text file with a method that [url=http://www.webdeveloper.com/forum/member.php?s=&action=getinfo&userid=9705]Paul Jr[/url] uses.[/font]

[upl-file uuid=9ec3d04e-b5ac-431e-a753-b309456f2e55 size=1kB]csslaidoutform.txt[/upl-file]
Copy linkTweet thisAlerts:
@mrtwice99May 19.2004 — You need to float your form blocks (those that contain the input tags, left:
<i>
</i>float: left


That will let them line up next to each other but still control width.

There is a better method, check this out:
<i>
</i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;title&gt;test&lt;/title&gt;
&lt;style type="text/css" &gt;
/******************* 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;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;fieldset class="login" &gt;
&lt;legend &gt;User Login&lt;/legend&gt;
&lt;form action="{$smarty.const.HTTP_PATH}/user.php" method="post"&gt;
&lt;div class="row"&gt;
&lt;label &gt;User:&lt;/label&gt;
&lt;input type="text" name="uname" size="15" maxlength="25" value="" /&gt;
&lt;/div&gt;
&lt;div class="row"&gt;
&lt;label &gt;Pass:&lt;/label&gt;
&lt;input type="password" name="pass" size="15" maxlength="25" /&gt;
&lt;/div&gt;
&lt;div class="row"&gt;
&lt;span class="label"&gt;Grp:&lt;/span&gt;
&lt;div class="group"&gt;
&lt;input type="text" name="one" size="15" maxlength="25" value="" /&gt;&lt;br /&gt;
&lt;label&gt;one&lt;/label&gt;
&lt;/div&gt;
&lt;div class="group"&gt;
&lt;input type="text" name="two" size="15" maxlength="25" value="" /&gt;&lt;br /&gt;
&lt;label&gt;two&lt;/label&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;/fieldset&gt;
&lt;/body&gt;
&lt;/html&gt;


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.
Copy linkTweet thisAlerts:
@davidcholleyauthorMay 20.2004 — 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>
×

Success!

Help @davidcholley spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...