Making My Fields Horizontal Instead of All Vertical

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
groogruxking40
Forum Newbie
Posts: 17
Joined: Wed Jun 17, 2009 8:04 am

Making My Fields Horizontal Instead of All Vertical

Post by groogruxking40 »

see here: http://www.christiancouriernewspaper.co ... ctpage.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:

Code: Select all

/*
   ----------------------------------------------------------------
   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!!!
User avatar
omniuni
Forum Regular
Posts: 738
Joined: Tue Jul 15, 2008 10:50 pm
Location: Carolina, USA

Re: Making My Fields Horizontal Instead of All Vertical

Post by omniuni »

Ah, tricky stuff. I don't have time to read all your code, but try this:

Code: Select all

display: block;
float: left;
Do that to two divs, and you'll notice they float to the left and the second one pushes over by the first. Good Luck!
groogruxking40
Forum Newbie
Posts: 17
Joined: Wed Jun 17, 2009 8:04 am

Re: Making My Fields Horizontal Instead of All Vertical

Post by groogruxking40 »

omniuni wrote:Ah, tricky stuff. I don't have time to read all your code, but try this:

Code: Select all

display: block;
float: left;
Do that to two divs, and you'll notice they float to the left and the second one pushes over by the first. Good Luck!
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
User avatar
omniuni
Forum Regular
Posts: 738
Joined: Tue Jul 15, 2008 10:50 pm
Location: Carolina, USA

Re: Making My Fields Horizontal Instead of All Vertical

Post by omniuni »

Code: Select all

.containingdiv fieldset{
border: 0;
}
:)
groogruxking40
Forum Newbie
Posts: 17
Joined: Wed Jun 17, 2009 8:04 am

Re: Making My Fields Horizontal Instead of All Vertical

Post by groogruxking40 »

omniuni wrote:

Code: Select all

.containingdiv fieldset{
border: 0;
}
:)
I just put that into my stylesheet?

thanks again
User avatar
omniuni
Forum Regular
Posts: 738
Joined: Tue Jul 15, 2008 10:50 pm
Location: Carolina, USA

Re: Making My Fields Horizontal Instead of All Vertical

Post by omniuni »

yes, but replace ".containingdiv" with the appropriate class or ID which contains the fieldset within it. The code removes all appearances of the fieldset within the indicated tag.
Post Reply