- From: Cristiano Guglielmetti <guglielmetti@tin.it>
- Date: Fri, 14 Oct 2005 18:33:50 +0200
- To: "ML W3C Style" <www-style@w3.org>
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 UTC