Solved

Print Friendly Page

Posted on 2003-10-21
3
141 Views
Last Modified: 2010-04-09
I'm working on an Ecards application using ASP and I'm trying to create a print friendly page.  I have very little experience with the print aspect of development and I'm trying to get it so that when the user clicks 'print' the page prints out with two inch margins and doesn't show the buttons at the bottom of the page.  

Thanks in advance,

N
0
Comment
Question by:stretch73
  • 2
3 Comments
 
LVL 31

Accepted Solution

by:
seanpowell earned 200 total points
Comment Utility
There's potentially a lot of issues here, so I'll start with giving you two basics that should get you in the right direction.

1. You need to add a stylesheet tag in the head of your document that is only for printing, like this:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

print.css contains:

#footerbuttons {
      display: none;
      }
      
#content {
      width: auto;
      border: 0;
      margin: 5%;
      padding: 0;
      float: none !important;
      }


2. The content that needs to be printed sits inside one div, and the buttons that you don't want printed in another, like this:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<title>Printing</title>
</head>
<body>
<div id="content">Print Me</div>
<div id="footerbuttons">Don't Print Me</div>
</body>
</html>

Obviously this is quite basic, and not geared to your specific situation as I don't know how your page is set up. But it should give you enough to understand the printing principles when using CSS.
0
 

Author Comment

by:stretch73
Comment Utility
Thanks much G, it was a massive help.

N
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
Your welcome,
G :-)
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now