«

I know this has come up before, but I've looked at a pageful of Google
groups thread references and found no solution.

I have a table (it's a catalogue) with small images in each cell. How
do I slap a 'sold' label over the image? Of course, I could just
substitute a 'sold' image in the cell, but I'd rather let the sold
item show, too.

"Frogleg" <> wrote in message
news:...
> I know this has come up before, but I've looked at a pageful of Google
> groups thread references and found no solution.
>
> I have a table (it's a catalogue) with small images in each cell. How
> do I slap a 'sold' label over the image? Of course, I could just
> substitute a 'sold' image in the cell, but I'd rather let the sold
> item show, too.

Set the product image as the cell's background, and put your "sold" image
over it.

-Karl

"Karl Groves" <> wrote:

>> I have a table (it's a catalogue) with small images in each cell.
>> How do I slap a 'sold' label over the image? Of course, I could just
>> substitute a 'sold' image in the cell, but I'd rather let the sold
>> item show, too.
>
> Set the product image as the cell's background, and put your "sold"
> image over it.

That's probably one way (didn't try, but I don't see any reason why it
wouldn't work).

Another approach: use markup like

<td class="sold"><img src="demo.gif" alt="demo"> <span>sold</span></td>

and use CSS to make the text "sold" overprint the image, by positioning
them into the same place and assigning a higher z-index value to the span
element, e.g.

td.sold { position: relative; height: 100px; }
td.sold span { position: absolute;
color: red;
font-weight: bold;
font-size: 150%;
background: transparent;
z-index: 200; }
td.sold img { position: absolute; z-index: 100; }

If the images are very different, then the idea of overprinting with a
transparent background (which you could implement in Karl's approach too,
by making areas of the image transparent) is not suitable, since no text
color can be legible against all backgrounds. But when feasible, the
approach lets the image shine through.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

On Sun, 22 Aug 2004 07:40:02 -0400, Karl Groves <>
wrote:

>
> "Frogleg" <> wrote in message
> news:...
>> I know this has come up before, but I've looked at a pageful of Google
>> groups thread references and found no solution.
>>
>> I have a table (it's a catalogue) with small images in each cell. How
>> do I slap a 'sold' label over the image? Of course, I could just
>> substitute a 'sold' image in the cell, but I'd rather let the sold
>> item show, too.
>
> Set the product image as the cell's background, and put your "sold" image
> over it.

Only downside is this puts the picture of the product in the stylesheet,
and not as part of the content. Including <div>SOLD</div> right after the
image and styling like td div {position: relative; top: 2em;} might work,
untested.

Neal wrote:

> Including <div>SOLD</div> right after the image and styling like td div
> {position: relative; top: 2em;} might work, untested.

Or -2em even.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact
Now Playing ~ ./bruce_springsteen/gratest_hits/17_blood_brothers.ogg

On Sun, 22 Aug 2004 16:56:44 +0100, Toby Inkster
<> wrote:

> Neal wrote:
>
>> Including <div>SOLD</div> right after the image and styling like td div
>> {position: relative; top: 2em;} might work, untested.
>
> Or -2em even.
>

On Sun, 22 Aug 2004 16:56:44 +0100, Toby Inkster
<> wrote:

> Neal wrote:
>
>> Including <div>SOLD</div> right after the image and styling like td div
>> {position: relative; top: 2em;} might work, untested.
>
> Or -2em even.



Sold!

Toby Inkster wrote:

> Neal wrote:
>
>> Including <div>SOLD</div> right after the image and styling like td div
>> {position: relative; top: 2em;} might work, untested.
>
> Or -2em even.

Also, I'd be tempted to use:

<strong class="sold">Sold</strong>

with:

strong.sold {
position: relative;
top: -2em;
font-weight: bold;
font-style: normal;
text-transform: uppercase;
}

As the use of uppercase letters in this case is really styling and not
semantic.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact
Now Playing ~ ./tom_mcrae/tom_mcrae/05_draw_down_the_stars.ogg

> text-transform: uppercase;
> }
>
> As the use of uppercase letters in this case is really styling and not
> semantic.
>

How do you know all those CSS properties??? I've never seen that.

And, what is the level of support?

Jeff

Jeff Thies wrote:

> How do you know all those CSS properties??? I've never seen that.

Never read the spec?
http://www.w3.org/TR/REC-CSS2/

--
Cheers
Richard.