I have a print page here:
http://www.souq4cars.com/ppreview.php?id=611111161&u=10064&t=users_cars
How do i hide the links at the bottom saying 'Close Window' and 'Print Page' from being printed on the printed page?
You could use the CSS #media rule for this. To start, add a class noprint to the both elements:
<a class="noprint">foo</a>
and then add a #media print rule to your CSS which hides the elements during print:
#media print {
.noprint {
display: none;
}
}
#media print
{
div.for_hide {
display: none;
}
}
or you can include some css with this by including
<link rel="stylesheet" type="text/css" media="print" href="/css/print_version.css">
in your html code.
You have to make a new style sheet which uses different css.
<link href="style-print.css" rel="stylesheet" media="print" type="text/css">
Name divs, where you have text, that you don't want to print:
<div style="float: right;" id="print">
<strong>Print Page</strong>
</div>
In style-print.css set this divs to hidden.
#print {
display: none;
}
You should use a print stylesheet and hide the relevant elements there by setting display: none.
You can include a print sheet by adding the following between the head tags:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
Normally you would set the media attribute to screen or something similar.
Related
Hi all I'm facing a problem with printing pages.I want to have same header on all the pages im printing.I read several answers from stack seems no straigt forward answer.
thanks in advance.
Add a stylesheet for the printing of the page.
<link type="text/css" href="print.css" rel="stylesheet" media="print">
Then create a div with your hidden print-only header.
<div class="printOnly">Header</div>
Hide the printOnly div in your regular CSS file.
.printOnly { display: none; }
In your print.css, do whatever you need to do to your div. This is also where you would hide otherwise visible properties.
.printOnly { /* Style */ }
This is how I managed print styles.
So, if you have a div called normalHeader that you want gone when you print, simply set the style to display: none; on the print.css file.
I want to print a html page in a specific way under css. But all the #media print examples seem to have an external .css file I want to be able to do it without an external file which means there will be no link rel tag:
<LINK REL="stylesheet" MEDIA="print...
How do I do this?
I would suggest using an external stylesheet but you can how ever do this on the same page as your HTML if you really want to, an example of this would be like so,
HTML / CSS
<!DOCTYPE html>
<html>
<head>
<style>
#media print {
/* changes the display property to none on all
p elements when printed */
p { display: none}
}
</style>
</head>
<body>
<p>I'm here when the page isn't printed</p>
</body>
</html>
Use the #media print query in a CSS style block:
<style>
#media print {
/* print css here */
}
</style>
Make sure your closing style tag () has a space between the end of the #media print query and the closing tag. Like so:
#media print {
stuff {more stuff;}
} </style>
Right curly bracket, space, then closing tag.
There are two columns (left and right) with float positioning: http://jsfiddle.net/GBa4r/
<style>
.container {width:200px;}
.right {float: right; width: 30%;}
.left {float: left; width: 70%;}
</style>
<div class="container">
<div class="right">2</div>
<div class="left">1</div>
</div>
For print styles I need to change column places like in this example http://jsfiddle.net/GBa4r/1/ (".left" column above ".right")
What css code I should use in
<link href="/css/print.css" media="print" type="text/css" rel="stylesheet" />
to do it without change html code?
Use CSS #media queries
#media print {
/*Styles goes here*/
}
Or use a print specific stylesheet using media="print"
<link type="text/css" rel="stylesheet" media="print" href="print_specific_sheet.css" />
Use a specific print stylesheet. You can do it with the media attribute on the link element:
<link rel="stylesheet" media="print" href="print.css">
Or you could do so from inside of the CSS file:
#media print {
/* print specific styles */
}
A print stylesheet works in much the same way as a regular stylesheet, except it only gets called up when the page is printed. To make it work, the following needs to be inserted into the top of every web page:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
The file, print.css is the print stylesheet, and the media="print" command means that this CSS file only gets called up when web pages are printed.
Use the following CSS.
.container {width:200px;}
.right {background-color: #eaeaea; width: 30%;position: absolute;
top: 18px;}
.left {background-color: #ccc; width: 70%; position: absolute;
top: 0%;}
Check out the following fiddle:
http://jsfiddle.net/siyakunde/GBa4r/5/
Add to parent container:
display: -webkit-box; -webkit-box-direction: reverse;
remove from children:
.right {float: right;}
.left {float: left;}
This was horizontal change.
If positioning is to be changed vertically as in,
http://jsfiddle.net/siyakunde/GBa4r/6/
then, add
-webkit-box-orient:vertical;
to parent.
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>
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/
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.
I have a different CSS that's applied when someone is printing (below is an example of how I'm doing it). But I'm wondering, I'd like to make a custom "Preview Print" (instead of the regular one in the browser) but I'm wondering if it's possible to somehow get it so that the print media css will be applied, because I'd like to show a preview on the screen of what they'll be printing on paper. Any ideas?
<html>
<body>
<style type="text/css">
body
{
font-size: 62.5%;
background-color:black;
}
h1
{
color: red;
}
#media print
{
body{
background-color:yellow;
}
h1 {
color: black;
}
}
</style>
<h1>This is just a test</h1>
</body>
</html>
The easiest way would be to create a print.css style sheet that's normally included with print media specified.
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
Then on your print preview screen, you could use the same print.css with screen media set:
<link rel="stylesheet" type="text/css" media="screen" href="print.css" />
I usually open a new window, write in my own generic html/body wrapper that uses the print stylesheet as the main stylesheet, the use JavaScript to copy the body from the opener to the window.