...

View Full Version : Web Forms and CSS Positioning



jzfla
02-07-2007, 05:23 PM
I am trying to create a web form without tables, just CSS something like this:

First Name: ____________ Last Name: __________________
Address: ________________________________________
City: _____________________ State: ___ Zip: ______

Is there anyway in CSS to do this without using tables?

I am able to create a form that looks like this:

First Name: ____________________
Last Name: ____________________
Address: ________________________________
City: _________________
State: ___
Zip: _________

using this CSS code:

body
{
margin:0 auto;
width:740px;
background:#f4f4f4;
}

#input_form
{
font-family:Georgia,Arial;
font-size:.65em;
margin-top:60px;
background:#ffffff;
padding-top:20px;


}
form label
{
float:left;
width:150px;
text-align:right;
margin-right:.7em;
padding-top:.3em;



}
form input
{
font-family:Georgia,Arial;
background:#ffffcc;
font-size:1em;
margin-bottom:2px;
}


and this HTML:

<label for="last_name">First Name</label>
<input type="text" name="first_name" id="first_name" size="20" maxlength="30" /><br />
<label for="last_name">Last Name:</label>
<input type="text" name="last_name" id="last_name" size="15" maxlength="35" /><br />
<label for="first_name">Street Address:</label>
<input type="text" name="first_name" id="Address" size="50" maxlength="50" /><br />

<label for="last_name">City:</label>
<input type="text" name="last_name" id="City" size="50" maxlength="50" /><br />
<label for="last_name">State:</label>
<input type="text" name="last_name" id="State" size="2" maxlength="2" /><br />
<br />


Many thanks for any help!

Excavator
02-07-2007, 05:29 PM
Hello jzfla,
I'm not much on forms, I've only built one, but I can see right off that it's doing exactly what you've told it to do:

<label for="last_name">First Name</label>
<input type="text" name="first_name" id="first_name" size="20" maxlength="30" /> <br />
<label for="last_name">Last Name:</label>
<input type="text" name="last_name" id="last_name" size="15" maxlength="35" /><br />

That <br /> is a line break.
What happens when you take it out?
Maybe you need to float id="first_name" ?... not a clue really

PremiumBlend
02-07-2007, 10:25 PM
Here is a good link for designing forms. I learned a lot from it.

http://www.alistapart.com/articles/prettyaccessibleforms

Sman5109
02-08-2007, 12:44 AM
Or if you want to get ahead of everyone, you can use xforms.

http://www.w3schools.com/xforms/default.asp

jzfla
02-08-2007, 02:13 PM
Thanks a lot for the tutorials. I've been all over the web and all the form tutorials seem to use a vertical layout. I would like to create more of a data entry form using CSS instead of tables.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum