Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Image Alignment off when browser size changes 1

Status
Not open for further replies.
powahusr

powahusr

Technical User
Jan 22, 2001
240
US
I am working with layers and want 3 smaller images to overlay 1 larger image, which happens to be a background image of a table cell "TD". I successfully accomplished that task, however, when the size of the browser changes, such as when I "Restore Down" or double click the "Title Bar" of the browser, the 3 images are no longer over the background image, they are off to the right somewhere.

I want the 3 images to remain exactly where they were when the browser is maximized.

How is this accomplished?

Thanks in Advance!!!


Here is the code:


<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;>

<html>
<head>
<title>Layers</title>
<style type=&quot;text/css&quot;>
#FirstLayer {position: absolute; left:375px; top:25px; z-index:3; width=72px; height=80px; border-style:none; border-width:1px;}

#SecondLayer {position: absolute; left:550px; top:25px; z-index:2; width=77px; height=80px; border-style:none; border-width:1px;}

#ThirdLayer {position: absolute; left:375px; top:205px; z-index:1; width=75px; height=80px; border-style:none; border-width:1px;}
</style>
</head>

<body>

<div id=&quot;FirstLayer&quot;><img src=&quot;Images/Image1.gif&quot; alt=&quot;1&quot; width=&quot;72&quot; height=&quot;80&quot; border=&quot;0&quot;></div>

<div id=&quot;SecondLayer&quot;><img src=&quot;Images/Image2.jpg&quot; alt=&quot;2&quot; width=&quot;77&quot; height=&quot;80&quot; border=&quot;0&quot;></div>

<div id=&quot;ThirdLayer&quot;><img src=&quot;Images/Image3.jpg&quot; alt=&quot;3&quot; width=&quot;75&quot; height=&quot;80&quot; border=&quot;0&quot;></div>

<table align=&quot;center&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; border=&quot;0&quot; bgcolor=&quot;#869DE1&quot;>
<tr>
<td width=&quot;20&quot; colspan=&quot;3&quot;> </td>
</tr>
<tr>
<td width=&quot;20&quot; rowspan=&quot;2&quot;> </td>

<td width=&quot;225&quot; height=&quot;249&quot; rowspan=&quot;2&quot; background=&quot;Images/bgImage1.jpg&quot;>
</td>

<td width=&quot;20&quot; rowspan=&quot;2&quot;> </td>
</tr>
<tr>
</tr>
<tr>
<td width=&quot;20&quot; colspan=&quot;3&quot;> </td>
</tr>
</table>

</body>
</html>
 
Sort by date Sort by votes
Hi,

Is this the layout you want?

<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;>
<html>
<head>
<title>Layers</title>
<style type=&quot;text/css&quot;>
#FirstLayer {position: absolute; left:375px; top:25px; z-index:3; width=72px; height=80px; border-style:none; border-width:1px;}
#SecondLayer {position: absolute; left:550px; top:25px; z-index:2; width=77px; height=80px; border-style:none; border-width:1px;}
#ThirdLayer {position: absolute; left:375px; top:205px; z-index:1; width=75px; height=80px; border-style:none; border-width:1px;}
</style>
</head>

<body>

<!--<div id=&quot;FirstLayer&quot;><img src=&quot;Images/Image1.gif&quot; alt=&quot;1&quot; width=&quot;72&quot; height=&quot;80&quot; border=&quot;0&quot;></div>

<div id=&quot;SecondLayer&quot;><img src=&quot;Images/Image2.jpg&quot; alt=&quot;2&quot; width=&quot;77&quot; height=&quot;80&quot; border=&quot;0&quot;></div>

<div id=&quot;ThirdLayer&quot;><img src=&quot;Images/Image3.jpg&quot; alt=&quot;3&quot; width=&quot;75&quot; height=&quot;80&quot; border=&quot;0&quot;></div>-->

<table align=&quot;center&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; border=&quot;0&quot; bgcolor=&quot;#869DE1&quot;>
<tr>
<td width=&quot;20&quot; colspan=&quot;3&quot;> </td>
</tr>
<tr>
<td width=&quot;20&quot; rowspan=&quot;2&quot;> </td>
<td width=&quot;225&quot; height=&quot;249&quot; rowspan=&quot;2&quot; background=&quot;Images/bgImage1.jpg&quot;>
<table style=&quot;width:100%;height:100%;&quot;>
<tr>
<td valign=&quot;top&quot; align=&quot;left&quot;><img src=&quot;Images/Image1.gif&quot; alt=&quot;1&quot; width=&quot;72&quot; height=&quot;80&quot; border=&quot;0&quot;></td>
<td valign=&quot;top&quot; align=&quot;right&quot;><img src=&quot;Images/Image2.jpg&quot; alt=&quot;2&quot; width=&quot;77&quot; height=&quot;80&quot; border=&quot;0&quot;></td>
</tr>
<tr>
<td valign=&quot;bottom&quot; align=&quot;left&quot;><img src=&quot;Images/Image3.gif&quot; alt=&quot;3&quot; width=&quot;75&quot; height=&quot;80&quot; border=&quot;0&quot;></td>
<td valign=&quot;top&quot; align=&quot;right&quot;>&nbsp;</td>
</tr>
</table>
</td>
<td width=&quot;20&quot; rowspan=&quot;2&quot;> </td>
</tr>
<tr>
</tr>
<tr>
<td width=&quot;20&quot; colspan=&quot;3&quot;> </td>
</tr>
</table>
</body>
</html>

Rick

-----------------------------------------------------------
RISTMO is back! Sorry I've been away for so long--it's been a busy year ;-)
RISTMO Designs
Arab Church
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
718
3esolar
3
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
waubain
  • Locked
  • Question
3 state slider toggle switch - move slider to state when hover
Replies
0
Views
250
waubain
waubain
waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
228
jjgupta915
jjgupta915

Part and Inventory Search

Sponsor

Back
Top