Hi,

I am currently using ASP.NET MVC3 and wanted a way to style printing views of web pages, all I really needed was a way to remove:

• Headers
• Footers
• Navigation

The trick is to use the @media declaration in CSS to specify the styling for media type printing. All we do is set the headers, footers and Nav items to display none.

Below is sample CSS that I used to complete this based on http://www.w3.org/TR/CSS2/media.html

@media print{
    header,
    footer,
    nav
    {
        display: none;
    }
}

@media screen{
    header,
    footer,
    nav,
    section {
        display: block;
    }
}

@media screen{
    header
    {
        display: block;
        width: 100%;
        height: 50px;
        line-height: 50px;
        vertical-align: middle;
        background: #ddd;
        position: relative;
        overflow: hidden;
    }
}

• .Net Development