Re: Display: none

At 10:58 AM 3/14/2006, David Dorward wrote:

>On Tue, Mar 14, 2006 at 10:50:50AM -0800, Paul Novitski wrote:
> > h1
> > {
> >         overflow: hidden;
> >         width: 150px;
> >         height: 0px;
> >         padding-top: 20px;
> >         background: url("../images/this_is_my_title.gif") left top
> >         no-repeat;
> > }
> > I like this a lot because it doesn't require any extraneous
> > markup.  I'm not aware of any disadvantages to this technique and
> > would appreciate hearing about any.
>
>Style sheets on but images off (or even just background images off, as
>is the default for printing on most browsers) and the user gets
>nothing.

*Sigh*  You're right, I letting my enthusiasm dull my critical 
faculty.  I wouldn't think that printing would be an issue, since we 
could supply the printer a different set of rules, but 
CSS-on/images-off breaks it.


>Also, if the user increases their font size, the image won't resize,
>possibly leaving it in the state "Still too small to read".

Well, yes -- the failing of background image replacement per se.  To 
get around this, I guess you'd have to mark up the image in 
foreground so it could be sized in ems, and begin with the image 
sized to be larger than the text to try to prevent the text from 
peeking out from behind the image.

Of course, putting the image into the foreground makes it no longer 
image REPLACEMENT unless you insert the image tag conditionally with 
javascript, which would spoil some of the fun for me.

Anyway here's a first attempt to style that approach: I'll create 
three layers, image on top, text beneath that, and their container on 
the bottom:

<div id="logohead">
         <img src="logo.jpg" alt="Acme Widgets" />
         <h1>Acme Widgets</h1>
</div>

#logohead
{
         /* container = bottom layer */
         position: relative;
         z-index: 0;

         /* wider than h1 text */
         width: 30em;
}

#logohead img
{
         /* image = top layer */
         position: relative;
         z-index: 2;

         /* make image stretchable */
         /* wider than h1 text */
         width: 30em;
}

#logohead h1
{
         /* text = middle layer */
         position: absolute;
         z-index: -1;

         /* tuck text up behind image */
         top: 0;
         left: 0;
}

CSS    + images    = image only
CSS    + no images = text only
no CSS + images    = image & text
no CSS + no images = text only

If this were implemented with javascript inserting the image, then 
the "no javascript" state would be the same as "no images" above.

"no CSS + images" is where you get both image & text, but even then 
it doesn't break the page, it's just somewhat redundant.

In my quick tests in Firefox 1.5 & IE6, I don't see any text flowing 
out from behind the image, but it might be possible to force this if 
the text wrapped.

To get away with a stretchable image, you'd have to save the image in 
a very high resolution, then start it off at a small percentage of 
its full size in "normal" zoom, so it can be enlarged without 
pixelating (disadvtantage: heavy download).

Alternatively, you could save the image as a vector graphic so it can 
be resized without degrading, requiring either Flash (which as far as 
I know doesn't zoom along with browser text size) or The Browsers Of Tomorrow.

Paul

Received on Tuesday, 14 March 2006 21:53:56 UTC