CODEWITHSUNDEEP
html
Moaataz
Moaataz

Reputation: 1

printing by the css

When I use css for printing into a pdf for ex. content of my webpage it print more than I need like the header, footer, like of my webpage ,labels, the date ... etc which I don't want to print?!

Here is an example:

<html>   
  <body>   
    <img src="Snapshot_20120326.jpg"/>  
    <h1>Mezoo</h1>   
    <h2>The big member</h2>
    <button onclick="window.print();">print</button>
    <style media="print">
      h1 ,img  {  
        display: block;  
      }

      h2, button{    
        display: none;    
      }    
    </style>    
  </body>
</html>

Upvotes: 0

Views: 181

Answers (2)

ERose
ERose

Reputation: 189

It'd probably be best to set @media print styles in a separate CSS stylesheet ...

So for example, to hide the header:

@media print {
.header, .hide { visibility: hidden }
}

You can learn more about media styling here: http://www.w3.org/TR/css3-mediaqueries/

Upvotes: 2

Tom Kerr
Tom Kerr

Reputation: 10720

You can use the media tag on a link.

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

The print css could then turn off visibility on things you don't want to see.

Upvotes: 0

Related Questions