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.
Related
How can I override the CSS of body using below custom style if the page require linked with the
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<style>
body {
background-color: red;
}
</style>
I tried to save the custom style in custom.css and declare it like
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" href="custom.css" />
but it doesn't work.
Check to see if it's not loading a more specific rule like body.someclassname, or use the important rule: body{background:red !important;}
Hard to tell without seeing the rest of your page, but have you tried:
body {
background-color: red !important;
}
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.
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.
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.