Ad:

HTML and CSS Discussion Thread
Unsolved
Views: 767

Jul 6th, 2009

Making My Fields Horizontal Instead of All Vertical

Expand Post »

see here: http://www.christiancouriernewspaper...ontactpage.php

What I want is for 7 fields (Name-State) on the Left just how they are
Then I want the remaining fields (Country- the spam question) on the right

I would like to have it so it all fits on one page without having to scroll

any ideas/suggestions?

the .css file is below

HTML and CSS Syntax (Toggle Plain Text)

/*
   ----------------------------------------------------------------
   GBCF-V3 BLUE STYLE SHEET - MIKE CHERIM HTTP://GREEN-BEAST.COM
   ----------------------------------------------------------------
   To use for testing, this stylesheet must be named default.css
*/
 
/* === form div and elements ======================================= */
 
#form-div { 
  font-family : verdana, helvetica, palatino sans, tahoma, arial, sans-serif;
  width : 70%;
  margin : auto;
  color : #FF8C00 ;
  line-height : 1.2em;
}
 
#form-div p.form-footer {
  margin : -35px 2px 20px 13px;
 }
 
#form-div p.form-footer a { 
  color : #003366; 
}
 
#form-div p.form-footer a:hover, #form-div p.form-footer a:focus, #form-div p.form-footer a:active { 
  color : #000; 
  text-decoration : none; 
}
 
#form-div p.form-footer a:focus, #form-div p.form-footer a:active { 
  background-color : #eee; 
}
 
 
/* === form div link styles ======================================== */
 
#form-div a { 
  color : #FF6600; 
}
 
#form-div a:hover, #form-div a:focus, #form-div a:active { 
  color : #000; 
  text-decoration : none; 
}
 
#form-div a:focus, #form-div a:active { 
  background-color : #eee; 
}
 
 
/* === success and error message/results box ======================= */
 
#form-div p.success, #form-div p.error, #form-div p.center { 
  color : #fff;
  /* color : #000; (lite colors option - uncomment to use) */
  padding : 1px 4px; 
  border : 1px solid #000; 
  background-color : #003366;
  /* background-color : #bfccd9; (lite colors option - uncomment to use) */
  margin : 10px 3px;
  text-align : center;
}
 
#form-div p.error { 
  background-color : #bb0000; 
  /* background-color : #edbaba; (lite colors option - uncomment to use) */
}
 
#form-div p.error a, #form-div p.success a {
  color : #ffff7f;
}
 
#form-div p.center {
  text-align : center;
  background-color : #edbaba;
  color : #000;
  margin-top : -3px;
  padding : 0px 4px; 
}
 
#form-div p.error a:hover, #form-div p.error a:focus, #form-div p.error a:active, 
#form-div p.success a:hover, #form-div p.success a:focus, #form-div p.success a:active {
  color : #eee;
  background-color : #bb0000; 
}
 
#form-div p.success a:hover, #form-div p.success a:focus, #form-div p.success a:active {
  background-color : #003366; 
}
 
 
/* === structural form elements ==================================== */
 
form#gbcf-form { }
 
fieldset.main-set,
fieldset.req-set,
fieldset.opt-set { 
  border : 1px solid #eee;
  padding : 5px;
}
 
 
/* === textural form elements ====================================== */
 
#form-div legend { 
  font-weight : bold;
}
 
#form-div legend span { }
 
legend.main-legend { 
  color : #777;
  font-size : 100%;
}
 
legend.req-legend,
legend.opt-legend { 
  color : #777;
font-size : 60%;
}
 
legend.main-legend span { }
legend.main-legend { }
 
legend.req-legend span { }
legend.req-legend {
  margin-left : -2px;
}
 
legend.opt-legend span { }
legend.opt-legend { 
  margin-left : -2px;
}
 
label.req-label, label.opt-label {
  color : #FF6600;
font-size : 60%;
}
 
label.opt-label.check {
  float : right;
  padding : 0;
  margin : 1px 4px;
  cursor : pointer;
}
 
label.opt-label.main-label {
  margin : 0 2px;
  font-weight : bold;
  font-size : 75%; 
}
 
label.opt-label.main-label span {
  font-weight : normal;
  color : #FF6600;
font-sze : 60%;
}
 
label.opt-label.main-label span.req, label span.req  {
  font-weight : bold;
  color : #c70000;
}
 
label.req-label.explain {
  color : #666;
  font-size : .8em;
}
 
label.req-label.explain:hover {
  color : #000;
}
 
