I'm trying to implement a user-friendly printer option. I looked it up on the Webflow forum and then on stack overflow.

That would be cool. You should come up with an easier way to set up the printer, because sometimes it is impossible to do this.

You're doing a good job, it's really cool, thank you for sharing your idea with us. It all looks very complicated, if I had to deal with it myself, I wouldn't be able to. When I have a difficult situation with the printer, I immediately call the support service and annoy everyone there. When I buy a printer, I take one that does everything on its own, and I don't have to worry about it too much. I recently looked at a review TOP 10 new photo printers in 2020 and found that they are all very easy to use, and that you can do everything with voice activation. I think it's very cool, and thought about a new photo printer in my photoshop.

I have a very bad relationship with the printer, too. Thank you for sharing your situation.

You can use CSS @media types.

<p> this should be part of the printed page </p>

<div id="navigation_bar_that_should_not_be printed" class="noprint">.....</div>
A simplistic style sheet for the above would be:

@media screen
{
/* whatever styles you have for display */
}

@media print
{
.noprint { display: none; }
}
In the above, the <div> with the class="noprint" will be displayed on screen as usual, but it will not be printed.

Update:

The "C" in CSS stands for "cascading" - meaning the "last" or closest instruction wins. I can only assume that the <span class="bodycontent"... (being the last or closest) is overriding the div.

ASP.Net Controls have a CssClass property, that's how you'd define it:


You can even directly type class="noprint" (instead of using CssClass) in any ASP.Net tag - VS may complain but it should be ok:

<asp:HyperLink NavigateUrl="google" runat="server" class="noprint" Text="foo" />