PDA

View Full Version : CSS Forms


xashx
04-21-2010, 05:44 PM
Can anyone tell me how to go about making something like this in CSS? How can get the form lists to show in a left right column like that in CSS? Are floats involved? Need serious help.

gentleone
04-21-2010, 05:47 PM
Perhaps this article will get you where you want. You'll have to dive into the code to see how it's done.
http://www.skyrocket.be/2006/01/09/semantic-horizontal-forms/

xashx
04-22-2010, 04:53 PM
Thanks that did help out a lot. One more thing however. Does anyone know a way on how to put these form boxes into straight rows?

http://img709.imageshack.us/img709/8994/form1l.th.jpg (http://img709.imageshack.us/i/form1l.jpg/)


Here's my code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>forms</title>
<style type="text/css">
<!--
body {
background-color: #666600;
color: #BLACK;
font-family: Arial, Helvetica, sans-serif;
}
#theform {
background-color:White;
height:400px;
width:600px;
}
#theform fieldset {
height: 20em;
width: 16.7em;
border: 0;
padding: 1em;
float: left;
margin: 0;
}
#theform fieldset legend {
font-size: 1em;
font-family: Georgia, "Times New Roman", Times, serif;
color: BLACK;
}
#theform fieldset legend span {
display: none;
}
#theform fieldset label {
font-size: 0.7em;
display: inline;
line-height: 0.5em;
}
#theform fieldset input {
font-size: 0.6em;
height: 1.9em;
width: 14em;
border: 1px solid #6D5C8B;
}


-->
</style>

<!--[if IE]>
<style type="text/css">
#theform #pt4 {
padding: 2em 1em 1em 1em;
}
</style>
<![endif]-->



<!-- This empty script is used to ward off the aptly titled Flash of Unstyled Content
(or FOUC) which pops up in the various Internet Explorer browsers. For more info,
refer to http://www.bluerobot.com/web/css/fouc.asp -->
</head>
<body>

<div id="theform">

<fieldset id="pt1">
<legend><span>Step </span>CREATE NEW ACCOUNT <span>: Login details</span></legend>
<label for="username"><span style="color: Red;">*</span> User Name</label>
<input type="text" id="username" tabindex="1" />
<label for="password"><span style="color: Red;">*</span> Password</label>
<input type="text" id="password" tabindex="2" />
<label for="confirmpassword"><span style="color: Red;">*</span> Confirm Password</label>
<input type="text" id="confirmpassword" tabindex="3" />
<label for="firstname"><span style="color: Red;">*</span> First Name</label>
<input type="text" id="firstname" tabindex="4" />
<label for="middleinitial"><span style="color: Red;">*</span> Middle Initial</label>
<input type="text" id="middleinitial" tabindex="5" />
<label for="lastname"><span style="color: Red;">*</span> Last Name</label>
<input type="text" id="lastname" tabindex="6" />
<label for="company"><span style="color: Red;">*</span> Company</label>
<input type="text" id="company" tabindex="7" />
<label for="industry"><span style="color: Red;">*</span> Industry</label>
<input type="text" id="industry" tabindex="8" />
<label for="title"><span style="color: Red;">*</span> Title</label>
<input type="text" id="title" tabindex="9" />
<label for="howdidyouhereaboutus?"><span style="color: Red;">*</span> How did you hear about us?</label>
<input type="text" id="howdidyouhereaboutus?" tabindex="10" />
</fieldset>
<fieldset id="pt2">
<legend><span>Step </span><span style="color: Red;">*</span>* Indicates required field</legend>
<label for="email"><span style="color: Red;">*</span> Email</label>
<input type="text" id="email" tabindex="1" />
<label for="phone"><span style="color: Red;">*</span> Phone</label>
<input type="text" id="phone" tabindex="2" />
<label for="mobile"> Mobile</label>
<input type="text" id="mobile" tabindex="3" />
<label for="fax"> Fax</label>
<input type="text" id="fax" tabindex="4" />
<label for="address"><span style="color: Red;">*</span> Address</label>
<input type="text" id="address" tabindex="5" />
<label for="address2"> Address 2</label>
<input type="text" id="address2" tabindex="6" />
<label for="city"><span style="color: Red;">*</span> City</label>
<input type="text" id="city" tabindex="7" />
<label for="state"><span style="color: Red;">*</span> State</label>
<input type="text" id="state" tabindex="8" />
<label for="zip"><span style="color: Red;">*</span> Zip</label>
<input type="text" id="zip" tabindex="9" />
<label for="Country"> Country</label>
<input type="text" id="Country" tabindex="10" />




</fieldset>



</form>

</div>



</body>
</html>

xashx
04-23-2010, 04:58 AM
Nevermind. I got it.