'Sold' sign?

Discussion in 'HTML' started by Frogleg, Aug 22, 2004.

  1. Frogleg

    Frogleg Guest

    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, Aug 22, 2004
    #1
    1. Advertising

  2. Frogleg

    Karl Groves Guest

    "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, Aug 22, 2004
    #2
    1. Advertising

  3. "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
    Jukka K. Korpela, Aug 22, 2004
    #3
  4. Frogleg

    Neal Guest

    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, Aug 22, 2004
    #4
  5. Frogleg

    Toby Inkster Guest

    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
    Toby Inkster, Aug 22, 2004
    #5
  6. Frogleg

    Neal Guest

    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.
    >
    Neal, Aug 22, 2004
    #6
  7. Frogleg

    Neal Guest

    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!
    Neal, Aug 22, 2004
    #7
  8. Frogleg

    Toby Inkster Guest

    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
    Toby Inkster, Aug 22, 2004
    #8
  9. Frogleg

    Jeff Thies Guest

    > 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, Aug 24, 2004
    #9
  10. Frogleg

    rf Guest

    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.
    rf, Aug 24, 2004
    #10
  11. "Jeff Thies" <> skrev i melding
    news:XqCWc.2239$Y%...
    > > 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?


    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/

    --
    Kim André Akerø
    -
    (remove NOSPAM to contact me directly)
    Kim André Akerø, Aug 24, 2004
    #11
  12. Jeff Thies <> wrote:

    >> 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???


    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.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
    Jukka K. Korpela, Aug 24, 2004
    #12
  13. Frogleg

    Neal Guest

    On Tue, 24 Aug 2004 08:10:20 GMT, rf <rf@.invalid> wrote:

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


    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.)
    Neal, Aug 24, 2004
    #13
  14. Frogleg

    Toby Inkster Guest

    Jeff Thies wrote:
    > Toby wrote:
    >
    >> text-transform: uppercase;

    >
    > 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
    property to add to <strong> text. I think I originally discovered it when
    looking up the syntax for "font-variant:small-caps".

    > 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.)

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Now Playing ~ ./no_doubt/im_just_a_girl.ogg
    Toby Inkster, Aug 24, 2004
    #14
  15. Frogleg

    Frogleg Guest

    On Sun, 22 Aug 2004 11:11:05 GMT, Frogleg <> 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?


    Thanks to all for suggestions/roadmaps. Now if I can just work out the
    PayPal part, I may be able to use the advice. :)
    Frogleg, Sep 1, 2004
    #15
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. David Veeneman

    Okay--I'm sold!

    David Veeneman, Jan 23, 2006, in forum: ASP .Net
    Replies:
    2
    Views:
    486
    David Veeneman
    Jan 24, 2006
  2. Cindi Jenkins

    SOLD GOOG bought BE

    Cindi Jenkins, Nov 20, 2004, in forum: Java
    Replies:
    3
    Views:
    393
    joeturn
    Nov 22, 2004
  3. Doi Haveto

    AffordableHOST, Inc. *SOLD*

    Doi Haveto, Apr 20, 2005, in forum: HTML
    Replies:
    4
    Views:
    428
    Blinky the Shark
    May 4, 2005
  4. primeattheark
    Replies:
    4
    Views:
    358
    Chris Uppal
    Feb 23, 2007
  5. Tim Hunter

    Ruby Conference hotel sold out

    Tim Hunter, Aug 19, 2004, in forum: Ruby
    Replies:
    18
    Views:
    323
    Lyle Johnson
    Aug 19, 2004
Loading...

Share This Page