Forum Moderators: open

Message Too Old, No Replies

Tables, DIV Layers, Screen Res

         

Yakumo

3:54 am on Jun 23, 2005 (gmt 0)

10+ Year Member



Currently this is what I have:

<td width="500" valign="top">
<div id="Layer1" style="position:absolute; left:330px; top:503px; width:540px; height:438px; z-index:1; background-image: url(testbox2a.jpg); layer-background-image: url(testbox2a.jpg); border: 1px none #000000;">
<BR><BR>
<CENTER>
<iframe src="animenews.php" frameborder="0" height="390" width="530" allowtransparency="true" name="quickview"></iframe><br>
</CENTER>
</div>
</td>

When someone sees the page at a 1260 X 1024 screen res. the news box overlaps the previous TD of this TR line.

Any help to not make it do that?

tedster

5:46 am on Jun 23, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



It's because you are using position:absolute - the news box will always appear at left:330px; top:503px; relative to the viewport, and the rest of your layout apparently shifts its position with the screen resolution. Fix it one of two ways:

1. position the news box from WITHIN an element from the rest of the layout so it is relative to something other than the viewport

2. Change the rest of the layout's positioning to be the same no matter the resolution

Yakumo

4:20 pm on Jun 23, 2005 (gmt 0)

10+ Year Member



Hey thanks

Now comes the question how to do either of those?

I'm new to this, either is fine as long as the page stays the way I see it in 1024 X 768 at higher res. would be great. The rest of the page does just that div / iframe doesn't

Thanks for the help.