Solved

Overlapping Images in Dreamweaver

Posted on 2006-06-22
11
2,437 Views
Last Modified: 2012-05-05
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
Comment
Question by:matt_swinburne
  • 6
  • 3
  • 2
11 Comments
 
LVL 2

Expert Comment

by:T3Logic
ID: 16959534
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
 

Author Comment

by:matt_swinburne
ID: 16959653
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
 
LVL 2

Expert Comment

by:T3Logic
ID: 16959836
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
 

Author Comment

by:matt_swinburne
ID: 16959929
<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
 
LVL 2

Expert Comment

by:T3Logic
ID: 16968467
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:matt_swinburne
ID: 16968560
appreciated.... cheers
0
 
LVL 3

Accepted Solution

by:
lovewithnoface earned 500 total points
ID: 16974898
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
 

Author Comment

by:matt_swinburne
ID: 16983050
Sorry for being dunce but i don't follow...
0
 

Author Comment

by:matt_swinburne
ID: 16984425
I need the photo to overlap with another one and this solution doesn't seem to do that... cheers tho lovewithnoface...
0
 

Author Comment

by:matt_swinburne
ID: 16991237
Problem solved... Insert a layer into a table and then insert nested layers into that layer....
Cheers
0
 
LVL 3

Expert Comment

by:lovewithnoface
ID: 16995431
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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn how to dynamically set the form action using jQuery.

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now