Debt Consolidation - Debt Consolidation - Myspace Layouts - Gavin Newsom - Gavin Newsom

PDA

View Full Version : Creating a Printable Stylesheet


Funky Monk
Feb 8th 2005, 7:15 am
I've created a Stylesheet to create a 'Printer-Friendly' page, which strips out all unwanted IDs and DIVS from the print page. Everything is OK, except that it doesn't remove the DHTML navigation menu.

The print.css stylesheet is as follows:

#body{ background-color:#FFFFFF; background-image:none; color:#000000 }
#latestNews{ display:none;}
#header{ display:none;}
#header2{ display:none;}
#horizontal_rule{ display:none;}
#sidebar{ display:none;}
#sidebarRight{ display:none;}
#footer3{ display:none;}
#anchors{ display:none;}
#dhtml_menu{ display:none;}
#mainContent{ width:100%;}

The code on the page, with the 'offending' item as marked in red:

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

<!-- end of printable version stylesheet -->
</head>
<body onload="setStyle();" >
<!--- main DHTML navigation script starts -->
<script language="JavaScript" type='text/javascript'>
//HV Menu- by Ger Versluis (http://www.burmees.nl/)
//Submitted to Dynamic Drive (http://www.dynamicdrive.com)
//Visit http://www.dynamicdrive.com for this script and more

function Go(){return}

</script>
<div id="dhtml_menu"> <script language="JavaScript" type="text/javascript" src='hvmenu/exmplmenu_var.js'></script>
<script type='text/javascript' src='hvmenu/menu_com.js'></script>
<noscript>
Your browser is not compatible to view the Navigation Menu. We suggest you upgrade your browser or use the text links at the bottom of the page.
</noscript>
</div>
<!--- main DHTML navigation script ends -->

No matter what I do I cannot remove the DHTML menu from the print page. Later on in the page there is another DIV (<div id="footer3">) that I use #footer3{ display:none;} for and it removes fine.

Can anyone help me out with this. Thanks.

SEbasic
Feb 8th 2005, 7:19 am
You should use this...

@media print{
Place the styles you'd like printed in here...

Anything you don't want printed, use display:none for...
}

Funky Monk
Feb 8th 2005, 7:23 am
Do you mean put @media print{
etc....
}

in the external stylesheet or inline?

It's not that my stylesheet doesn't work. It does, but just 1 div is left in.

SEbasic
Feb 8th 2005, 7:33 am
Ah...

Sorrry - Ignore me if your method works ;)

Don't know how your method so can't help really...