How to keep image in same place when resizing browser

madbrit · Joined: 12 Apr 2008 Posts: 2

Hi to all, new HTML so please forgive me if this is a stupid question.....

I have a created a web page, on the home page I have 2 images as per the code below. when i click on the image it goes to another web page. I have used Index to be able to move the images where i want BUT......

When i resize the page the images stay as they were and do not rescale with the page and go off to one side.

How can I correct this.

<html>
<body>

<div style=" position: absolute;width: 100px; height: 100px; z-index: 2; left: 250px; top:150px" id="layer2">
<a href="http://www.orcd.pwp.blueyonder.co.uk/en-gb/dept_11.html">
<img border="0" src="http://orcd.pwp.blueyonder.co.uk/Animations/ANDANIMATE.gif" width="150" height="50" align="left"></a></div>

<p>
  </p>
<div style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 800px; top: 150px" id="layer1">
<a href="http://www.orcd.pwp.blueyonder.co.uk/en-gb/dept_12.html">
<img border="0" src="http://orcd.pwp.blueyonder.co.uk/Animations/INTELANIMATE.gif" width="150" height="50"></a></div>

</body>

</html>

Thanks

MaDbRiT

Corey Bryant · Posted: Sat Apr 12, 2008 2:15 pm

Well your image is 150 pixels wide. And you are specifically telling the browser to place the "layers" (<div>) in a certain place.

So it seems that it starts over 150 pixels and then another 150 pixels. That's 300 - if the window is smaller than that, then you would have the scrolling bars.

_________________
Corey
Payment Processing Forums | Mile High Merchant Accounts | Microsoft Expression Web Blog

madbrit · Joined: 12 Apr 2008 Posts: 2

Ok I see that, thanks, so is there a better way of doing this, if i dont use <div> i cant get them where i want them??

Thanks

MaDBrIt

Straystudio · Joined: 14 Apr 2008 Posts: 264 Location: Nord Italy

Hi from Italy!
Change it into something like this:

<div style=" position: absolute; ... left: 20%; top:150px" id="layer2">

<div style="position: absolute; ... right: 30%; top: 150px" id="layer1">

NN9 and IE7 tested.
With these % values, it looks nearly the same as Your version in pixel, on 1280px wide screen.