Freecsstemplates And Printable Area

[darossa]

Hi folks! A dude in another topic introduced me to the Free CSS Templates and I particularly liked reckoning. I'd like to take it as base template for my simple site, although I'll modify to give a little originality :)The problem is: it's a school/study site, in which I include the classes we already had and share with my friends. Since the base content is text, they like printing a lot, but that layout harms the printing. The relevant part, which they and myself would like to see in a paper is the one delimited by the

<div id="content">

section.Is there a way to prevent other sections, such as the logo and sidebar to appear in the printing?Thanks!

[Synook]

Use a separate style with the @media print { } block to hide irrelevant content.

@media print {	div#not-content {		display:none;	}}

[darossa]

Ok but how/what exactly should I put inside the @media_print? for example, in the template style.css filem we see the reference to the menu:

/* Menu */#menu {	float: left;	height: 44px;}#menu ul {	margin: 0;	padding: 5px;	list-style: none;	line-height: normal;}#menu li {	height: 44px;	display: block;	float: left;	padding: 12px 25px 0px 25px;	background: url(images/img04.jpg) no-repeat right 8px;}#menu a {	display: block;	float: left;	text-decoration: none;	font: 12px Arial, Helvetica, sans-serif;	color: #FFFFFF;}#menu a:hover { text-decoration: underline; }#menu .current_page_item {	margin: 0px;	color: #FFFFFF;}

And the sidebar:

/* Sidebar */#sidebar {	float: left;	width: 250px;	}#sidebar ul {	margin: 0px;	padding: 0;	list-style: none;	line-height: normal;}#sidebar li {	margin-bottom: 30px;	padding: 0 0 5px 0px;	background: url(images/img07.jpg) repeat-x left top;}#sidebar li ul {	line-height: 150%;	background: none;}#sidebar li li {	margin: 0;	padding: 3px 20px;	background: none;}#sidebar p {	margin: 0;	padding: 0 15px;}#sidebar h2 {	height: 33px;	margin: 0 0 20px 0px;	padding: 15px 0px 0px 20px;	background: url(images/img06.jpg) repeat-x left top;	text-transform: uppercase;	font-family: Arial, Helvetica, sans-serif;	font-size: 13px;	font-weight: bold;	color: #FFFFFF;}#sidebar p {	line-height: 200%;	padding-bottom: 20px;}#sidebar a {}

which are two of the things I'd like to get rid off in the printed page. So what do I do, how I make the integration of these two styles, the old (the regular style.css) and the one containing the @media_print {} ?