W3C home > Mailing lists > Public > www-style@w3.org > October 2005

Simple switch screen / print

From: Cristiano Guglielmetti <guglielmetti@tin.it>
Date: Fri, 14 Oct 2005 18:33:50 +0200
To: "ML W3C Style" <www-style@w3.org>
Message-ID: <000201c5d0dd$0f0d0af0$0201a8c0@ghost1>

Hi all,

to print and render in different ways the site logo on my personal web
site I added this little piece of CSS in the site main one.

@media print {
..sitelogo1 {
	text-align: left;
	background: white;
	color: black;
	font: 250% tahoma, verdana, arial, sans-serif
	}
..sitelogo2 {
	display: none
	}
	}

@media screen {
..sitelogo1 {
	display: none
	}
..sitelogo2 {
	display: inline
	}
	}

In the HTML:
<div id="header">
  <span class="sitelogo1">/guglielmetti/ web site ver.11</span><img
border="0"
src="../../guglielmetti/images/siteobjs/CG_WebSite_Logo16.gif"
width="384" height="150" alt="/guglielmetti/ Site Logo"
class="sitelogo2"></div>

The result on the screen is:
- rendering of the image "CG_WebSite_Logo16.gif"
- no rendering of the text "/guglielmetti/ web site ver.11"

The result on the printer is:
- printing the text "/guglielmetti/ web site ver.11"
- no printing of the image "CG_WebSite_Logo16.gif"

The result seems good but I have some doubts about older browser that
could render both at the same type (no @media support), do you see any
other problem with this solution?

To see all the CSS code go here:
http://xoomer.virgilio.it/guglielmetti/css/main

Thanks,
Cristiano
http://xoomer.virgilio.it/guglielmetti/

-- 
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.344 / Virus Database: 267.12.0/132 - Release Date:
13/10/2005
 
Received on Friday, 14 October 2005 18:18:17 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:41 GMT