Hey guys,
Im trying to print a form that normally takes up over a page and trying to have it print on just one page. Like some printers that have a setting to "shrink to fit". How can I do this using CSS? I know about using @media print....etc. but specifically how can I 'shrink' the page without distorting the layout?As far as I know, there is no "shrink to fit" with CSS. My suggestion would be to use CSS to change the font and form field properties so that they are small enough to fit on one page.
A lil extra info: <!-- m --><a class="postlink" href="http://www.alistapart.com/articles/goingtoprintthanks">http://www.alistapart.com/articles/goingtoprintthanks</a><!-- m --> tegraphix....
another question then =D
is there a way to set the input text fields size equal to its maxlength?
like.... width: ????;You can change the width of input fields.
input {
width: 100px;
}yeah...im not exactly thinkin straight....I guess what I want to do is, for the printer version, make everything smaller, text, input fields, input text, etc....Here's an example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
color: #000000;
font-size: 9px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
input, textarea {
width: 100px;
/* If you want to change text size in fields */
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
}
textarea {
height: 50px;
}
</style>
</head>
<body>
<form>
Name: <input type="text" name="name" id="name" value="My Name">
<br /><br />
Comments: <br />
<textarea>Some text</textarea>
</form>
</body>
</html>thanks tegra...I though I had tried that last night but I must forgot a px or something cause it didnt work.
but I have another question...
I am trying to set the print margins with css. I checked out this page (<!-- m --><a class="postlink" href="http://www.westciv.com/style_master/academy/css_tutorial/advanced/printing.html">http://www.westciv.com/style_master/aca ... nting.html</a><!-- m -->) and this is what I did...
@page {
size: landscape;
margin-left: 0.1in;
margin-right: 0.1in;
margin-top: 0.1in;
margin-bottom: 0.1in;
}
...but its not working.
Thanks again for all the help...for the margins, try using either "px" or "%", not "in", for the measurementtryed px, %, and even cm. could there be something in the head i need?What exactly isn't working? Does it give you a margin larger than you are specifying or no margin at all?in or cm are the most appropriate for margin settings for the print page. Not all browsers understand the @page stylesheet command - try it with a version 8 browser and see if it works there, I don't think any of the version 7 browsers support it.
Im trying to print a form that normally takes up over a page and trying to have it print on just one page. Like some printers that have a setting to "shrink to fit". How can I do this using CSS? I know about using @media print....etc. but specifically how can I 'shrink' the page without distorting the layout?As far as I know, there is no "shrink to fit" with CSS. My suggestion would be to use CSS to change the font and form field properties so that they are small enough to fit on one page.
A lil extra info: <!-- m --><a class="postlink" href="http://www.alistapart.com/articles/goingtoprintthanks">http://www.alistapart.com/articles/goingtoprintthanks</a><!-- m --> tegraphix....
another question then =D
is there a way to set the input text fields size equal to its maxlength?
like.... width: ????;You can change the width of input fields.
input {
width: 100px;
}yeah...im not exactly thinkin straight....I guess what I want to do is, for the printer version, make everything smaller, text, input fields, input text, etc....Here's an example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
color: #000000;
font-size: 9px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
input, textarea {
width: 100px;
/* If you want to change text size in fields */
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
}
textarea {
height: 50px;
}
</style>
</head>
<body>
<form>
Name: <input type="text" name="name" id="name" value="My Name">
<br /><br />
Comments: <br />
<textarea>Some text</textarea>
</form>
</body>
</html>thanks tegra...I though I had tried that last night but I must forgot a px or something cause it didnt work.
but I have another question...
I am trying to set the print margins with css. I checked out this page (<!-- m --><a class="postlink" href="http://www.westciv.com/style_master/academy/css_tutorial/advanced/printing.html">http://www.westciv.com/style_master/aca ... nting.html</a><!-- m -->) and this is what I did...
@page {
size: landscape;
margin-left: 0.1in;
margin-right: 0.1in;
margin-top: 0.1in;
margin-bottom: 0.1in;
}
...but its not working.
Thanks again for all the help...for the margins, try using either "px" or "%", not "in", for the measurementtryed px, %, and even cm. could there be something in the head i need?What exactly isn't working? Does it give you a margin larger than you are specifying or no margin at all?in or cm are the most appropriate for margin settings for the print page. Not all browsers understand the @page stylesheet command - try it with a version 8 browser and see if it works there, I don't think any of the version 7 browsers support it.