On Tue, Aug 3, 2010 at 4:57 PM, Alex Mitchell <alex.mitch...@gumware.com>wrote:
> > > Gabriele, >> Thanks for the compliment! I actually can't take credit for the design - >> the >> client created it. She had originally created the entire website in Flash >> (and she is a newbie to Flash), but it wasn't working correctly. After she >> consulted with me, we came up with this solution. >> >> On the banner the lettering "Stone Theater" is white ( >> http://elizabethfarley.web.officelive.com/StoneTheater/media/banner.gif), >> so >> printing on a white background renders the lettering nearly invisible. >> Rather than print on a black background and make the user waste ink, I >> want >> to substitute an alternate banner ( >> >> http://elizabethfarley.web.officelive.com/StoneTheater/media/banner-print.gif >> ) >> Is this possible using css? >> >> Also, you might have misunderstood my second question - I wanted the URL >> to >> show up (ie: >> http://elizabethfarley.web.officelive.com/StoneTheater/index.html) to >> show >> up at the bottom of the page. Wondered if anyone could point me to the >> right direction for the coding.... >> >> Thanks for the help! >> -- >> Elizabeth Farley > > > Alright, there is a way to do this in CSS, and it is actually more SEO > friendly as well. Instead of using an <img> where your <h1> and <h2> should > be, set a background image on the #banner. > > Example: > > <!-- Banner --> > <div id="banner"> > <h1>Stone Theater</h1> > <h2>Fine Art Museum Sculptures, Bas-reliefs, and Large-Scale > Photography</h2> > <!-- <img src="index_files/banner2.gif" alt="Stone Theater" /> --> > </div><!-- end of Banner --> > > Screen CSS: > > #banner { > height:90px; > width:100%; > overflow:hidden; /* just so that you cant actually see the text even if > somebody is using a ridiculously large screen resolution */ > background:url(media/banner2.gif) top center no-repeat; } > #banner h1, #banner h2{ > text-indent:-5000px; } > > > Print CSS: > > #banner { > height:90px; > width:100%; > overflow:hidden; /* just so that you cant actually see the text even if > somebody is using a ridiculously large screen resolution */ > background:url(media/print-banner2.gif) top center no-repeat; } > #banner h1, #banner h2{ > text-indent:-5000px; } > > Doing it this way allows you to set a different background image for each > stylesheet. Or you can even use plain text in one and not on the other. It's > a pretty common technique to use custom fonts in logos and such without > losing the SEO benefits of having the proper heading tags. > > *disclaimer* > you might have to play with it a little bit for it to work right, but this > should give you a general idea of how it works. > > Hope this helps, > Alex Mitchell > http://gumware.com > Oh wow, that's an interesting technique - I was worried about SEO (which I still have to work on) with all the graphics/flash - I can see what you are proposing. Having made and uploaded the changes (with a little tweak...) If I use the FF web developer toolbar and "Display CCS by media type" I can see it working. But if I go to print preview, it's not the same.... And IE won't show a banner at all in print preview... hmm... -- Elizabeth Farley ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
