HTML Help

sticks464 · Joined: 31 Dec 2006 Posts: 2625

Give this a try
Code: <td width="34%">
<div align="center" style="position:relative;">
<img src="newfiles/IMG_98591.jpg" alt="" height="175" width="250" border="0">
<img src="newfiles/ProjectionScreen.jpg" alt="" height="101" width="128" border="0" style="position:absolute; top:65px; left:135px;">
</div>
</td>

Use the top and left px settings to move the top image around.

NandSi · Joined: 12 Jan 2009 Posts: 24

Hi again. I tried this but it makes the photo one under the other, not overlapping. Maybe I put the code in the wrong place. So here is what I did:The part that I did earlier that worked to overlap is BOLD....altho I had to move the images out of the way so I could see the table, but once I restore the correct placement it would work okay. Just not in the table. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 3</title>

[b]<style type="text/css">
#Layer1 { background: url(newfiles/IMG_98591.jpg) no-repeat left top; position: absolute; z-index: 1; top: 600px; left: 800px; width: 638px; height: 328px; visibility: visible }

#Layer2 { background: url(newfiles/ProjectionScreen.jpg) no-repeat left top; position: absolute; z-index: 2; top: 180px; left: 515px; width: 200px; height: 200px; visibility: visible }

#Layer3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
color: #000000;
text-decoration: underline overline;
position: absolute;
z-index: 3;
left: 0;
top: 0;
}[/b]
</style>

</head>
<body>
   <div id="Layer1">
      <div id="Layer2">
         <div id="Layer3">
</div>
      </div>
   </div>
   <table width="1078" border="1" cellspacing="2" cellpadding="0">
      <tr>
         <td width="34%">
<div align="center" style="position:relative;">
<img src="newfiles/IMG_98591.jpg" alt="" height="175" width="250" border="0">
<img src="newfiles/ProjectionScreen.jpg" alt="" height="101" width="128" border="0" style="position:absolute; top:65px; left:135px;">
</div>
</td></td>
         <td></td>
         <td><td width="34%">
<div align="center" style="position:relative;">
<img src="newfiles/IMG_98591.jpg" alt="" height="175" width="250" border="0">
<img src="newfiles/ProjectionScreen.jpg" alt="" height="101" width="128" border="0" style="position:absolute; top:65px; left:135px;">
</div>
</td></td>
      </tr>
      <tr>
         <td width="34%"></td>
         <td></td>
         <td></td>
      </tr>
      <tr>
         <td width="34%"></td>
         <td></td>
         <td></td>
      </tr>
   </table>
</body>

</html>

NandSi · Joined: 12 Jan 2009 Posts: 24

I still can't get this to work correctly. I put the previous suggestion into 2 cells of a table & both don't work overlapping.

Is there anything else I can do?

sticks464 · Joined: 31 Dec 2006 Posts: 2625

This portion is working in Firefox and IE7

Code: <table width="1078" border="1" cellspacing="2" cellpadding="0">
<tr>
<td width="34%">
<div align="center" style="position:relative;">
<img src="newfiles/IMG_98591.jpg" alt="" height="175" width="250" border="0">
<img src="newfiles/ProjectionScreen.jpg" alt="" height="101" width="128" border="0" style="position:absolute; top:65px; left:135px;">
</div>
</td></td>
<td></td>
<td><td width="34%">
<div align="center" style="position:relative;">
<img src="newfiles/IMG_98591.jpg" alt="" height="175" width="250" border="0">
<img src="newfiles/ProjectionScreen.jpg" alt="" height="101" width="128" border="0" style="position:absolute; top:65px; left:135px;">
</div>
</td></td>
</tr>
<tr>
<td width="34%"></td>
<td></td>
<td></td>
</tr>
<tr>
<td width="34%"></td>
<td></td>
<td></td>
</tr>
</table>

The only way to make this work better is to switch to a css based layout that wirks in all browsers instead of a resolution of 1280 X 1024 and higher.

NandSi · Joined: 12 Jan 2009 Posts: 24

I'm on IE7 and it doesn't work right.

Maybe I'll just give up on putting these in a table
and just make the overlapped ones...stand alone. Even tho that will look kinda crappy.

I have a wide screen laptop, are you thinking if I made the resolution smaller then it might work better? I can easily do that...but I don't think you really mean that.

I can see that what you are suggesting is css and it does work just putting the images anywhere on the page. I can see the css that you've written for me (and thanks) so is there some other css that you are talking about that could/should be written just for tables?

I guess we're talking about an internal css right? Since it only needs to be on that one sheet, not site wide.