/* === control and interface form elements ========================= */
/*
  note: In this section you will see the hover/focus styles for the 
  inputs. For example: input:hover, input:focus. You will also see 
  these names applied as classes: input.hover, input,focus, for 
  example. This is not done by mistake. Those classes are needed for 
  the JavaScript focus script (files/focus.js) for IE 7 and older.
*/
 
input.text-long.address, input.text-long.address:hover, input.text-long.address:focus,
input.text-long.address.hover, input.text-long.address.focus {
  border-bottom : 0;
  margin-bottom : 0;
  padding-bottom : 2px;
  border-bottom : 1px dotted #bbb;
}
 
input.text-long.address2, input.text-long.address2:hover, input.text-long.address2:focus,
input.text-long.address2.hover, input.text-long.address2.focus {
  border-top : 0;
  margin-top : 0;
  padding-top : 2px;
  border-top : 1px dotted #bbb;
}
 
input.checkbox {
  border : 1px solid #999;
  width : .9em;
  height :.9em;
  padding : 0;
  margin : 0;
  cursor : pointer;
}
 
input.checkbox:hover, input.checkbox.hover,
input.checkbox:focus, input.checkbox.focus {
  border : 1px solid #666;
}
 
input.text-short, 
input.text-med, 
input.text-long,
select.select,
textarea.textarea {
  font : 0.6em verdana, helvetica, palatino sans, tahoma, arial, sans-serif;
  border : 1px solid #999;
  background-color : #fffffe;
  cursor : text;
  padding : 1px 2px;
}
 
select.select {
  padding : 1px 0;
}
 
input.text-short {
  width : 75px;
}
 
input.text-med, select.select {
  width : 150px;
}
 
input.text-long {
  width : 175px;
}
 
textarea.textarea {
  width : 220px;
  height : 100px;
}
 
select.select, select.select option {
  cursor : pointer;
}
 
input.text-short:focus, input.text-short.focus, 
input.text-med:focus, input.text-med.focus,
input.text-long:focus, input.text-long.focus,
select.select:focus, input.select.focus,
textarea.textarea:focus, textarea.textarea.focus {
  border : 1px solid #666;
  background-color : #ffe;
}
 
input.button { 
  font : 0.9em verdana, helvetica, palatino sans, tahoma, arial, sans-serif;
  font-weight : bold;
  margin-top : 8px;
  padding : 1px 10px;
  cursor : pointer;
  float : right;
  clear : both;
  color : #003366;
}
 
input.button:hover, input.button.hover,
input.button:focus, input.button.focus {
  color : #333;
}
 
/* because IE6 sucks - if you have a conditionally served IE6 style sheet add this to it */
* html input.button {
  border : 1px solid #666;
}
 
 
/* EOF - Created by Mike Cherim @ http://green-beast.com =========== */

/*
   ----------------------------------------------------------------
   GBCF-V3 BLUE STYLE SHEET - MIKE CHERIM HTTP://GREEN-BEAST.COM
   ----------------------------------------------------------------
   To use for testing, this stylesheet must be named default.css
*/

/* === form div and elements ======================================= */

#form-div { 
  font-family : verdana, helvetica, palatino sans, tahoma, arial, sans-serif;
  width : 70%;
  margin : auto;
  color : #FF8C00 ;
  line-height : 1.2em;
}

#form-div p.form-footer {
  margin : -35px 2px 20px 13px;
 }

#form-div p.form-footer a { 
  color : #003366; 
}

#form-div p.form-footer a:hover, #form-div p.form-footer a:focus, #form-div p.form-footer a:active { 
  color : #000; 
  text-decoration : none; 
}

#form-div p.form-footer a:focus, #form-div p.form-footer a:active { 
  background-color : #eee; 
}


/* === form div link styles ======================================== */

#form-div a { 
  color : #FF6600; 
}
  
#form-div a:hover, #form-div a:focus, #form-div a:active { 
  color : #000; 
  text-decoration : none; 
}

#form-div a:focus, #form-div a:active { 
  background-color : #eee; 
}


/* === success and error message/results box ======================= */

#form-div p.success, #form-div p.error, #form-div p.center { 
  color : #fff;
  /* color : #000; (lite colors option - uncomment to use) */
  padding : 1px 4px; 
  border : 1px solid #000; 
  background-color : #003366;
  /* background-color : #bfccd9; (lite colors option - uncomment to use) */
  margin : 10px 3px;
  text-align : center;
}

#form-div p.error { 
  background-color : #bb0000; 
  /* background-color : #edbaba; (lite colors option - uncomment to use) */
}

