text over text

[Jeff Thies]

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]

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]

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

 

[Robert Frost-Bridges]

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 Frost-Bridges]

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.

 

[Jeff Thies]

Robert Frost-Bridges wrote:





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