1 reply [Last post]
Last seen: 16 years 38 weeks ago
Joined: 2004-03-09
Posts: 3
Points: 0

i was wondering if its possible to hide certain divs from a printed style sheet.

e.g. xhtml code says

<div id="header"> blah </div>
<div id="nav"> navigation </div>
<div id="menu"> menu list </div>
<div id="content"> content </div>
<div id="footer"> footer </div>

i want to hide the header and the nav bar

do i just use the following in the style sheet?

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

i have tried this in the print style sheet and it didnt work. the picture from the header didnt show up but the content of the header, the nav and the menu did.

is there anyway that i can hide the content of the nav and menu using style sheets or am i stuck with them on the page?

i think im being dumb and may have just worked out how dumb i am but i shall post this anyway.

co2's picture
Last seen: 12 years 32 weeks ago
Joined: 2003-09-17
Posts: 721
Points: 0

print style sheets

The typical solution is to have a CSS file for print and one for screen (or for everything else except print).

Thus, you'd have two link tags in your html:

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

Whatever you want to amend on the printed page (or hide/show) gets inputted into the print CSS file.

Therefore, whilst your div would not be hidden in the screen.css file, you would hide the same rule in the print.css file (which will have no effect on the screen/browser).

The next sentence is true. The previous sentence is false. Discuss...