layers within tables
Hi, I'm having problems with photos that I have placed with a layer. The layer shifts dramatically when I enlarge the screen area from 800 x 400. I have tried to copy and paste the layer into a table to prevent it from shifting but in Dreamweaver it doesn't seem to allow you to do this. Is there another way of preventing the photos from shifting?
The site is www.imbamatombo.co.zw - if you take a look at this you will see my problem. It displays fine at 800 x 600 but any larger and it is thrown out.
Any advice is greatly welcome.
Kerry, I don't use Dreamweaver, so have no experience in working with it's 'layers' but my solution to the problem you posted here may well solve this problem too. :)
Try using relative positioning for the <div id="layer1"> instead of absolute positioning. You'll have to experiment a bit to get it just right but that should solve your problems.
What's wrong with just using this?
<img src="images/combo/exterior.jpg" width="150" height="108" border="0" name="Image1" alt="Imba Matombo Exterior">
<img src="images/combo/pool.jpg" width="130" height="108" border="0" name="Image2" alt="View of Swimming Pool">
<img src="images/combo/lounge.jpg" width="150" height="108" border="0" name="Image3" alt="The Lounge">
<img src="images/combo/bedroom3.jpg" width="121" height="108" border="0" name="Image4" alt="Stone Lodge">
<font face="Times New Roman, Times, serif" color="#000000"><i>
Walking into Imba Matombo is like entering a giant box of crayons – big colour
everywhere – the variety is endless: generous and vibrant flower arrangements,
brilliantly coloured pictures on the walls, bold and luxurious furnishings.
Hi thanks for the advice. I think the relative positioning is the best route to take. Please can you tell me what relative positioning is! Am a bit clueless...and how will my code change if it is currently: <div id="Layer1" align="center" style="position:absolute; left:177px; top:132px; width:552px; height:32px; z-index:1"> Obviously the absolute changes to relative but how does the rest of it work?:(
Actually, I think Matt's recommendation is the way to go.
First delete the <div id="layer1">...</div> part then paste in Matt's code.
Should fix you up.
Try not to change your resolution settings inside dreamweaver after you have already put in all your content.
Just re-design it and keep it to one resolution.
Thanks, Matt's code works....however, still a few more teething problems. Although the images don't shift with a higher resolution, I now have quite large white spaces between each photo. Is there a way of controlling this? And the other thing is, orginally my photos swapped every few seconds, how do I do this now?
Thanks for all your help so far :)