Surface Pro (2017) vs Surface Pro 4
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!!
I just get an error404 when I click on your link..?
This is the correct link click here
yes sorry, forgot the .htm bit. Eric10 's link is correct and my thanks to him.
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" >
<!-- 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.
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.
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
209 x 138
This thread is now locked and can not be replied to.