<div>
You need to tell your client that doing so is not user friendly. Web browsers disable the printing of backgrounds by default to save ink.<br />
<br />
I also recommend hiding the main navigation, footer navigation, and the search form.
</div>


<div>
Hi, I do have this: <a href="http://www.magickitchen.com/menu/side_dishes.html" rel="ugc">http://www.magickitchen.com/menu/side_dishes.html</a>&nbsp; Which I see isn't as good as it was a week ago, I need to look into the css again.... anyway, the client is not the type of person who backs down, so I need to know how to do this.<br />
<br />
Thanks!
</div>


<div>
If you look here: <a href="http://test.magickitchen.com/menu/side_dishes.html" rel="ugc">http://test.magickitchen.com/menu/side_dishes.html</a>, same user name and password, it is the old site. That was tables, and printed the way he wanted it to.
</div>


<div>
Hi,<br />
<br />
I agree with Kravimir about not printing navigation links.<br />
<br />
Also remove keywords, comments, cgi code from printing, you should keep only important information.<br />
For quick way to do it on blocks without touching the css, is to use the Bootstrap print class<br />
<a href="http://getbootstrap.com/css/#responsive-utilities-print" rel="ugc">http://getbootstrap.com/css/#responsive-utilities-print</a><br />
<br />
Your page is not loading, i cannot check it ...<br />
<a href="http://dev2.magickitchen.com/menu/main_courses.html" rel="ugc">http://dev2.magickitchen.com/menu/main_courses.html</a>
</div>


<div>
Hi, the page is loading for me. I agree with you as well, but we need to listen to the client in this case. He will not, I repeat, will not agree with us. He wants, as he put it, wysiwyg printing. I'll try that print classs, thanks!
</div>


<div>
Did you use the user name/password for that page? Thanks.
</div>


<div>
Now it is ok.<br />
<br />
You won't be able to print exactly the same way it is appearing on the webs page.<br />
<br />
There are <b>printing limitation </b>browser, users settings, printer settings <b>you have no control on this</b>.<br />
You should just say that to the client, and you should ask him what are the important information <br />
that need to be print. <br />
What you should try to explain to him is The most important is that the informations are print, not necessarily the way it is print.<br />
This will be close to the website look and feel but not the exact copy.<br />
<br />
Which part do you want to fix exactly?
</div>


<div>
I understand that, and so does he. He has his set to print background colors. If he can print it the way he wants, that will be good enough.<br />
<br />
I'm sorry to seem stubborn, but this person wants what he wants. I have to be stubborn on his behalf. :) &nbsp;<br />
<br />
I almost had it on <a href="http://dev2.magickitchen.com/menu/main_courses.html" rel="ugc">http://dev2.magickitchen.com/menu/main_courses.html</a>, but now I see we overwrote my print.css. <br />
<br />
I have reinstated my print css, can you please have a look at it now? Sorry about that, we're replacing the &lt;head&gt; information with an external file, and that was missed.
</div>


<div>
Let me put it this way... experts on here said, &quot;tell the client you can't do a site with two side navigations and a header, it's just not done&quot;. <br />
<br />
I persevered, and now we have what he asked for. So he is not going to believe we can't do this. He doesn't want to know the proper way, he wants to know that we can do it his way. And he is the client, after all. :) &nbsp;<br />
<br />
I hope you can help.
</div>


<div>
<blockquote>
Let me put it this way... experts on here said, &quot;tell the client you can't do a site with two side navigations and a header, it's just not done&quot;. 
</blockquote>
Firstly, there is a difference between can and should. If I read between the lines the recommendation you refer to was about what should be done - whereas what is being discussed here is what can be done.<br />
<br />
To best answer this you need to establish what is the main objective you would like to fulfill for a print out - is it to get an exact copy of the page or to provide the user with a list of the items on that page. <br />
<br />
If an exact copy of the page then the question is - what purpose does printing out the navigation have?.<br />
<br />
If you really want a WYSIWYG experience then I would look at printing to PDF and providing a PDF download button - that way you can have complete control over the page layout and still make it dynamic. As this is not likely going to be a popular option given the effort involved - the next step is to hide the navigation sidebars and focus only on the main content.<br />
<br />
Before taking this further - is the above suggestion an option or not?
</div>


<div>
Hi- I asked the same question of the owner. He says that the experience he sees the customer having is this- a son or daughter of a senior tells them about our service. But the parent doesn't have a computer, so they print out the page for them. Seeing the navigation shows them there are extra options for meals. So, they print out the main courses page, but can see that there are options for diabetic meals and dialysis meals as well.<br />
<br />
I did think of a pdf button, and I think it would end up being easier, but that was vetoed, because to him, the customer just wants to hit the print button on the toolbar, or hit CTRL P. <br />
<br />
That's the reason behind it. &nbsp; I do feel that I'm very close here: <a href="http://dev2.magickitchen.com/menu/main_courses.html" rel="ugc">http://dev2.magickitchen.com/menu/main_courses.html</a>&nbsp; user name: pepe and pw: BobTheBuilder45!!<br />
<br />
I hope I can talk him into only the left navigation, since the right doesn't add any value according to his explanation above. &nbsp;Thanks.
</div>


