Here is a page I am trying to make print friendly, so it will list everything in two columns
view the page here
Here is the css for the div each block of information is in
#off-campus-print-friendly {
font-family:arial;
border:1px solid red;
overflow:auto;
font-size:.8em;
line-height:1.5em;
padding:10px;
}
#off-campus-print-friendly div {
width:45%;
float:left;
}
#off-campus-print-friendly p {
margin:5px 0;
}
When I go to print the page, it only prints it in one column, instead of how it looks on the page.
Any help is appreciated.
Change your link to the stylesheet to be screen and print
<link rel="stylesheet" type="text/css" media="screen, print" href="http://www.herkimer.edu/?css=styles/print.v.1245694939" charset="utf-8" />
Tested this by editing the source on your page (firebug), it works.
Best practice is that you should have a 2nd css file specifically for printing included on your original page. This eliminates the need for a second print friendly page:
<link rel="stylesheet" type="text/css" media="print" href="print.css" charset="utf-8" />
Also, if you'd rather have a single stylesheet cater to all mediums, you can use this:
<link rel="stylesheet" type="text/css" media="all" href="master.css" charset="utf-8" />
And you can also use blocks within your CSS files to segregate medium specific styles like this:
#media print {
p { font-size: 14pt; }
}
#media screen {
p { font-size: 12pt; }
}
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;
}
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.
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.