#form-div p.error a, #form-div p.success a {
  color : #ffff7f;
}

#form-div p.center {
  text-align : center;
  background-color : #edbaba;
  color : #000;
  margin-top : -3px;
  padding : 0px 4px; 
}

#form-div p.error a:hover, #form-div p.error a:focus, #form-div p.error a:active, 
#form-div p.success a:hover, #form-div p.success a:focus, #form-div p.success a:active {
  color : #eee;
  background-color : #bb0000; 
}

#form-div p.success a:hover, #form-div p.success a:focus, #form-div p.success a:active {
  background-color : #003366; 
}


/* === structural form elements ==================================== */

form#gbcf-form { }

fieldset.main-set,
fieldset.req-set,
fieldset.opt-set { 
  border : 1px solid #eee;
  padding : 5px;
}


/* === textural form elements ====================================== */

#form-div legend { 
  font-weight : bold;
}

#form-div legend span { }

legend.main-legend { 
  color : #777;
  font-size : 100%;
}

legend.req-legend,
legend.opt-legend { 
  color : #777;
font-size : 60%;
}

legend.main-legend span { }
legend.main-legend { }

legend.req-legend span { }
legend.req-legend {
  margin-left : -2px;
}

legend.opt-legend span { }
legend.opt-legend { 
  margin-left : -2px;
}

label.req-label, label.opt-label {
  color : #FF6600;
font-size : 60%;
}

label.opt-label.check {
  float : right;
  padding : 0;
  margin : 1px 4px;
  cursor : pointer;
}

label.opt-label.main-label {
  margin : 0 2px;
  font-weight : bold;
  font-size : 75%; 
}

label.opt-label.main-label span {
  font-weight : normal;
  color : #FF6600;
font-sze : 60%;
}

label.opt-label.main-label span.req, label span.req  {
  font-weight : bold;
  color : #c70000;
}

label.req-label.explain {
  color : #666;
  font-size : .8em;
}

label.req-label.explain:hover {
  color : #000;
}

/* === control and interface form elements ========================= */
/*
  note: In this section you will see the hover/focus styles for the 
  inputs. For example: input:hover, input:focus. You will also see 
  these names applied as classes: input.hover, input,focus, for 
  example. This is not done by mistake. Those classes are needed for 
  the JavaScript focus script (files/focus.js) for IE 7 and older.
*/

input.text-long.address, input.text-long.address:hover, input.text-long.address:focus,
input.text-long.address.hover, input.text-long.address.focus {
  border-bottom : 0;
  margin-bottom : 0;
  padding-bottom : 2px;
  border-bottom : 1px dotted #bbb;
}

input.text-long.address2, input.text-long.address2:hover, input.text-long.address2:focus,
input.text-long.address2.hover, input.text-long.address2.focus {
  border-top : 0;
  margin-top : 0;
  padding-top : 2px;
  border-top : 1px dotted #bbb;
}

input.checkbox {
  border : 1px solid #999;
  width : .9em;
  height :.9em;
  padding : 0;
  margin : 0;
  cursor : pointer;
}

input.checkbox:hover, input.checkbox.hover,
input.checkbox:focus, input.checkbox.focus {
  border : 1px solid #666;
}

input.text-short, 
input.text-med, 
input.text-long,
select.select,
textarea.textarea {
  font : 0.6em verdana, helvetica, palatino sans, tahoma, arial, sans-serif;
  border : 1px solid #999;
  background-color : #fffffe;
  cursor : text;
  padding : 1px 2px;
}

select.select {
  padding : 1px 0;
}

input.text-short {
  width : 75px;
}

input.text-med, select.select {
  width : 150px;
}

input.text-long {
  width : 175px;
}

textarea.textarea {
  width : 220px;
  height : 100px;
}

select.select, select.select option {
  cursor : pointer;
}

input.text-short:focus, input.text-short.focus, 
input.text-med:focus, input.text-med.focus,
input.text-long:focus, input.text-long.focus,
select.select:focus, input.select.focus,
textarea.textarea:focus, textarea.textarea.focus {
  border : 1px solid #666;
  background-color : #ffe;
}

input.button { 
  font : 0.9em verdana, helvetica, palatino sans, tahoma, arial, sans-serif;
  font-weight : bold;
  margin-top : 8px;
  padding : 1px 10px;
  cursor : pointer;
  float : right;
  clear : both;
  color : #003366;
}

input.button:hover, input.button.hover,
input.button:focus, input.button.focus {
  color : #333;
}

