[Site map] You are here --- > Newbies Paradise > Tutorials > Unofficial > Website > XHTML / CSS > Reading a tutorial

Print only a web page's content

	Author : Leo Creation : : on 04/17/2008 05:09:32 PM Last modification: : on 04/17/2008 08:12:53 PM Rate and comment this tutorial Print this tutorial

You are about to read a tutorial written by a member of this website. Although the author probably invested every effort to make this tutorial's content correct, we can not guarantee that the information on this page is 100% exact. Please keep this in mind when reading this tutorial. ;o)

Hi everyone ! My name is Leo. This course was originally published on the French version of this website, "Le Site du Zéro". It was written by JoJoNeil. I got his authorization to translate it. If there's any mistake, you can send me a PM

Thanks to this course, you'll be able to print only a page's content. It's quite useful to save the surfers' ink cartdriges :ninja:

Chapter Contents :

Introduction
The style sheet
The web page's code

Introduction

To be in harmony with Newbies Paradise, we're going to use M@teo21's example

Code: HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD xHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
   <head>
       <title>My great website</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>

   <body>
       
       <div id="header"> <!-- Header -->
       </div>
       
       <div id="menu"> <!-- Menus -->
       </div>     

       <div id="body"> <!-- Body -->
       </div>

       <div id="footer"> <!-- Footer -->
       </div>

   </body>
</html>

So, we want to print what is between <div id="body"> and </div>

The style sheet

To do it properly, we're going to need a style sheet. We're going to call it print.css

Don't give another name to the style sheet, either the CSS won't be taken into account, as we are going to put this line in the XHTML page :

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

First : put a white background, and the text color : black. You can also give the text size for the whole page.

Code: CSS

body
{
     background-color:#FFFFFF;
     color:#000000;
     font-size:12pt;
}

Then, there is to hide the elements you don't want (such as the header, the menu and the footer). We're going to use the display property with the none value.

Code: CSS

#header
{
     display:none;
}

#menu
{
     display:none;
}

#footer
{
     display:none;
}

Then, the color of the body's background must be white.

Code: CSS

#body
{
     background-color:#FFFFFF;
}

Tip : Copy the properties for the body tag to have the same displaying. The white background is useful for the ink cartdridges

Here is the whole print.css file :

Code: CSS

body
{
     background-color:#FFFFFF;
     color:#000000;
     font-size:12pt;
}

//  Beginning of the part NOT TO print

#header
{
     display:none;
}

#menu
{
     display:none;
}

#footer
{
     display:none;
}

// End of the part NOT TO print

// Beginning of the part to print

#body
{
     background-color:#FFFFFF;
}
// End of the part to print

The web page's code

Here is the main line to write to be able to print the content.

Code: HTML

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

Here is a JavaScript link to print :

Code: HTML

1	<a href="#" onclick="javascript:window.print()">Print this page</a>

The whole code of the page :

Code: HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   
<head>
<title>Print only the content</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css.css" title="main CSS file with header, menu and footer" /><!-- Basic CSS -->
<link rel="stylesheet" type="text/css" media="print" href="print.css" /><!-- CSS  file used to print -->
</head>

<body>
<div id="header"><!-- the header --></div>
<div id="menu"><!-- the menu --></div>

<div id="body">

<p>

<a href="#" onclick="javascript:window.print()">Print this page</a><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.

</p>

</div>

<div id="footer"><!--  The footer --></div>
</body>
</html>

Now you know how to do it for your website;)
This course is over. It's my first one, and I hope you've understood everything !

Author : Leo
Rate and comment this tutorial
Print this tutorial

How-to

Community

User Menu

Search

Guestbook

Advertising

Print only a web page's content

Introduction

The style sheet

The web page's code