text over text

Discussion in 'HTML' started by Jeff Thies, Jul 23, 2005.

  1. Jeff Thies

    Jeff Thies Guest

    Seemingly simple request:

    Positioning either text or an image (the word "SOLD") over a paragraph.

    I could set in a background-image, but that wouldn't be on top. I can't
    think of a decent way to do this with relative positioning (might as
    well use margins).

    Any ideas?

    Jeff
    Jeff Thies, Jul 23, 2005
    #1
    1. Advertising

  2. Jeff Thies

    ppcguy Guest

    you have to use DHTML.

    look into layers and absolute positioning.

    if you want to make it diagonal - i think you'll have to use
    an image.

    "Jeff Thies" <> wrote in message
    news:czsEe.7938$...
    > Seemingly simple request:
    >
    > Positioning either text or an image (the word "SOLD") over a paragraph.
    >
    > I could set in a background-image, but that wouldn't be on top. I can't
    > think of a decent way to do this with relative positioning (might as
    > well use margins).
    >
    > Any ideas?
    >
    > Jeff
    ppcguy, Jul 23, 2005
    #2
    1. Advertising

  3. Jeff Thies

    Jeff Thies Guest

    ppcguy wrote:

    > you have to use DHTML.


    Why?

    This is close to what I want:

    <div style="font-size: 3em;position: relative;top: 1em;font-weight:
    900;font-family: Verdana,sans-serif;color: red;z-index: 1">SOLD</div>
    <p style="position: relative;top: -5em;margin-bottom: -5em; width: 200px">
    xxxxxxxxxxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxxx
    xxxxxxxxxxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxxx
    xxxxxxxxxxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxxx
    xxxxxxxxxxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxxx
    xxxxxxxxxxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxxx
    </p>
    <p>following paragraph</p>

    Jeff
    >
    > look into layers and absolute positioning.
    >
    > if you want to make it diagonal - i think you'll have to use
    > an image.
    >
    > "Jeff Thies" <> wrote in message
    > news:czsEe.7938$...
    >
    >>Seemingly simple request:
    >>
    >>Positioning either text or an image (the word "SOLD") over a paragraph.
    >>
    >>I could set in a background-image, but that wouldn't be on top. I can't
    >>think of a decent way to do this with relative positioning (might as
    >>well use margins).
    >>
    >> Any ideas?
    >>
    >> Jeff

    >
    >
    >
    Jeff Thies, Jul 23, 2005
    #3
  4. Jeff Thies wrote:

    > Why?
    >
    > This is close to what I want:
    >
    > <div style="font-size: 3em;position: relative;top: 1em;font-weight:
    > 900;font-family: Verdana,sans-serif;color: red;z-index: 1">SOLD</div>
    > <p style="position: relative;top: -5em;margin-bottom: -5em; width: 200px">
    > xxxxxxxxxxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxxx
    > xxxxxxxxxxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxxx
    > xxxxxxxxxxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxxx
    > xxxxxxxxxxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxxx
    > xxxxxxxxxxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxxx
    > </p>
    > <p>following paragraph</p>


    I think you're pretty much there with that anyway. It's always going to
    shift about with varying font-sizes.

    http://www.brightonfixedodds.net/test/overlay.html

    --
    Robert
    http://brightonfixedodds.net
    Robert Frost-Bridges, Jul 23, 2005
    #4
  5. Robert Frost-Bridges, Jul 23, 2005
    #5
  6. Jeff Thies

    Jeff Thies Guest

    Robert Frost-Bridges wrote:
    > Robert Frost-Bridges wrote:
    >
    >
    >>I think you're pretty much there with that anyway. It's always going to
    >>shift about with varying font-sizes.
    >>
    >>http://www.brightonfixedodds.net/test/overlay.html

    >
    >
    >
    > and browsers.


    This looks pretty much the same in NS7.2, IE6 and Opera 7 (windows).
    Haven't fired up the Mac yet. Have you noticed anything really off?

    My first thought on this was to drop a little script in that would
    look for every instance of class "sold" and measure the height of the
    following paragraph and adjust accordingly. I'm not sure that is
    necessary. I'm a bit concerned with compensating for the whitespace that
    the "SOLD" image or text leaves. Note the space before "too late".

    Jeff

    >
    Jeff Thies, Jul 24, 2005
    #6
    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. Cesar Zam
    Replies:
    0
    Views:
    329
    Cesar Zam
    Nov 6, 2003
  2. someone

    FTP over SSL vs FTP over SSH

    someone, Apr 24, 2004, in forum: Java
    Replies:
    1
    Views:
    4,562
    iksrazal
    Apr 25, 2004
  3. Replies:
    7
    Views:
    6,677
    Alex Molochnikov
    Feb 23, 2005
  4. Nagesh
    Replies:
    2
    Views:
    9,360
    =?ISO-8859-1?Q?Arne_Vajh=F8j?=
    Aug 12, 2006
  5. Michael Ansel
    Replies:
    5
    Views:
    426
Loading...

Share This Page