/* because IE6 sucks - if you have a conditionally served IE6 style sheet add this to it */
* html input.button {
  border : 1px solid #666;
}


/* EOF - Created by Mike Cherim @ http://green-beast.com =========== */

thanks ahead of time!!!

Similar Threads

Horizontal vs Vertical Nav for Retail Store in Site Layout and Usability
Stretch background horizontal, then vertical in HTML and CSS
horizontal and vertical lines on startup in Monitors, Displays and Video Cards
Horizontal lines across display in Monitors, Displays and Video Cards
Horizontal or Vertical? in Site Layout and Usability

groogruxking40

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

11 posts
since Jun 2009

Permalink

Jul 6th, 2009

Re: Making My Fields Horizontal Instead of All Vertical

Quick and dirty example:

HTML and CSS Syntax (Toggle Plain Text)
<div style="float:right;">
     form fields go here
</div>
<div style="float:right;">
     form fields go here
</div>

The key is the "float" attribute. Just play around with width/height to get what you want exactly.

Phaelax

Reputation Points: 92

Solved Threads: 51

Practically a Posting Shark

Offline

856 posts
since Mar 2004

Permalink

Jul 6th, 2009

Re: Making My Fields Horizontal Instead of All Vertical

ok where do i put it exactly in my stylesheet?

can you copy/paste exactly what needs to go in there?

thank you very much for the quick reply

groogruxking40

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

11 posts
since Jun 2009

Permalink

Jul 6th, 2009

Re: Making My Fields Horizontal Instead of All Vertical

hate to rain on your parade
the form is laid out in tables
not css
css is only used to set the label colours
change the table code

html Syntax (Toggle Plain Text)
 <table>
<tr>
<td>
 <fieldset class="req-set" style="border:0"> 
  <legend class="req-legend"><span>Required</span></legend>
<td>
   <label id="name-error" for="name" class="req-label">Name</label><br />
    <input type="text" class="text-med" name="name" value="" size="32" maxlength="60" id="name" /><br />
   <label id="email-error" for="email" class="req-label">Email</label><br />
    <input type="text" class="text-med" name="email" value="" size="32" maxlength="60" id="email" /><br />
  </fieldset> 
<td>
<!--optional set-->
 <fieldset class="opt-set" style="border:0"> 
  <legend class="opt-legend"><span>Required</span></legend>
   <label id="org-error" for="org" class="opt-label">Organization</label><br />
    <input type="text" class="text-med" name="org" value="" size="32" maxlength="60" id="org" /><br />
   <label id="phone-error" for="phone" class="opt-label">Phone</label><br />
    <input type="text" class="text-med" name="phone" value="" size="32" maxlength="15" id="phone" /><br />
   <label id="address1" for="address" class="opt-label">Address</label><br />
    <input type="text" class="text-long address" name="address" value="" size="42" maxlength="30" id="address" />
   <label id="addy2-error" for="address2" class="opt-label address2" style="position:absolute;left:-9000px;"><br />
Address (continued)</label><br />
    <input type="text" class="text-long address2" name="address2" value="" size="42" maxlength="30" id="address2" /><br />
   <label id="city-error" for="city" class="opt-label">City/town</label><br />
    <input type="text" class="text-med" name="city" value="" size="32" maxlength="60" id="city" /><br />
   <label id="state-error" for="state" class="opt-label">State/province</label><br />
    <input type="text" class="text-med" name="state" value="" size="32" maxlength="40" id="state" /><br />
   <label id="postcode-error" for="postcode" class="opt-label">Zip/postal code</label><br />
    <input type="text" class="text-short" name="postcode" value="" size="22" maxlength="20" id="postcode" /><br />
   <label id="country-error" for="country" class="opt-label">Country</label><br />
    <input type="text" class="text-short" name="country" value="" size="22" maxlength="40" id="country" /><br />
   <label id="website-error" for="website" class="opt-label">Website</label><br />
    <input type="text" class="text-med" name="website" value="http://" size="32" maxlength="80" id="website" /><br />
   <label id="optmenu-error" for="option-menu" class="opt-label">Referred by</label><br />
    <select class="select" name="option-menu" id="option-menu">
     <option value="" selected="selected">Select one</option>
     <option value="A print advertisement">A print advertisement</option>
     <option value="A web advertisement">A web advertisement</option>
     <option value="Friend or family member">Friend or family member</option>
     <option value="Another source (below)">Another source (below)</option>
    </select><br />
 </fieldset>
 
