groogruxking40 Posted July 6, 2009 Report Share Posted July 6, 2009 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!!! Quote Link to comment Share on other sites More sharing options...
jlhaslip Posted July 6, 2009 Report Share Posted July 6, 2009 Place the first seven fields into a div that is 50% wide, the remaining ones into another div with the same width. Float the first div left, the second one right. Quote Link to comment Share on other sites More sharing options...
groogruxking40 Posted July 6, 2009 Author Report Share Posted July 6, 2009 ok, can you copy and paste exactly where to put it? thanks for the quick reply Quote Link to comment Share on other sites More sharing options...
Andrea Posted July 6, 2009 Report Share Posted July 6, 2009 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. Quote Link to comment Share on other sites More sharing options...
groogruxking40 Posted July 7, 2009 Author Report Share Posted July 7, 2009 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 people Quote Link to comment Share on other sites More sharing options...
Andrea Posted July 7, 2009 Report Share Posted July 7, 2009 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? Quote Link to comment Share on other sites More sharing options...
groogruxking40 Posted July 7, 2009 Author Report Share Posted July 7, 2009 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?? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.