HTML and CSS

Making My Fields Horizontal Instead of All Vertical

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jun 2009

Posts: 11

Reputation: groogruxking40 is an unknown quantity at this point

Solved Threads: 0

groogruxking40 groogruxking40 is offline

Offline

Newbie Poster

Making My Fields Horizontal Instead of All Vertical

Jul 6th, 2009

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

Help with Code Tags

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!!!

•

Join Date: Mar 2004

Posts: 763

Reputation: Phaelax is on a distinguished road

Solved Threads: 38

Phaelax

Offline

Master Poster

Re: Making My Fields Horizontal Instead of All Vertical

Jul 6th, 2009

Quick and dirty example:

 Help with Code Tags 
 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.

•

Join Date: Jun 2009

Posts: 11

Reputation: groogruxking40 is an unknown quantity at this point

Solved Threads: 0

groogruxking40 groogruxking40 is offline

Offline

Newbie Poster

Re: Making My Fields Horizontal Instead of All Vertical

Jul 6th, 2009

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

•

Join Date: Jan 2009

Posts: 1,316

Reputation: almostbob has a spectacular aura about

Solved Threads: 161

almostbob

Offline

Nearly a Posting Virtuoso

Re: Making My Fields Horizontal Instead of All Vertical

Jul 6th, 2009

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

 Help with Code Tags 
 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

Help with Code Tags

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.

Failure is not an option It's included free
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it

Please mark solved problems, solved

•

Join Date: Jun 2009

Posts: 11

Reputation: groogruxking40 is an unknown quantity at this point

Solved Threads: 0

groogruxking40 groogruxking40 is offline

Offline

Newbie Poster

Re: Making My Fields Horizontal Instead of All Vertical

Jul 7th, 2009

•

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
Help with Code Tags

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
Help with Code Tags

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

•

Join Date: Jan 2009

Posts: 1,316

Reputation: almostbob has a spectacular aura about

Solved Threads: 161

almostbob

Offline

Nearly a Posting Virtuoso

Re: Making My Fields Horizontal Instead of All Vertical

Jul 7th, 2009

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.