layered images not displaying properly

  kiz 12:18 21 May 2007

I have knocked up a site and chose to put some images in layers rather than tables because I wanted a more random feel to the pics.See click here
It is fine in my browser but the Images do not move with the page when I resize to other display sizes.
I have been given this advice:
"they are absolutly positioned by css style (using style in div>) and maybe if you change the position type it might fix it..??
I am not sure how to "change the position type" and is this the correct thing to do?
Thanks in advance
PS I am a novice in webdesign!!

  djbenny 20:18 21 May 2007

error 404 - page not found

  mco 20:20 21 May 2007

I just get an error404 when I click on your link..?

  Eric10 22:34 21 May 2007

This is the correct link click here

  kiz 10:04 22 May 2007

yes sorry, forgot the .htm bit. Eric10 's link is correct and my thanks to him.

  Eric10 13:00 22 May 2007

Hi kiz, I can't see any way of putting it right without doing quite a bit of re-writing. As you suspect, the problem is caused by the absolute positioning as this positions on the screen rather than on the page. You could use relative positioning but you would have to have a containing element for the positioning to relate to.
I've done some experimenting but this has resulted in removing the layers, which didn't seem to be helping, and positioning your div elements within the lower part of your table structure using float and padding to position them. If you wish to experiment with my suggestions please keep a copy of your original page just in case you don't like the result.

You will need to remove the section at the top that defines the layers and then find the table at the bottom of your code and replace it with:

<table width="95%" height="721" border="2" align="center" bordercolor="#009999" >
<td valign="top"> 

<!-- new code -->
<div style="float:left; width:240px; height:200px; padding: 15px 0px 0px 29px;"><img src="images/janeatwork4.jpg" width="231" height="192"></div>
<div style="float: right; width:235px; height:112px; padding: 27px 37px 0 0;">
<div align="left"><span class="style17"><span class="style3"><img src="images/comma_open.jpg" width="15" height="15"></span>From Film, TV, Editorial to Bridal Work, there is never a dull moment. Meeting new people, visiting different locations and constantly learning more, this is my life and I love it<img src="images/comma_close.jpg" width="15" height="15"></span></div>
<div style="float:right; width:260px; height:173px; padding: 56px 25px 0 0;"><img src="images/janeatwork2.jpg" width="260" height="173"></div>
<div style="float:left; width:230px; height:165px; padding: 70px 0 0 19px;"><img src="images/janeatwork1.jpg" width="230" height="165"></div>
<div style="float:right; width:305px; height:200px; padding:57px 25px 0 0;"><img src="images/janeatwork3.jpg" width="305" height="200"></div>
<!-- end of new code -->


The padding can obviously be altered to what you want but these are the values that kept the layout closest to what you already have while allowing the page to be resized. There will no doubt be better and more elegant ways to do it but this is intended as a fairly quick fix to get it working.

  kiz 15:43 22 May 2007

eric 10,
thank you so much. That was a great help. Now at least it doesnt shoot all over the place. I am most grateful.
I have ticked the resolved box.

  anchor 16:53 25 May 2007

I certainly am no expert, but some distortion is apparent in your pictures on your index page.

Looking at the source code I can see why; you have set the width too narrow. If you wish to keep the correct aspect ratio as the originals then the sizes for the two most affected should be:


196 x 138


should be

209 x 138

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

The Evil Within 2 review-in-progress

Adobe shows still-in-development tools, including automatically colourising black-and-white photos

iPhone X news: Release date, price, new features & specs

Comment transformer un iPhone en borne Wi-Fi ?