-
CSS - media="print"
ok. I need to have a page with text and an image on it. I then need to that when the page is printed, only the image is printed. I could use popups and nasty JavaScript, but I learned about media="print" not long ago and thought it would be ideal for the purpose.
I've almost managed the code myself, here's what I have:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Print image only</title>
<style type="text/css" media="print">
body * {
visibility: hidden;
}
#map {
visibility: visible;
}
</style>
<style type="text/css" media="screen">
/*
Normal CSS here
*/
</style>
</head>
<body>
<p>
This is a long paragraph of text. This shows perfectly well on the page, but when you print this then it'll be hidden.<br />
This is more text which will also be hidden.<br />
<img src="map.jpg" alt="Map" id="map" /><br />
</p>
</body>
</html>
Now. I know that I should be using display, not visiblity. But I can't get it working when I do. I suppose my question is; how do I get this working with display instead of visiblity?
-
The problem with display is that child elements of hidden elements can't be re-shown.
So, you would have to put all text into their own elements.
Code:
<p class="noprint">This is some descriptive text that should not show up in printing.</p>
<p><img src="theimage" alt="An Image"/></p>
Code:
.noprint {
display: none;
}
-
is it not possible to use some sort of negation? eg, hide all elements except ones with id="map"
-
-
ok. thanks. I guess this is as resolved as it'll ever be.
