My client likes to print his webpages and write notes, he is old school.
This site: https://zumstream.com has a left-side vertical-menu which resides in the same folder as the index.html and is named “vertical-menu.html”
If you view the file on its own vertical-menu.html you are able to right-click/Print and see the Preview.
If you view the same file from the home page where it is a server-side-include, the menu which is visible is not WYSIWYG Printable, the stylesheet instructions disappear.
My question is: How can I make the page print friendly?
This has nothing to do with server side includes as the browser knows nothing about them. All the browser gets is the html that you see when you click view source from the browser controls. Whatever you do server side is immaterial to the browser as it only receives the raw html that was generated from whatever you did on the back end.
You need to create a print stylesheet and format the page in a way that is acceptable to printers. Things like floats and absolute positioning don’t really work on the printed page. For example I can see your side menu fine in Print Preview except that it is mixed in with your other content as the concept of floats don’t really apply to the printed page.
Bear in mind making a good print stylesheet (after the fact )could take as long as it did to build the site in the first place. (You can do a few easy tweaks such as hide the menus, remove floats and absolute positioning and allow content to flow without being restricted by size or height.) You also need to remember that users may have switched off colours and images in their setting so you can’t rely on backgrounds or images showing on a printed version.
If your client wants an exact replication of the monitor display then that’s not really possible. The client would be better of just taking a screenshot and printing the resulting image.
Hi, thanks for the Tip. Now that I have cleared all the Validator errors - is there a follow-up Suggestion? Same client has a larger site dveo.com which is much older and has no [print CSS], but prints fine, or no issues with printing.
In your new site you have a few print sheets already in place and indeed you have a massive print sheet ( <link href="[/css/print.css](https://zumstream.com/css/print.css)" media="print" rel="stylesheet">)that seems to be a copy of some other style sheet and just generally makes it almost impossible for me to offer a reasonable solution.
In one of your print stylesheets you print out all the href urls that go with your href links so for example your left menu will now contain every href in that section and will of course not fit into a little 270px box.
In fact printing out the urls that go with links is often a good thing but at the same time you would need to reformat the menu so that it is full width and not just a fixed height and width box.
The only quick fix I can offer is to remove the urls for now until you implement a proper stylesheet and tidy up all those print media.
Add this at the end of the last stylesheet.
@media print {
a[href]:after {
content: "" !important ;
}
.text_column_right2 {
height: auto !important;
width: auto !important;
float: none !important;
clear: both !important;
}
}
Note that issues are compounded because you have used inline styles in some cases that can only be over-ridden by !important and just adds more complications into the issue. Not to mention that stylesheets are spread throughout the body rather than in the head.
I think you need to find out what your client wants printed when he clicks print as usually you would not print out menus and banners and things that are not pertinent to the content on that page. There’s no point in having a menu printed out in normal use. Usually you would print out the content of the page but of course I may be mis-understanding why the client wants a print out.
Sorry I can’t offer an easy fix but if you want help with a proper print stylesheet then we can work our way slowly through it but it will take some time to arrive at a satisfactory outcome with all that is going on in that page.