<!--required set 2-->
<td>
 <fieldset class="req-set" style="border:0"> 
  <legend class="req-legend"><span>Required</span></legend>
   <label id="subject-error" for="subject" class="req-label">Subject</label><br />
    <select class="select" name="subject" id="subject">
     <option value="" selected="selected">Select one</option>
     <option value="Quick comment">Quick comment</option>
     <option value="Quick question">Quick question</option>
     <option value="Site problem report">Site problem report</option>
     <option value="Advertising Query">Advertising Query</option>
     <option value="Ad Submission">Ad Submission</option>
    </select><br />
   <label id="message-error" for="message" class="req-label">Message</label><br />
    <textarea class="textarea" rows="12" cols="60" name="message" id="message"></textarea><br />
   <label id="antispam-error" for="antispam" class="req-label">Is faith cold, lukewarm or hot?</label><br />
    <input type="text" class="text-short" name="antispam" value="" size="22" maxlength="10" id="antispam" /> 
   <label class="req-label explain">- Your answer proves you're a person</label><br />
 </fieldset>
 
   <div style="position:absolute;left:-9000px;">
   <label id="honeypot-error" for="honeypot" class="opt-label">Leave this anti-spam trap empty</label><br />
    <input type="text" class="text-med" name="honeypot" value="" size="32" maxlength="255" id="honeypot" /><br />
    <input type="hidden" name="hidden" value="fkf41452949cfa08e092dd53547ac40e15id05f3877bcef7091f6f85f8f1ab6b3f01mc" id="hidden" alt="hidden" />
   </div>
   <label id="cc-opt-error" class="opt-label check">
    <input class="checkbox" type="checkbox" name="cc-opt" id="cc-opt" value="cc" />&nbsp;&nbsp;Check for email copy</label><br />
    <input type="submit" class="button" name="ID05F3877BCEF7091F6F85F8F1AB6B3F01MC" id="ID05F3877BCEF7091F6F85F8F1AB6B3F01MC" value="Submit" alt="Submit" /><br />
 </fieldset></tr></table>
</form>
 <table>
<tr>
<td>
 <fieldset class="req-set" style="border:0"> 
  <legend class="req-legend"><span>Required</span></legend>
<td>
   <label id="name-error" for="name" class="req-label">Name</label><br />
    <input type="text" class="text-med" name="name" value="" size="32" maxlength="60" id="name" /><br />
   <label id="email-error" for="email" class="req-label">Email</label><br />
    <input type="text" class="text-med" name="email" value="" size="32" maxlength="60" id="email" /><br />
  </fieldset> 
<td>
<!--optional set-->
 <fieldset class="opt-set" style="border:0"> 
  <legend class="opt-legend"><span>Required</span></legend>
   <label id="org-error" for="org" class="opt-label">Organization</label><br />
    <input type="text" class="text-med" name="org" value="" size="32" maxlength="60" id="org" /><br />
   <label id="phone-error" for="phone" class="opt-label">Phone</label><br />
    <input type="text" class="text-med" name="phone" value="" size="32" maxlength="15" id="phone" /><br />
   <label id="address1" for="address" class="opt-label">Address</label><br />
    <input type="text" class="text-long address" name="address" value="" size="42" maxlength="30" id="address" />
   <label id="addy2-error" for="address2" class="opt-label address2" style="position:absolute;left:-9000px;"><br />
Address (continued)</label><br />
    <input type="text" class="text-long address2" name="address2" value="" size="42" maxlength="30" id="address2" /><br />
   <label id="city-error" for="city" class="opt-label">City/town</label><br />
    <input type="text" class="text-med" name="city" value="" size="32" maxlength="60" id="city" /><br />
   <label id="state-error" for="state" class="opt-label">State/province</label><br />
    <input type="text" class="text-med" name="state" value="" size="32" maxlength="40" id="state" /><br />
   <label id="postcode-error" for="postcode" class="opt-label">Zip/postal code</label><br />
    <input type="text" class="text-short" name="postcode" value="" size="22" maxlength="20" id="postcode" /><br />
   <label id="country-error" for="country" class="opt-label">Country</label><br />
    <input type="text" class="text-short" name="country" value="" size="22" maxlength="40" id="country" /><br />
   <label id="website-error" for="website" class="opt-label">Website</label><br />
    <input type="text" class="text-med" name="website" value="http://" size="32" maxlength="80" id="website" /><br />
   <label id="optmenu-error" for="option-menu" class="opt-label">Referred by</label><br />
    <select class="select" name="option-menu" id="option-menu">
     <option value="" selected="selected">Select one</option>
     <option value="A print advertisement">A print advertisement</option>
     <option value="A web advertisement">A web advertisement</option>
     <option value="Friend or family member">Friend or family member</option>
     <option value="Another source (below)">Another source (below)</option>
    </select><br />
 </fieldset>