<div>
Hi,<br />
<br />
With the result you have, I would try to add some padding under each product div and add page break &nbsp;after each product div , or prevent page break in a product div.<br />
<br />
Another solution will be to create a PHP page for the printing only, you may have more control using this option.<br />
<br />
Print css are difficult to debug because we cannot inspect the code so it's need a lot of test and preview, till you have the result you want and when you will get it, chance are that you will not have the same result on each browser and OS.
</div>


<div>
Thank you. I was wondering this weekend if I could do something like this. I appreciate the information, I'll work with it and then ask more specific questions if I run into trouble.
</div>


<div>
<div class="content wysiwyg-content">
Hi, Please go here: <a href="http://dev2.magickitchen.com/menu/main_courses.html" rel="ugc">http://dev2.magickitchen.com/menu/main_courses.html</a>&nbsp; User name: pepe, pw: BobTheBuilder45!! and look at print preview, or print, depending on your browser.<br />
<br />
I am getting close. The owner wants it to look exactly like the page when printed, see attached screenshot. I've also attached my print css, maybe that will help.<br />
<br />
Thanks in advance, this is a hard one for me.<br />
<a href="https://filedb.experts-exchange.com/incoming/2016/01_w02/1066582/wysiwg2.jpg" target="_blank" class="file-inline" title="How the owner wants to see it. (136 KB)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M67.508 468.467c-58.005-58.013-58.016-151.92 0-209.943l225.011-225.04c44.643-44.645 117.279-44.645 161.92 0 44.743 44.749 44.753 117.186 0 161.944l-189.465 189.49c-31.41 31.413-82.518 31.412-113.926.001-31.479-31.482-31.49-82.453 0-113.944L311.51 110.491c4.687-4.687 12.286-4.687 16.972 0l16.967 16.971c4.685 4.686 4.685 12.283 0 16.969L184.983 304.917c-12.724 12.724-12.73 33.328 0 46.058 12.696 12.697 33.356 12.699 46.054-.001l189.465-189.489c25.987-25.989 25.994-68.06.001-94.056-25.931-25.934-68.119-25.932-94.049 0l-225.01 225.039c-39.249 39.252-39.258 102.795-.001 142.057 39.285 39.29 102.885 39.287 142.162-.028A739446.174 739446.174 0 0 1 439.497 238.49c4.686-4.687 12.282-4.684 16.969.004l16.967 16.971c4.685 4.686 4.689 12.279.004 16.965a755654.128 755654.128 0 0 0-195.881 195.996c-58.034 58.092-152.004 58.093-210.048.041z"/></svg>wysiwg2.jpg</a><br />
<a href="https://filedb.experts-exchange.com/incoming/2016/01_w02/1066583/bootstrap-print.css" target="_blank" class="file-inline" title="css (11 KB)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M67.508 468.467c-58.005-58.013-58.016-151.92 0-209.943l225.011-225.04c44.643-44.645 117.279-44.645 161.92 0 44.743 44.749 44.753 117.186 0 161.944l-189.465 189.49c-31.41 31.413-82.518 31.412-113.926.001-31.479-31.482-31.49-82.453 0-113.944L311.51 110.491c4.687-4.687 12.286-4.687 16.972 0l16.967 16.971c4.685 4.686 4.685 12.283 0 16.969L184.983 304.917c-12.724 12.724-12.73 33.328 0 46.058 12.696 12.697 33.356 12.699 46.054-.001l189.465-189.489c25.987-25.989 25.994-68.06.001-94.056-25.931-25.934-68.119-25.932-94.049 0l-225.01 225.039c-39.249 39.252-39.258 102.795-.001 142.057 39.285 39.29 102.885 39.287 142.162-.028A739446.174 739446.174 0 0 1 439.497 238.49c4.686-4.687 12.282-4.684 16.969.004l16.967 16.971c4.685 4.686 4.689 12.279.004 16.965a755654.128 755654.128 0 0 0-195.881 195.996c-58.034 58.092-152.004 58.093-210.048.041z"/></svg>bootstrap-print.css</a>
</div>
</div>


bootstrap-print.css

wysiwg2.jpg

Hi, Please go here: http://dev2.magickitchen.com/menu/main_courses.html  User name: pepe, pw: BobTheBuilder45!! and look at print preview, or print, depending on your browser.

I am getting close. The owner wants it to look exactly like the page when printed, see attached screenshot. I've also attached my print css, maybe that will help.

Thanks in advance, this is a hard one for me.

Using @media print

Web development includes all aspects of presenting content on intranets and the Internet, including delivery development, protocols, languages and standards, server software, browser clients, databases and multimedia generation.

Web Development

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

Web development can range from developing the simplest static single page of plain text to the most complex web-based internet applications, electronic businesses, and social network services using a wide variety of languages and standards, including the familiar HTML, JavaScript and jQuery, ASP and ASP.NET, PHP, ColdFusion, CSS, PHP, Flex and Flash, but also the implementation of a broad list of standards including XML, WSDL, SSDL, VoiceXML and many more.

Web Languages and Standards

HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.

HTML

A printer is a peripheral which makes a persistent human readable representation of graphics or text on paper or similar physical media. Traditional printers are being used more for special purposes, like printing photographs or artwork, and are no longer a must-have peripheral; 3D printing has become an area of intense interest, allowing the creation of physical objects. An image scanner is a device that optically scans images, printed text, handwriting, or an object, and converts it to a digital image. Hand-held scanners, where the device is moved by hand, have evolved from text scanning "wands" to 3D scanners used for industrial design, reverse engineering, test and measurement, orthotics, gaming and other applications.