0

I am planning to print my page..... I dont want the top portion to get displayed..... how to remove the top portion while printing it in a paper........ providing my fiddle below

http://jsfiddle.net/2dMuB/embedded/result/

<div class="mainDiv" style="border-bottom: 1px solid grey; height: 80px;"> <div class="subDiv" style="font-size: 24px; color: grey; padding-left: 35px;"> Company LOGO </div> <div class="subDiv" style="padding-left: 50px;"> <p><span style="font-weight: bold; font-family: arial; color: #333;">welcome xyz!</span> [email protected]</p> </div> <div class="subDivMenu" style="width: 911px; margin-top: 0px; padding-left: 17px; "> <div class="inline" style="padding-top: 12px; "> <ul class="homePageLists" style=""> <li style="padding-bottom: 5px; list-style: none; color: #333;"> <a style="color: #cc0000; font-family: arial; font-size: 14px; font-weight: bold;" href="http://www.w3schools.com/" target="_blank"> Menu </a> </li> <li style="padding-bottom: 5px; list-style: none; color: #; "> <a style="color: #666; font-weight: bold;" href="http://www.w3schools.com/" target="_blank"> <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_search.png"> Search </a> </li> <li style="padding-bottom: 5px; list-style: none; color: #653921; "> <a style="color: #666; font-weight: bold;" href="http://www.w3schools.com/" target="_blank"> <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_inventory.png"> Create ID </a> </li> <li style="padding-bottom: 5px; list-style: none; color: #653921; "> <a style="color: #666; font-weight: bold;" href="http://www.w3schools.com/" target="_blank"> <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_inventory.png"> Product List </a> </li> <li style="padding-bottom: 5px; list-style: none; color: #9e1c20; "> <a style="color: #666; font-weight: bold;" href="http://www.w3schools.com/" target="_blank"> <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_inventory.png"> BOM List </a> </li> <li style="padding-bottom: 5px; list-style: none; color: #ff5100; "> <a style="color: #666; font-weight: bold;" href="http://www.w3schools.com/" target="_blank"> <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_inventory.png"> Customer List </a> </li> <li style="padding-bottom: 5px; list-style: none; color: #184179;"> <a style="color: #666; font-weight: bold;" href="http://www.w3schools.com/" target="_blank"> <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_vender.png"> Vendor List </a> </li> </ul> </div><!--/.nav-collapse --> </div> <div class="subDiv" style="float: right;"> <p style="font-weight: bold;">ABC Systems</p> <p>1234 lakeview Blvd, CA 94538</p> <p>510-657-8981</p> </div> </div

>

Improve this question
1
  • 1
    use an alternate print css page Commented Feb 15, 2013 at 18:59

2 Answers 2

Reset to default
1 
@media print { .mainDiv { display: none; } /* any other styles you wish to target go here */ }
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Add a print stylesheet to page, such as:

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

Then in that file, do a reset:

body {margin:0; padding:0; line-height: 1.4em; word-spacing:1px; letter-spacing:0.2px; font: 12px Arial, Helvetica,"Lucida Grande", serif; color: #000;}

Then set the elements you do not wish to show when you print:

.homepagelinks {display:none;}

Improve this answer

Comments