<!--required set 2-->
<td>
 <fieldset class="req-set" style="border:0"> 
  <legend class="req-legend"><span>Required</span></legend>
   <label id="subject-error" for="subject" class="req-label">Subject</label><br />
    <select class="select" name="subject" id="subject">
     <option value="" selected="selected">Select one</option>
     <option value="Quick comment">Quick comment</option>
     <option value="Quick question">Quick question</option>
     <option value="Site problem report">Site problem report</option>
     <option value="Advertising Query">Advertising Query</option>
     <option value="Ad Submission">Ad Submission</option>
    </select><br />
   <label id="message-error" for="message" class="req-label">Message</label><br />
    <textarea class="textarea" rows="12" cols="60" name="message" id="message"></textarea><br />
   <label id="antispam-error" for="antispam" class="req-label">Is faith cold, lukewarm or hot?</label><br />
    <input type="text" class="text-short" name="antispam" value="" size="22" maxlength="10" id="antispam" /> 
   <label class="req-label explain">- Your answer proves you're a person</label><br />
 </fieldset>

   <div style="position:absolute;left:-9000px;">
   <label id="honeypot-error" for="honeypot" class="opt-label">Leave this anti-spam trap empty</label><br />
    <input type="text" class="text-med" name="honeypot" value="" size="32" maxlength="255" id="honeypot" /><br />
    <input type="hidden" name="hidden" value="fkf41452949cfa08e092dd53547ac40e15id05f3877bcef7091f6f85f8f1ab6b3f01mc" id="hidden" alt="hidden" />
   </div>
   <label id="cc-opt-error" class="opt-label check">
    <input class="checkbox" type="checkbox" name="cc-opt" id="cc-opt" value="cc" />&nbsp;&nbsp;Check for email copy</label><br />
    <input type="submit" class="button" name="ID05F3877BCEF7091F6F85F8F1AB6B3F01MC" id="ID05F3877BCEF7091F6F85F8F1AB6B3F01MC" value="Submit" alt="Submit" /><br />
 </fieldset></tr></table>
</form>

Preserving Copyright Notice

html Syntax (Toggle Plain Text)

<!--GBCF-v3 Secure and Accessible PHP Contact Form by Mike Cherim @ http://green-beast.com (v3 (c) 2007-2009)-->

Move the input fields labels etc into the table cells you want them to be in, to get the alignment you require, or design the same form in css, you can do it, preserving the field names

Last edited by almostbob; Jul 6th, 2009 at 6:51 pm.

almostbob

Reputation Points: 562

Solved Threads: 368

Posting Maven

Offline

2,970 posts
since Jan 2009

Permalink

Jul 7th, 2009

Re: Making My Fields Horizontal Instead of All Vertical

Click to Expand / Collapse Quote originally posted by almostbob ...

hate to rain on your parade
the form is laid out in tables
not css
css is only used to set the label colours
change the table code
html Syntax (Toggle Plain Text)
 <table>
<tr>
<td>
 <fieldset class="req-set" style="border:0"> 
  <legend class="req-legend"><span>Required</span></legend>
<td>
   <label id="name-error" for="name" class="req-label">Name</label><br />
    <input type="text" class="text-med" name="name" value="" size="32" maxlength="60" id="name" /><br />
   <label id="email-error" for="email" class="req-label">Email</label><br />
    <input type="text" class="text-med" name="email" value="" size="32" maxlength="60" id="email" /><br />
  </fieldset> 
<td>

 <fieldset class="opt-set" style="border:0"> 
  <legend class="opt-legend"><span>Required</span></legend>
   <label id="org-error" for="org" class="opt-label">Organization</label><br />
    <input type="text" class="text-med" name="org" value="" size="32" maxlength="60" id="org" /><br />
   <label id="phone-error" for="phone" class="opt-label">Phone</label><br />
    <input type="text" class="text-med" name="phone" value="" size="32" maxlength="15" id="phone" /><br />
   <label id="address1" for="address" class="opt-label">Address</label><br />
    <input type="text" class="text-long address" name="address" value="" size="42" maxlength="30" id="address" />
   <label id="addy2-error" for="address2" class="opt-label address2" style="position:absolute;left:-9000px;"><br />
