Re: [css-d] printing online forms
Thank you Stephan and Richard for taking the time to make some comments regarding CSS for rendering the print version of online forms... I played around with my print stylesheet taking your suggestions into consideration (see my original message below for all relevant links). My ultimate goal was to have the checkbox sections line up in two columns when printed (like they do on screen), but in the end I couldn't get it to do that... But good news! I did get them to neatly line up together in a single column (which is a good alternative to two columns because the important issue for me to keep in mind is that the person reading the form will be able to tell which checkbox goes with which label). In case you are interested... here is what I did in the print.css stylesheet: I made the for the checkbox section larger than it is for display on the screen. Then I made sure the label had no left hand margin. And I took your suggestion, Richard, and made the input.checkbox's width auto (and made the right margin .25 em). This renders the checkboxes in a even single column list for printing. Its not perfect, but I am not a webmaster nor a css designer by profession, so this was very a very helpful solution for me. Than you again, Jessica > From: [EMAIL PROTECTED] > To: css-d@lists.css-discuss.org > Date: Fri, 1 Feb 2008 14:57:40 -0500 > Subject: [css-d] printing online forms > > > Hello -- > > I'm the webmaster for a regional archives organization who have asked me to > update an online member application form. > > They do not want members to email the form to them, but rather fill in the > form online, print it out, and mail it in. I know this could be accomplished > very easily with a PDF form, but I think the idea is to be as user-friendly > (and accessible) as possible, so we've tried to limit the number of PDFs on > the site... > > So... since I am in the process of teaching myself tableless design with CSS > and thought I'd start here. I built the form with CSS (with many thanks to > "CSS Mastery" by Andy Budd), but now I need it to print properly. > > I've created a print stylesheet and now the biggest issue I'm having is > getting the checkbox columns to work in the print-out. They look great on the > screen and they print really awful... I'm trying so hard to make this work, > but I'm not exactly sure what I am doing wrong. > > Here is the online form: > http://www.lib.umd.edu/MARAC/members/member-app.html > > Here is the form stylesheet: > http://www.lib.umd.edu/MARAC/forms.css > > Here is the print stylesheet: > http://www.lib.umd.edu/MARAC/print.css > > Any suggestions or resources you could point me to? > > Thanks, > > Jessica Tanny > > > > > _ > Shed those extra pounds with MSN and The Biggest Loser! > http://biggestloser.msn.com/ > __ > css-discuss [EMAIL PROTECTED] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ _ Need to know the score, the latest news, or you need your Hotmail®-get your "fix". http://www.msnmobilefix.com/Default.aspx __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] printing online forms
On Feb 4, 2008 12:47 PM, Richard Grevers <[EMAIL PROTECTED]> wrote: > On 2/2/08, Jessica Tanny <[EMAIL PROTECTED]> wrote: > > : : > By the way I'm not sure about the frustration level of asking people > to print a form which includes half a dozen select fields (they have > to remember to make all the selections prior to printing, especially > as the "choose one" text gets in the way of them simply writing their > response in the box.) One way around that is to make the submit button validate. On submit the server produces a nicely formatted application with all the values from the form filled in. It has instructions to print and mail in (with address), a link "Print", and the print-style-sheet masks all the customary webpage decorations, so that a simple application letter results. Stephan > > -- > Richard Grevers, New Plymouth, New Zealand > Dramatic Design www.dramatic.co.nz > > __ > css-discuss [EMAIL PROTECTED] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > -- Stephan Wehner -> http://stephan.sugarmotor.org -> http://www.thrackle.org -> http://www.buckmaster.ca -> http://www.trafficlife.com -> http://stephansmap.org __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] printing online forms
On 2/2/08, Jessica Tanny <[EMAIL PROTECTED]> wrote:
>
> Hello --
>
> I'm the webmaster for a regional archives organization who have asked me to
> update an online member application form.
>
> They do not want members to email the form to them, but rather fill in the
> form online, print it out, and mail it in. I know this could be accomplished
> very easily with a PDF form, but I think the idea is to be as user-friendly
> (and accessible) as possible, so we've tried to limit the number of PDFs on
> the site...
>
> So... since I am in the process of teaching myself tableless design with CSS
> and thought I'd start here. I built the form with CSS (with many thanks to
> "CSS Mastery" by Andy Budd), but now I need it to print properly.
>
> I've created a print stylesheet and now the biggest issue I'm having is
> getting the checkbox columns to work in the print-out. They look great on the
> screen and they print really awful... I'm trying so hard to make this work,
> but I'm not exactly sure what I am doing wrong.
>
> Here is the online form:
> http://www.lib.umd.edu/MARAC/members/member-app.html
>
> Here is the form stylesheet:
> http://www.lib.umd.edu/MARAC/forms.css
>
> Here is the print stylesheet:
> http://www.lib.umd.edu/MARAC/print.css
>
> Any suggestions or resources you could point me to?
>
Your checkboxes are still governed by the rule
input {width: 400px;} and it appears that most browsers center a
standard checkbox widget in the defined width if it is greater than
the minimum necessary.
The following should correct it:
input.checkbox {width:auto;}
By the way I'm not sure about the frustration level of asking people
to print a form which includes half a dozen select fields (they have
to remember to make all the selections prior to printing, especially
as the "choose one" text gets in the way of them simply writing their
response in the box.)
--
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] printing online forms
Hello -- I'm the webmaster for a regional archives organization who have asked me to update an online member application form. They do not want members to email the form to them, but rather fill in the form online, print it out, and mail it in. I know this could be accomplished very easily with a PDF form, but I think the idea is to be as user-friendly (and accessible) as possible, so we've tried to limit the number of PDFs on the site... So... since I am in the process of teaching myself tableless design with CSS and thought I'd start here. I built the form with CSS (with many thanks to "CSS Mastery" by Andy Budd), but now I need it to print properly. I've created a print stylesheet and now the biggest issue I'm having is getting the checkbox columns to work in the print-out. They look great on the screen and they print really awful... I'm trying so hard to make this work, but I'm not exactly sure what I am doing wrong. Here is the online form: http://www.lib.umd.edu/MARAC/members/member-app.html Here is the form stylesheet: http://www.lib.umd.edu/MARAC/forms.css Here is the print stylesheet: http://www.lib.umd.edu/MARAC/print.css Any suggestions or resources you could point me to? Thanks, Jessica Tanny _ Shed those extra pounds with MSN and The Biggest Loser! http://biggestloser.msn.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
