Making My Fields Horizontal Instead of All Vertical - Programmers Heaven

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Categories

Welcome to the new platform of Programmer's Heaven! We apologize for the inconvenience caused, if you visited us from a broken link of the previous version. The main reason to move to a new platform is to provide more effective and collaborative experience to you all. Please feel free to experience the new platform and use its exciting features. Contact us for any issue that you need to get clarified. We are more than happy to help you.

Making My Fields Horizontal Instead of All Vertical

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

[code]/*
----------------------------------------------------------------
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 =========== */[/code]


thanks ahead of time!!!

Sign In or Register to comment.