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
______________________________________________________________________
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/
