Jump to content

Making My Fields Horizontal


groogruxking40

Recommended Posts

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

Link to comment
Share on other sites

Using a table isn't what jlhaslip meant, but creating 2 divs - one with the fields you want to keep on the left, and one with those for the right, and using the CSS to place them.

 

Also, your code there is quite a mess -you start without a doctype but a complete head and open body section, then have a doctype right in the middle of the html and follow with an entire set of tags including double closing body and html tags.

Link to comment
Share on other sites

OK-

I got it all figured out how I want, ....

You really want a doctype in the middle of all your code, duplicate html and body closing tags, and a bunch of validation errors?
Link to comment
Share on other sites

OK-

I got it all figured out how I want' date=' ....[/quote']You really want a doctype in the middle of all your code, duplicate html and body closing tags, and a bunch of validation errors?

 

I'll fix that a little bit later, it's a work in progress..

any idea on how to remove the 2 fieldset outlines??

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...