Overlapping Images in Dreamweaver

Hello,

I am trying to insert one photo ontop of another in Dreamweaver. I have tried to use layers but then when you open the page up in the browser the overlapping image does not seem to be part of the screen.. the image moves as your resize the screen.. I need to make the overlapping image part of the page so that when you resize the screen via the broweser the image stays in the place it was put in in dreamweaver....

Thanks
matt_swinburneAsked:
Who is Participating?
 
lovewithnofaceConnect With a Mentor Commented:
Right-o.  why do you need javascript at all?

how about something like this?

why not establish a floating left column?

#leftcol {float: left; padding: 0px; margin-top: 0px; bottom margin: 0px;}

and then instead of having a table with an image in it,

<div id="leftcol"><img src="Photo6.GIF" width="600" /></ div>

there's no need for unecessary javascript, no need for unecessary tables, unless you actually were going to have tabular data, but then i don't understand why the picture was in the table, and if you decide to change the alignment of both pictures, you change the css tags of both

course i haven't done all of the html for you, mainly because it's four in the morning, but hopefully you can take it from here.  you put whatever margins and stuff you want to on the leftcol.  the photo gets aligned in the top left corner, and so as the browser gets bigger, nothing happens, because while the table gets bigger, the left corner still starts where you told it to

get it?

if not, let me know and ill try and make more sense tomorrow

cheers,
lovewithnoface
0
 
T3LogicCommented:
See if this article will be some help..

http://www.hypergurl.com/csstutorial10.html

If this doesn't help, I will work on something else for you.
0
 
matt_swinburneAuthor Commented:
the problem i'm having is that the webpage i have created is in the center of the screen and when the window is resized it moves as the screen is resized. That is what i want the layers (images) to do. So that it is consistent. unless you know a way of fixing the webpage to a position on the screen. The web page and the layered images need to be consistent so that the page is accessible in all browsers. Is there another way of overlapping images without using layers?

Cheets T3Logic.... Much appreciated
0
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
T3LogicCommented:
If you can post the section of code.  

Another thought is try to play with the tables to see if you can get them align correctly.

Thanks,
0
 
matt_swinburneAuthor Commented:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<html>
<head>
<title>Untitled</title>
<style type="text/css">
     <!--
       <!--
       .img{
      position:absolute;
      top:68px;
      left:235px;
      width: 320;
      display:inline;
      xheight: 200px;
      
            }
      -->

            }
      -->
</style>

</head>

</head>

<body>
<SPAN>
<div align ="center">
<table width="1000" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="1000"><p>&nbsp;</p>

    <p align="center"><img src="Photo6.GIF" width="600" /></p>

    <p>&nbsp;</p></td>
  </tr>
</table>

<div class="img" div style="display:block;">
  <p><img src="Photo3.GIF" width="481" height="160" /></p>
</div>

</body>
</html>

..cheets mate... Paste that into dreamweaver and then launch IE or Firefox or whatever and the problem im having is that when the screen is resized the image in the background does what it's told but the one at the front stays still... I need it to  do the same as the other image...

Cheers
0
 
T3LogicCommented:
I have tried multiple methods to get this to work.  I know what the issue is.  The issue
position:absolute;
     top:68px;
     left:235px;
     width: 320;
     display:inline;
     xheight: 200px;

Everything is setup as static.  So we need to make them dyncamic variables.


i have an idea on how to get it do dynamically center.

Use javascript to get the width of the page.  And set the cooridnates based on the width of the page.

When I get some time this afternoon I will try to work on it.

Thanks,

0
 
matt_swinburneAuthor Commented:
appreciated.... cheers
0
 
matt_swinburneAuthor Commented:
Sorry for being dunce but i don't follow...
0
 
matt_swinburneAuthor Commented:
I need the photo to overlap with another one and this solution doesn't seem to do that... cheers tho lovewithnoface...
0
 
matt_swinburneAuthor Commented:
Problem solved... Insert a layer into a table and then insert nested layers into that layer....
Cheers
0
 
lovewithnofaceCommented:
everything working?

yah, i use either format tables (using autostretch) or use columns to do the same thing, depending on what i need...very simple both, and readable by lots of browsers
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.