Address (continued)</label><br />
    <input type="text" class="text-long address2" name="address2" value="" size="42" maxlength="30" id="address2" /><br />
   <label id="city-error" for="city" class="opt-label">City/town</label><br />
    <input type="text" class="text-med" name="city" value="" size="32" maxlength="60" id="city" /><br />
   <label id="state-error" for="state" class="opt-label">State/province</label><br />
    <input type="text" class="text-med" name="state" value="" size="32" maxlength="40" id="state" /><br />
   <label id="postcode-error" for="postcode" class="opt-label">Zip/postal code</label><br />
    <input type="text" class="text-short" name="postcode" value="" size="22" maxlength="20" id="postcode" /><br />
   <label id="country-error" for="country" class="opt-label">Country</label><br />
    <input type="text" class="text-short" name="country" value="" size="22" maxlength="40" id="country" /><br />
   <label id="website-error" for="website" class="opt-label">Website</label><br />
    <input type="text" class="text-med" name="website" value="http://" size="32" maxlength="80" id="website" /><br />
   <label id="optmenu-error" for="option-menu" class="opt-label">Referred by</label><br />
    <select class="select" name="option-menu" id="option-menu">
     <option value="" selected="selected">Select one</option>
     <option value="A print advertisement">A print advertisement</option>
     <option value="A web advertisement">A web advertisement</option>
     <option value="Friend or family member">Friend or family member</option>
     <option value="Another source (below)">Another source (below)</option>
    </select><br />
 </fieldset>
 

<td>
 <fieldset class="req-set" style="border:0"> 
  <legend class="req-legend"><span>Required</span></legend>
   <label id="subject-error" for="subject" class="req-label">Subject</label><br />
    <select class="select" name="subject" id="subject">
     <option value="" selected="selected">Select one</option>
     <option value="Quick comment">Quick comment</option>
     <option value="Quick question">Quick question</option>
     <option value="Site problem report">Site problem report</option>
     <option value="Advertising Query">Advertising Query</option>
     <option value="Ad Submission">Ad Submission</option>
    </select><br />
   <label id="message-error" for="message" class="req-label">Message</label><br />
    <textarea class="textarea" rows="12" cols="60" name="message" id="message"></textarea><br />
   <label id="antispam-error" for="antispam" class="req-label">Is faith cold, lukewarm or hot?</label><br />
    <input type="text" class="text-short" name="antispam" value="" size="22" maxlength="10" id="antispam" /> 
   <label class="req-label explain">- Your answer proves you're a person</label><br />
 </fieldset>
 
   <div style="position:absolute;left:-9000px;">
   <label id="honeypot-error" for="honeypot" class="opt-label">Leave this anti-spam trap empty</label><br />
    <input type="text" class="text-med" name="honeypot" value="" size="32" maxlength="255" id="honeypot" /><br />
    <input type="hidden" name="hidden" value="fkf41452949cfa08e092dd53547ac40e15id05f3877bcef7091f6f85f8f1ab6b3f01mc" id="hidden" alt="hidden" />
   </div>
   <label id="cc-opt-error" class="opt-label check">
    <input class="checkbox" type="checkbox" name="cc-opt" id="cc-opt" value="cc" />&nbsp;&nbsp;Check for email copy</label><br />
    <input type="submit" class="button" name="ID05F3877BCEF7091F6F85F8F1AB6B3F01MC" id="ID05F3877BCEF7091F6F85F8F1AB6B3F01MC" value="Submit" alt="Submit" /><br />
 </fieldset></tr></table>
