0

see here: http://www.christiancouriernewspaper.com/blogbase/contactpage.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

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

3
Contributors
5
Replies
6
Views
9 Years
Discussion Span
Last Post by almostbob
0

Quick and dirty example:

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

0

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

0

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

<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

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

0

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

<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

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

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

0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.