|
CSS - Internet Printing: Print Doubled-sided
How would one print an Internet document double sided?
For instance, to create a brochure of products, listings etc... with double-sided pages. Thanks, Zane Similar TutorialsHello, I'm design the web page printing feature, i apply a print button for trigger out the window.print() javascript command and it will set the button.style.display to none after button clicked. Whereas, It is happen when user using the CRTL-P and the button will continuous remain on printing paper . I wonder any optimize way to solve this problem? Can it be solve in CSS styling? Hi, I've got a webpage that I need to print almost exactly as it appears on the screen. Currently I've got two style sheets linked to, one for the 'screen' and one for 'print'. I know this is working because the top line of my print CSS is: @page {size: A4 landscape;} however I can't seem to alter any of the elements on the print CSS. If I adjust the width, height, even the color it always inherits the stuff from the screen CSS and uses that, ignoring the print CSS. In fact, I can't even define a margin for my page using @page {margin...}. The two style sheets look like this: for the screen: body {..... etc etc all works fine... for the print: @page {size: A4 landscape;margin:3cm;} body {.... etc ALMOST same as above the print CSS is essentially the same as the screen one, except that I want to define different widths and heights for table elements so I can fill an A4 page with a margin. The printing process ignores the widths and heights from the print CSS, and even ignores the margin definitions. It must be reading the print CSS because it knowns to print landscape. What am I doing wrong, or am I completely misusing the @page and media commands? Thanks in advance. Andy Im deriving a list of photos with information from my database. I want to be able to print the webpage off without any of the information being broken up between pages. Since its coming from the database I cant just use page breaks cause then I get one image per page. Is there a solution to this? We're having a weird problem with a print stylesheet - a little bit of the javascript menu appear on the printed over the top of the content. eg: (http://www.lawhandbook.sa.gov.au/ch10.php ) - Print Preview this page and you will see "Chapters A-Z" in the middle. This seems to happen in all browsers. We've looked into many css solutions to the issue - but to no avail - we cant make the damn thing disappear. One long winded solution is to change the stylesheet to be built dynamically - so a call to ch10.php=true would build the page differently. But this seems to defeat the purpose of using a print stylesheet in the first place. Another long winded soltuion is to change the (Rather old) menu script - but that not really an option in this case either. So my question is - What happens when a browser prints a page? Does it send anything back to the server indicating it is loading the print stylesheet instead? (eg: Some sort of request variable) Or does the client's browser simple request the CSS file and reformat the page it has already downloaded? If so I could detect this event with PHP or Javascript to not load the offending menus when the print css had been loaded My web page has a display bug in IE 5+ on Windows. Specifically, I have a DIV within which I wish to place two images. The two images are the same height and width, and I want to layer them (the top one is a PNG with transparency, but I have already solved that problem, this is a positioning problem) exactly on top of each other. I have done this by positioning them relatively within the DIV. The first image is top:0;left:0 and the second is top:-150;left:0 (the images are 150 px tall). They layer fine, but the DIV is twice the height (as if the second image were still following the first, making he DIV 300 px tall). I have tried many things and am stumped. Here is the site: URL Here is the relevant CSS: Code: #bannerPhoto {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000000;
height: 150px;
width: 750px;
}
#bannerPic {
position: relative;
z-index: 1;
left: 0px;
top: 0px;
}
#bannerText {
position: relative;
z-index: 2;
left: 0px;
top: -150px;
}
And the HTML: Code: <div id="bannerPhoto"> <div id="bannerPic"><img src="../images/bannerPhotos/image.jpg" height="150" width="750" /></div> <div id="bannerText"><img src="../images/text-cover.png" height="150" width="750" /></div> </div> Anyone? Thanks, Denver. I have pages the when viewed for print in Firefox, show the page going below the page margin and not continuing to the next logical printed page. This image below, shows better than I can explain. Has anyone ever seen this before?...Any ideas how to make it preview and print correctly? Hi guys .... I've been all over google looking for the answer and nothing I've tried works. I'm trying to make a print-friendly css page but my browsers (FF and IE7) both ignore the CSS and apply their own standards to it no matter what I do, it's driving me positively INSANE because it feels like I've done everything according to the instructions I found online for print CSS. Could you please take a look at my code and make some suggestions? You'd be saving my sanity. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)"> <html xmlns="(URL address blocked: See forum rules)" lang="en" xml:lang="en"> <head> <title>CLOColors3</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="mainstyle.css" type="text/css" /> <link rel="stylesheet" href="mainstyleprint.css" media="print" type="text/css" /> the print css: Code:
@media print {
html{
height:auto;}
body{
background-color:#FFF;}
#header{
display:none;}
#body{
position:relative;
background-color:#FFF;
background-image:none;
height:auto;
width:auto;
left:0px;
top:0px;
z-index:0;
padding-bottom:0px;}
#textbox{
position:relative;
overflow:visible;
float:none;
margin-left: 0px;
top: 0px;
width:auto;
bottom:0px;
background-color:#FFF;
border:hidden;
border-color:#FFF;
z-index:0;
padding:0px;}
#textbox img{
display:none;}
.searchbar{
display:none;}
#linkbar{
display:none;}
.map{
display:none;}
.video{
display:none;}
#linktext{
display:none;}
#clear_both{
display:none;}
#menu{
display:none;}
#footer{
display:none;}
}
Currently the main CSS is being used and none of the elements I set to be "hidden" are hidden. Help!!! UPDATE: Ok, so IE seems to be PARTIALLY responding to the print CSS. It responds to all the "display:none;" commands but refuses to format the #textbox div according to my instructions, a border persists and the div has an overflow scrollbar for some reason. Firefox is still unresponsive. Hello, I was wondering how to link to print a single ID without printing anything else... thanx=) I have a page that displays text of an article. It's all contained in a <DIV>, of course. I'd like the "Print" option the allow the user to print out just the article, and not the rest of the crap on the page (ads, navigation, so on.) I know vaguely that you can have alternate style sheets for printing and other types of display, but how to include just the text in the output? Hiya, This page http://www.magikwebs.co.uk/ranch/indian.html wasn't printing too good so I've set up a stylesheet for print only, and it has improved, but it still doesn't quite look right. It leaves a big gap on page 2 and misses a line out. It looks 100% fine in Firefox. I guess it's an IE bug. Anyone know what it is and how to avoid it? Thanks, John Hi ! I've read that it's possible with CSS to adapt the visual style of a web page on the output medium. If I didn't understand that completely wrong, it means that with CSS I can format a String like "Hello World" to give him font size 10 in my browser and font size 20 if i print the page. Is this correct ? Does someone of you habe any kind of coding example therefore ? That would be great TIA Gawan I have a form that users search for data. The query results are presented to them inside a table. Up until this point, there were only a handful of results in the DB and so printing was not a problem. However, now that the DB has grown, there's about a couple pages of data. When the user prints this table, only the first page gets printed. All subsequent pages are ignored. The markup looks something like below. I have 2 fieldsets - one for the form and the other for the results shown inside a table. Code: <fieldset>
<form name="searchForm".....>
<Insert form fields here>
</form>
</fieldset>
<fieldset>
<div id="searchResults">
<table>
<INSERT header row and data rows here>
</table>
</div>
</fieldset>
I am not sure where to even begin looking for the problem. Is it an HTML issue or a CSS issue? Thanks! Hi, I am having problems with my code. I am trying to print a badge. So what i am doing is in one cell of the table. I have a image that i want to be centered in the cell and then i have text below the image that i want to be centered in reference to the image The image is not centered and then the text is also not centered can someone tell me what i am doing wrong Code:
table {
table-layout:fixed;
}
table.pagebreak
{
page-break-befo always;
}
table.nopagebreak
{
page-break-befo ;
}
td {
width:381.73px;
height:287.244px;
padding-left:24.56px;
border-left:white dashed 1px;
border-bottom:white dashed 1px;
border-collapse: collapse;
}
.imglineup
{
text-align:center;
width:300px;
display:block;
}
.textlineup
{
text-align:center;
display:block;
}
.nametd
{
width:381.73px;
text-align:center;
height:287.244px;
margin: 0px 50px 0px 50px;
}
the cell of the table is 381.73px wide and the image thats centered is 300px wide so here is my code Code: <tr > <td class="nametd" > <img src="/images/bdg.jpg" class="imglineup"><br/> <div class="textlineup"> <span style="font-size:40pt;">Joe </span><br/> <span style="font-size:40pt;">Smith</span><br/> <span style="font-size:20pt;">CEO</span><br/> <span style="font-size:21pt;">Quest Inc</span> </div> </td> thank you todd Hi folks. I've just encountered some problems printing pages in Internet Explorer SP2. The pages print fine in SP1, and virtually every other browser I've tried. An example page can be found he http://www.unbc.ca/hr/jobs/staff/0504cu.html The problem under SP2 is the menu is pushed over and overlaps the main page content. Can anyone tell me if this might be caused by a quick of SP2? The fact that it renders and prints correctly in EVERY other browser I've tried leads me to point the finger at SP2, but I can't say for sure. Can anyone offer any advice on this? Cheers and thanks in advance, Pablo Hello, I have an issue when printing a page in IE7. The page is located at http://www.northridgeltd.com/test_site/northridge_team.php when you print, the content from two employees bunches up at the bottom of the first page. Anyone have any ideas? Thanks Hi folks, I am working on online reporting system and was wondering if anyone could help me. The report searches through 25000 records to show a report of profit and costing etc, the problem I am having is when the client wants to print the report off they want a logo at the top of every page, the report is always different sizes depending on the search criteria they enter so Is there a way in php I can print the long report out with a header at the top of every printed page. I hope this makes sense and thanks to anyone whoe replies. LMD Ok, I've google a bit, and come up with http://home.tampabay.rn.com/bmerkey...scape-test.html, but it seems to fail if I try printing tables in Landscape. It's for an intranet ap, using IE6 predominantly but also needs to work in Moz. Does anyone know of a way to do this with tables? Hi I need to print a webpage, but I dont want it to print the date and url and title of the page on the top and bottom of the page. And also is there a way that you can print a page with buttons, without printing the buttons? Aaaah! another problem... now i have 2 divs, left one floated, and right one set that it's left margine distances him from left div. when i print that page from FF it's ok, but when i try to print it from IE it looks like left one isn't floating - divs are one beneath other (right one shifted to right for that margin value). what now? thanks |
|||||||