Question

In my portfolio site I have listed my projects under separate tabs (tab menu). This works well except for printing which requires the user to click on a tab, print, click on the next tab and print the same page again to get everything. Being a portfolio I’d assume that visitors want to print all of the content.

Is there a general way to create a different style when printing a web page? Or should I just add a printer icon on my page which redirects the user to a different page where all the data is in a big chunk and then prompt the user’s browser to start printing?

Answer 1

I normally use the print media tag to define a print style for my pages:

@media print
{
    #header, #nav
    {
        display: none; \\* to not print an element *\
    }
}

you can add this to your style sheets as shown above or you can add the media attribute to the link tag:

<link  href="print.css" type="text/css" rel="stylesheet" media="print"/>