• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2521
  • Last Modified:

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
0
matt_swinburne
Asked:
matt_swinburne
  • 6
  • 3
  • 2
1 Solution
 
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
 
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
lovewithnofaceCommented:
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
 
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 6
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now