Hiding navigation on web page when printing

When printing a web page, we want to maximise the content area for printing. To do this, I want to hide the navigation area when user is printing the page.

For example in a page, there are 3 area, header, left navigation and content.

<div id="header">header</div>
<div id="nav">Left navigation</div>
<div id="content">Content area</div>

When user click on print, only the content area is printed. This can be control using a seperate CSS to hide certain area when printing.
The sample is below.

Add the css link in the page. The media type = "print".

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

In print.css

#header{display:none}
#nav{display:none}

This would hide the header and the nav div tag when printing.

Portlet Factory 6.1.2

Portlet Factory 6.1.2 is out. You can get the 60 days trial version here.
It looks like 6.1.2 is a new version and not an upgrade or fixpack for PF 6.1.

Highlighted Selected Content in Menu - WebSphere Content Management System

In a WebSphere Portal page, I inserted a few Web Content Viewer portlets. The top portlets shows a menu list the content. The bottom portlet will display the selected content from the list. The issue I had was highlighting the selected content in the menu.

From the forum, there were some suggestions but it didn't work for my case.

I manage to solve it by using the Content ID. The idea is, when the content is loaded, it can find which link in the menu is selected by the Content ID. Thus you can add in code to change the attributes.

In the menu component, I add in a class which is the content ID into the links.

<A HREF="<Placeholder tag="href"/>" class="<Placeholder tag="Idnum"/>"><Element context="autoFill" type="content" key="headline"/></A>

Then in the presentation template I added dojo code to put in another class into the selected content.

<script>
dojo.addOnLoad(function(){
dojo.query(".<IDCmpnt context="current" type="content" field="id"/>")
      .addClass("selectedContent")
});
</script>
<style>
.selectedContent{color:black;font-weight:bold;}
</style>

Thus when the content is loaded, it will search the page for the class <Idnum> and add in the class selectedContent. For the Idnum here, I use a class instead of id because in certain pages, there are more than 1 links to the same content.