You seem to be on the right track, Oliver.
Matthew's response regarding targeting media types is also helpful. One of the
implementations I've used before is described below.
Note that:
- The print-only version of the logo is the near-last element in the page. I
assume that someone will read all (or most) of the document before printing,
giving the browser time to download the print-only [hidden] inline image.
- Both images are requested at page load, not at page print
- Background image printing is unlikely to be enabled by default on a user's
browser, hence the use of inline images
- When printing, the screen version of the logo is entirely hidden, and the
print logo is positioned absolutely on the top left of the page.
- ContentWrapper is given a top margin related to the height of the printable
logo (preventing nasty overlaps)
- Both images are downloaded in the same page request.
- I do not regard this as a duplication of content - a print-optimised version
of a logo may have very different requirements from a screen-optimised version
of a logo.
- Similar approaches should work for other @media types
- CSS-less browsers will expose both versions of the logo - one at the top of
the page, one at the bottom (not a deal breaker, IMO).
Markup:
======================
<html>
<head>
...
<link type="text/css" rel="stylesheet" media="print" href="print.css"/>
<link type="text/css" rel="stylesheet" media="screen" href="screen.css"/>
</head>
...
<img id="headerLogo" ... />
<div id="contentWrapper">
...
</div>
...
<img id="printLogo" height="80px" width="120px" .../>
...
</body>
</html>
print.css
======================
...
#printLogo {
position: absolute;
left: 0;
top: 0;
}
#headerLogo {
display: none;
}
screen.css
======================
...
#printLogo {
display:none;
}
#contentWrapper {
margin-top: 80px;
}
Good luck!
- Gordon
> I have been asked to place a different header image in my HTML templates
> specifically for print (only shows when printed and replaces usual header).
>
> I would like to know if this is deemed acceptable use of CSS....AND if a
> hard-coded image has to be downloaded on page load or page print??
>
> eg.
> <div id="print-header" style="display:none;">
> <img src="img/elements/print-header.jpg" alt="blah blah" width="600"
> height="254" />
> </div>
> <div id="header">
> <img src="img/elements/normal-header.jpg" alt="blah blah" width="800"
> height="300" />
> </div>
>
> <!-- PRINT STYLESHEET -->
> .print-header {display:block!important}
This duplication of content is unnecessary and would be rather
difficult to maintain in the long term.
.The issue has been dealt with in http://www.w3.org/TR/CSS2/media.html..
Use one element id in a document for one element e.g.
<div id="header">
and then define it differently for different media as per examples in
that link.n
@media print {
#header { font-size: 10pt }
}
@media screen {
#header { font-size: 13px }
}
@media screen, print {
#header { line-height: 1.2 }
}
This method achieves independence of data (web page content) from
design/style (whether it is screen, print or other media type).
HTH
Lesley
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
*******************************************************************
________________________________
Finance Australian Business Number (ABN): 61 970 632 495
Finance Web Site: www.finance.gov.au
IMPORTANT:
This transmission is intended only for the use of the addressee and may contain
confidential or legally privileged information. If you are not the intended
recipient, you are notified that any use or dissemination of this communication
is strictly prohibited.
If you have received this transmission in error, please notify us immediately
by telephone on 61-2-6215-2222 and delete all copies of this transmission
together with any attachments.
If responding to this email, please send to the appropriate person using the
suffix .gov.au.
________________________________
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
*******************************************************************
