[EMAIL PROTECTED] wrote:
> Hi all-
>
> I've been using css to style just text for a while now, and want to move to
> the
> next level and begin using it for layout. My site design has a logo in the
> upper left corner:
>
> http://www.lawrence.lib.ks.us/
>
> That logo image (logo.gif) is on a dark blue background which works fine for
> the
> screen view, but I want to substitute a version of the logo with a *white*
> background (logo-bw-120h.jpg) in the same position for printing.
>
> Question: is this possible? is it browser-safe to attempt it for IE6 and
> higher?
>
> Thanks very much in advance for any thoughts you can share with me.
>
> Karen
>
>
>
A simple trick is to place the print logo (logo-bw-120h.jpg) in your
HTML, and then 'hide' it in your screen CSS (e.g. using negative
positioning) and replace with a background image of your 'screen' logo -
logo.gif. It's simple enough to be pretty browser safe, yes.
Typically you stick the background on a container element, styled to the
same height/width as your logo e.g.
Example HTML:
<div id="logo"><a href="/index.html"><img src="logo-bw-120h.jpg"
height="110" width="125" alt="Lawrence Public Library" /></a></div>
Screen styles:
div#logo a {
background: url(logo.gif) no-repeat left top;
display:block;
height: 100px;
width: 200px;
}
div#logo img {
position:absolute;
left:-200em
}
Print styles (reset the screen styles to default):
div#logo a {
background-image:none;
display:inline;
height:auto;
width:auto;
}
div#logo img {
position: static;
left:auto;
}
--
Sophie Dennis, Creative Director
Cayenne Web Development Limited
www.cayenne.co.uk
Bloxham Mill, Barford Road
Bloxham, Oxfordshire OX15 4FF
t. 0870 389 0570
m: 07814 026632
Reg. England and Wales no. 4502369
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
