Advanced Search

Define a printable area for a web page

/ Published in: CSS
Save to your folder(s)
defining a printable area from a html web page. Making only one place printable

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <html>
  2.     <head>
  3.         <style type="text/css">
  4.         @media print {
  5.             body * {
  6.                 visibility:hidden;
  7.             } 
  8.             #printable, #printable * {
  9.                 visibility:visible;
  10.             }
  11.             #printable { /* aligning the printable area */
  12.                 position:absolute;
  13.                 left:40;
  14.                 top:40;
  15.             }
  16.         }
  17.         </style>
  18.     </head>
  19.     <body>
  20.         <div id="printable">
  21.             printable area
  22.             <br>
  23.             printable area
  24.             <br>
  25.             printable area
  26.         </div>
  27.         <div>
  28.             Curabitur tempus hendrerit semper. Nulla vel felis est. Cras nec mattis mauris. 
  29.             Vestibulum volutpat urna viverra mi viverra non ultrices leo semper. 
  30.             Maecenas scelerisque, augue quis scelerisque aliquam, magna velit scelerisque urna, 
  31.             in aliquet lectus dolor vitae urna. Nullam faucibus mattis hendrerit. 
  32.             Nam tortor elit, vulputate quis viverra vitae, dapibus id magna. 
  33.             Ut ultricies rhoncus erat, id pharetra dui tincidunt at. 
  34.             In lorem lorem, suscipit nec elementum vitae, venenatis id ligula. 
  35.             Suspendisse et erat id neque facilisis ultricies ac in neque. 
  36.             Vestibulum suscipit risus sed erat varius molestie.
  37.         </div>
  38.     </body>
  39. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.