Print Style Sheet
CSS print stylesheet 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="stylesheet" title="Fixed Menu" href="stylesheets/css-layout-1.css" type="text/css" media="screen"/>
<link rel="alternative stylesheet" title="Left Menu" href="../example2/stylesheets/css-layout.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="stylesheets/print.css" title="Print stylesheet" media="print">
...
</head>
...
<head>
...
<link rel="stylesheet" title="Fixed Menu" href="stylesheets/css-layout-1.css" type="text/css" media="screen"/>
<link rel="alternative stylesheet" title="Left Menu" href="../example2/stylesheets/css-layout.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="stylesheets/print.css" title="Print stylesheet" media="print">
...
</head>
...