</form>
<table> <tr> <td> <fieldset class="req-set" style="border:0"> <legend class="req-legend"><span>Required</span></legend> <td> <label id="name-error" for="name" class="req-label">Name</label><br /> <input type="text" class="text-med" name="name" value="" size="32" maxlength="60" id="name" /><br /> <label id="email-error" for="email" class="req-label">Email</label><br /> <input type="text" class="text-med" name="email" value="" size="32" maxlength="60" id="email" /><br /> </fieldset> <td>  <fieldset class="opt-set" style="border:0"> <legend class="opt-legend"><span>Required</span></legend> <label id="org-error" for="org" class="opt-label">Organization</label><br /> <input type="text" class="text-med" name="org" value="" size="32" maxlength="60" id="org" /><br /> <label id="phone-error" for="phone" class="opt-label">Phone</label><br /> <input type="text" class="text-med" name="phone" value="" size="32" maxlength="15" id="phone" /><br /> <label id="address1" for="address" class="opt-label">Address</label><br /> <input type="text" class="text-long address" name="address" value="" size="42" maxlength="30" id="address" /> <label id="addy2-error" for="address2" class="opt-label address2" style="position:absolute;left:-9000px;"><br /> Address (continued)</label><br /> <input type="text" class="text-long address2" name="address2" value="" size="42" maxlength="30" id="address2" /><br /> <label id="city-error" for="city" class="opt-label">City/town</label><br /> <input type="text" class="text-med" name="city" value="" size="32" maxlength="60" id="city" /><br /> <label id="state-error" for="state" class="opt-label">State/province</label><br /> <input type="text" class="text-med" name="state" value="" size="32" maxlength="40" id="state" /><br /> <label id="postcode-error" for="postcode" class="opt-label">Zip/postal code</label><br /> <input type="text" class="text-short" name="postcode" value="" size="22" maxlength="20" id="postcode" /><br /> <label id="country-error" for="country" class="opt-label">Country</label><br /> <input type="text" class="text-short" name="country" value="" size="22" maxlength="40" id="country" /><br /> <label id="website-error" for="website" class="opt-label">Website</label><br /> <input type="text" class="text-med" name="website" value="http://" size="32" maxlength="80" id="website" /><br /> <label id="optmenu-error" for="option-menu" class="opt-label">Referred by</label><br /> <select class="select" name="option-menu" id="option-menu"> <option value="" selected="selected">Select one</option> <option value="A print advertisement">A print advertisement</option> <option value="A web advertisement">A web advertisement</option> <option value="Friend or family member">Friend or family member</option> <option value="Another source (below)">Another source (below)</option> </select><br /> </fieldset>  <td> <fieldset class="req-set" style="border:0"> <legend class="req-legend"><span>Required</span></legend> <label id="subject-error" for="subject" class="req-label">Subject</label><br /> <select class="select" name="subject" id="subject"> <option value="" selected="selected">Select one</option> <option value="Quick comment">Quick comment</option> <option value="Quick question">Quick question</option> <option value="Site problem report">Site problem report</option> <option value="Advertising Query">Advertising Query</option> <option value="Ad Submission">Ad Submission</option> </select><br /> <label id="message-error" for="message" class="req-label">Message</label><br /> <textarea class="textarea" rows="12" cols="60" name="message" id="message"></textarea><br /> <label id="antispam-error" for="antispam" class="req-label">Is faith cold, lukewarm or hot?</label><br /> <input type="text" class="text-short" name="antispam" value="" size="22" maxlength="10" id="antispam" /> <label class="req-label explain">- Your answer proves you're a person</label><br /> </fieldset> <div style="position:absolute;left:-9000px;"> <label id="honeypot-error" for="honeypot" class="opt-label">Leave this anti-spam trap empty</label><br /> <input type="text" class="text-med" name="honeypot" value="" size="32" maxlength="255" id="honeypot" /><br /> <input type="hidden" name="hidden" value="fkf41452949cfa08e092dd53547ac40e15id05f3877bcef7091f6f85f8f1ab6b3f01mc" id="hidden" alt="hidden" /> </div> <label id="cc-opt-error" class="opt-label check"> <input class="checkbox" type="checkbox" name="cc-opt" id="cc-opt" value="cc" />  Check for email copy</label><br /> <input type="submit" class="button" name="ID05F3877BCEF7091F6F85F8F1AB6B3F01MC" id="ID05F3877BCEF7091F6F85F8F1AB6B3F01MC" value="Submit" alt="Submit" /><br /> </fieldset></tr></table> </form>
Preserving Copyright Notice
html Syntax (Toggle Plain Text)


Move the input fields labels etc into the table cells you want them to be in, to get the alignment you require, or design the same form in css, you can do it, preserving the field names

OK-
I got it all figured out how I want, now I need to know how to remove those goofy looking fieldset outlines under the SPAM question and the SUBMIT button...

any ideas?

thanks for all the help

groogruxking40

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

11 posts
since Jun 2009

Permalink

Jul 7th, 2009

Re: Making My Fields Horizontal Instead of All Vertical

to remove the fieldset boxes, remove the
<fieldset></fieldset> tags,
to retain the fieldsets without the borders, set
fieldset { border:none; } in the css

Last edited by almostbob; Jul 7th, 2009 at 12:58 pm.

almostbob

Reputation Points: 562

Solved Threads: 368

Posting Maven

Offline

2,970 posts
since Jan 2009

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: need help to my css dropdown menu

Next Thread in HTML and CSS Forum Timeline: History troubles.

DaniWeb Message

Cancel Changes

User Name
Password