'Sold' sign?

[Frogleg]

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.

 

[Karl Groves]

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

 

[Jukka K. Korpela]

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.

 

[Neal]

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.

 

[Toby Inkster]

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

Or -2em even.

 

[Neal]

Or -2em even.

 

[Neal]

Or -2em even.

Sold!

 

[Toby Inkster]

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.

 

[Jeff Thies]

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

 

[rf]

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

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

 

[Kim André Akerø]

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

And, what is the level of support?

I assume you mean the text-transform property. It's been with W3C's
definition of CSS since the very beginning, and is supported down to
Netscape 4.0 and IE 4.0.
http://www.w3schools.com/css/pr_text_text-transform.asp

List of CSS properties:
http://www.w3schools.com/css/css_reference.asp

Personally, I think W3Schools is a very valuable resource when I'm writing
XHTML and CSS code. They also have tutorials for a whole lot more [coding]
languages as well.
http://www.w3schools.com/

 

[Jukka K. Korpela]

How do you know all those CSS properties???

If you asked me, I would tell that I check them from my book - it helps
to write a book, since then you remember most of it, and can easily check
the rest. Some people say that reading books has similar effects.

And, what is the level of support?

Pretty good. See http://www.blooberry.com/indexdot/css/index.html
which has nice information about browser support (and the properties
too), though not 100 % reliable (would you believe 98 %?). For example
http://www.blooberry.com/indexdot/css/properties/text/texttrans.htm
starts with the "support key"
Support Key: [CSS1|CSS2] [IE4B1|N4B2|O3.5]
which means IE from version 4, Netscape from version 4, and Opera from
version 3.5. Support in Netscape generally implies support in Mozilla.
So this pretty much covers the vast majority of browsing situations.

 

[Neal]

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

Specifically http://www.w3.org/TR/CSS2/propidx.html .

(Which incidentally is how I usually access the specs. For specific
problems and questions I find this quicker than the table of contents.)

 

[Toby Inkster]

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

I've used it several times before and it stuck in my head. It's a fun

And, what is the level of support?

For western characters, it seems very good. I'm not sure how good it is
for non-western characters though. (I would guess that NN4 and maybe IE
screw things up in the latter case.)

 

[Frogleg]

I have a table (it's a catalogue) with small images in each cell. How
do I slap a 'sold' label over the image?

Thanks to all for suggestions/roadmaps. Now if I can just work out the
PayPal part, I may be able to use the advice.