asked on

Using DHTML/CSS to Layer images and text inside a table

I have a conditional (asp if then statement) that if implemented inserts some text on top of a photo with a <div> tag. The problem is that if it is inserted, it drops the rest of my text (<div> tags) down.. and creates extra white space inside my table. I need a way to format the code below such that inserting the <div> tag won't move other <div> tags down on the page.. Is there some CSS setting I am not using.. perhaps float or clear ?? or maybe grouping the <div> tags within another <div> tag?? See code below.

<table align=center>
<tr>
<td bgcolor=LightGoldenrodYellow align=center>
<div style="z-index:1; top: 0; position: relative;">
<img src="http://community.webshots.com/image4/6/54/11/60465411NJoqpq_ph.jpg" border="0" style='HEIGHT: 208px; WIDTH: 312px'>
</div>
<%if archived=true then%>
<div style="z-index:2; top: -30; font-size: 10pt; font-weight: bold; position: relative; color: red;">
Archived
</div>
<%end if%>
<div style="z-index:3; top: -3; font-size: 10pt; font-weight: normal; position: relative; color: red;">
PHOTO ID = 2134543<br>YEAR 2001
</div>
</td>
</tr>
</table>

phothy

Try "display: inline;" like this:

<div style="display: inline; z-index:2; top: -30; font-size: 10pt; font-weight: bold; position: relative; color: red;">
Archived
</div>

Though it may be something else.

Do you want it to display like this?

[img] Archived

OR

[img]
Archived

Try using a span tag. As far as I know a <span> is the same as <div style="display: inline;">. Both will lose some formatting capability, but they the contents will behave normally.

<div style="margin-bottom: 0px;">[img]</div>
<div style="margin-top: 0px;">Archived</div>

will display
[img]
Archived

<span>[img]</span>
<span>Archived</span>

will display
[img] Archived

northernchill

Place the image and the text in one <div> tag and change the positioning properties of the text. Like this:

(I have removed properties not directly related to this issue: Font ...)

<div style="Z-INDEX: 1; POSITION: relative; TOP: 0px">
<IMG src="" >
<%if archived=true then%>
<div style="Z-INDEX: 2; POSITION:absolute; TOP: 10px; Left: 10px">
Archived
</div>
<%end if%>
</div>

This presents the text directly on top of the image without shifting text or table row heights.

shadc

ASKER

northernchill -
Thanks. This almost does what I want it too.. It does not shift text or row heights anymore, however now I can not get the text "ARCHIVED" to be placed in the absolute center of the image. If I set the TOP to 50% and LEFT to 50% it is still shifted a bit to the right.. If I set the LEFT to 47% it kind of looks ok.. but not really the best solution. Any Ideas??

phothy -
"display: inline" messes up ALL my text placement. What I am looking for is text to be displayed right on top of the image (ie layered) in the exact center of the photo, and more text just below the image. the text that is placed on top of the image is conditional.

ASKER CERTIFIED SOLUTION

northernchill

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

northernchill

I haven't actually tried that last idea, it may shift your text again - I don't think it will but with browsers, who knows.

shadc

ASKER

Northernchill,
Thanks, That worked.. I wish I could trim the code a bit, but if it works, I'm good.

Here is how it finally will end up..

<table align=center>
<tr>
<td bgcolor=silver align=center>
<div style="Z-INDEX: 1; POSITION: relative; TOP: 0px">
<IMG src="http://community.webshots.com/image4/6/54/11/60465411NJoqpq_ph.jpg" style='HEIGHT: 208px; WIDTH: 312px'>
<table style="Z-INDEX: 2; POSITION:absolute; TOP: 0px; Left: 0px; width:312; height:208; font-size: 10pt; font-weight: bold; color: red;">
<tr>
<td valign=bottom align=center >
Archived
</td>
</tr>
</table>
</div>
<div style="z-index:3; top: -3; font-size: 10pt; font-weight: normal; position: relative; color: red;" align=center>
PHOTO ID = 2134543<br>YEAR 2001
</div>
</td>
</tr>
</table>