Print Style Sheet
CSS print style sheet for example
- Attach a print style sheet to the web page
- Set the CSS
displayproperty to the value "none" to hide the menu in the print view - Set content width to 100%
CSS Code
...
div.title {
width: 75%;
margin: 0;
padding: 0;
border-bottom-width: .125em;
border-bottom-style: solid;
border-bottom-color: #CC3300;
}
div.menu {
display: none;
}
div.content {
width: 100%;
margin: 0;
padding: 0;
padding-right: 2%;
padding-left: 2%;
}
div.image {
display: none;
}
div.contact {
width: 100%;
text-align: center;
}
...
div.title {
width: 75%;
margin: 0;
padding: 0;
border-bottom-width: .125em;
border-bottom-style: solid;
border-bottom-color: #CC3300;
}
div.menu {
display: none;
}
div.content {
width: 100%;
margin: 0;
padding: 0;
padding-right: 2%;
padding-left: 2%;
}
div.image {
display: none;
}
div.contact {
width: 100%;
text-align: center;
}
...
HTML Code
...
<head>
...
<link rel="style sheet" title="Fixed Menu" href="stylesheets/css-layout-1.css" type="text/css" media="screen"/>
<link rel="alternative style sheet" title="Left Menu" href="../example2/stylesheets/css-layout.css" type="text/css" media="screen"/>
<link rel="style sheet" href="stylesheets/print.css" title="Print style sheet" media="print">
...
</head>
...
<head>
...
<link rel="style sheet" title="Fixed Menu" href="stylesheets/css-layout-1.css" type="text/css" media="screen"/>
<link rel="alternative style sheet" title="Left Menu" href="../example2/stylesheets/css-layout.css" type="text/css" media="screen"/>
<link rel="style sheet" href="stylesheets/print.css" title="Print style sheet" media="print">
...
</head>
...