Align Two Images

Question

Mike_H 0 Light Poster

16 Years Ago

I have a page that loads a text box and an image the user has selected from another page. I can get them to display but I need to be able to have the image fit under the text. Right now the image is over the text. I have a sample page to look at: http://www.lovingmemoriesofmemphis.com/otest.htm

I have tried using various JavaScript examples of moving a <div> but I cannot get it to work. Can someone please help me with this? I have been trying to get this to work for over a week now. The text and images will be different widths and heights depending on what the user has selected in a previous page (31 texts and 25 images).

Here is the code from my test page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Loving Memories</title>

<script type="text/javascript" src="Javascripts/do_cookie.js"> </script>
<script type="text/javascript" src="Javascripts/verses.js"> </script>
<link rel="stylesheet" type="text/css" href="css/style.css">        
   
    <script language ="javascript">
        <!--
            function MoveDiv()
            { 
                var div1 = document.getElementById("img1");
                var div2 = document.getElementById("img2");
                div2.style.top = parseInt(div2.style.top, 10) + 100 + "px";
                div2.style.left = parseInt(div2.style.left, 10) + 100 + "px";              
            }
        //-->
    </script>

	<script type="text/javascript">
	<!--
	function getImage(pExistingImageID, pImageURL){
	    var img = document.createElement('img');
	    img.onload = function (evt) {
	        document.getElementById(pExistingImageID).src=this.src;
	        document.getElementById(pExistingImageID).width=this.width * 0.48;
	        document.getElementById(pExistingImageID).height=this.height * 0.48;
	        var v_top = this.height * 0.48;
	        document.getElementById(img2).style.top = v_top + 'px';
	    }
	    img.src = pImageURL;
	    return false;
	}
	//--> [url]http://www.expertsrt.com/articles/Rod/imageAjaxNot.php[/url]
	</script>

       
</head>

<body>

<p></p>


<div id="img1">
	<script language="JavaScript" type="text/javascript">
	<!-- hide from old browsers
		var sc = readCookie('Verse_url');
		sc = verse_1(); //for testing only. will be removed from working version.
		sc = sc + "()";
		eval(sc);		 
	//-->
	</script>
</div>	


<br>
<div id="img2">
	<img id="theImgL" border="0" src="backgrounds/spacer.jpg">
	<script language="JavaScript" type="text/javascript">
	<!-- hide from old browsers
		sc = readCookie('Scene_url');
		sc="prayerhands"; //for testing only. will be removed when working correctly.
		sr = "../backgrounds/" + sc + ".jpg";
		getImage('theImgL', sr);
	//-->
	</script>
</div>	

<input type="button" value="Move Div" onclick="MoveDiv()" />

</body>

</html>

web-design

2 Contributors
8 Replies
161 Views
2 Days Discussion Span
Latest Post 16 Years Ago Latest Post by Mike_H

langsor

16 Years Ago

If there is no compulsory reason to try and align the image and text with javascript I would definitely do it with CSS ... plus it "just works".

If you need to update the image with javascirpt, give the <img id="dynamic" ... /> image tag an ID and just update it in place that way.

Here's my suggested solution without making it fancy or anything.

<head>
<style type="text/css">
body {
  text-align: center; /* IE page centering */
}
#wrapper {
  max-width: 200px;
  margin: 0 auto; /* Mozilla page centering */
}
#wrapper img {
  width: 200px; /* will auto-scale height */
}
#message {
  border: 3px solid black;
  text-align: left; /* selective un-centering */
}
#message b {
  display: block;
  text-align: center; /* selective re-centering */
}
</style>
</head>
<body>
  <div id="wrapper">
    <div id="message">
      <b>Light of God</b>
      The light of God surrounds me.<br>
      The love of God enfolds me.<br>
      The power of God protects me.<br>
      The presence of God <br>
      watches over me.<br>
      Wherever I am, God is.<br>
    </div>
    <img src="http://www.lovingmemoriesofmemphis.com/backgrounds/prayerhands.jpg" />
  </div>
</body>

If you must use javascript for aligning these elements or just want to learn -- post back and I'll try to hack something together for that too.

langsor

16 Years Ago

Place the absolute positioning on the #wrapper div instead of the #message div since that is the container for the message and the image ...

The text sprawl wasn't happening last night in IE but is today, so I also changed max-width to plain ol width ...

that should do the trick.

<head>
<style type="text/css">
#wrapper {
  position: absolute;
  right: 100px; /* put it anywhere */
  top: 20px;  /* put it anywhere */
  width: 200px;
}
#wrapper img {
  width: 200px; /* will auto-scale height */
}
#message {
  border: 3px solid black;
}
#message b {
  display: block;
  text-align: center; /* selective centering */
}
</style>
</head>
<body>
  <div id="wrapper">
    <div id="message">
      <b>Light of God</b>
      The light of God surrounds me.<br>
      The love of God enfolds me.<br>
      The power of God protects me.<br>
      The presence of God <br>
      watches over me.<br>
      Wherever I am, God is.<br>
    </div>
    <img src="http://www.lovingmemoriesofmemphis.com/backgrounds/prayerhands.jpg" />
  </div>
</body>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Mike_H 0 Light Poster · Answer 1 · 2008-08-09T22:20:16+00:00

That is close but I need the text and image on the right side. Yours has the text in a box across the screen and the image in the center and out of proportion. You can see it at http://www.lovingmemoriesofmemphis.com/otest1.htm.
I followed your code and got everything on the right but the image is not under the text. See http://www.lovingmemoriesofmemphis.com/otest2.htm. This code is:

<style type="text/css">
body {
  text-align: left; /* IE page centering */
}
#wrapper {
  max-width: 200px;
  margin: 0 left; /* Mozilla page centering */
}
#wrapper img {
  width: 200px; /* will auto-scale height */
}
#message {
  position: absolute;
  right:10px;
  padding: 5px;
  border-style: solid;
  border-color: #000099;
  background-color: #FFFFFF;
  font-family: serif;
  font-size: 12pt;
}
#message b {
  display: block;
  text-align: left; /* selective re-centering */
}
</style>

</head>

<body>

  <div id="wrapper">
    <div id="message">
	<script language="JavaScript" type="text/javascript">
	<!-- hide from old browsers
		var sc = readCookie('Verse_url');
		sc = verse_1();
		sc = sc + "()";
		eval(sc);		 
	//-->
	</script>
    </div>
    <img id="theImgL" border="0" align="right" src="backgrounds/spacer.jpg">
	<script language="JavaScript" type="text/javascript">
	<!-- hide from old browsers
		sc = readCookie('Scene_url');
		sc="prayerhands"; //for testing only. will be removed when working correctly.
		sr = "../backgrounds/" + sc + ".jpg";
		getImage('theImgL', sr);
	//-->
	</script>
  </div>

</body>

Mike_H 0 Light Poster · Answer 2 · 2008-08-10T04:07:06+00:00

That is better. Now is there any way to get the text box to adjust its width according to the longest line?

Compare http://www.lovingmemoriesofmemphis.com/otest2.htm using your code and http://www.lovingmemoriesofmemphis.com/otest.htm which adjusts perfectly using two separate <div>.

Taking out width: 200px; in #wrapper makes the box use the whole screen width.

Thanks for your help!!!

langsor · Answer 3 · 2008-08-10T10:58:37+00:00

Change width to min-width in wrapper
Add white-space: nowrap in message

<style type="text/css">
#wrapper {
  position: absolute;
  right: 100px; /* put it anywhere */
  top: 20px;  /* put it anywhere */
  min-width: 200px;
}
#wrapper img {
  width: 200px; /* will auto-scale height */
}
#message {
  border: 3px solid black;
  white-space: nowrap;
}
#message b {
  display: block;
  text-align: center; /* selective centering */
}
</style>

Peace

Mike_H 0 Light Poster · Answer 4 · 2008-08-10T22:05:06+00:00

Langsor,

The white-space: nowrap fixed the text inside the box from breaking until it sees the <br> code. However changing width to min-width in wrapper makes the box fill across the screen and the text inside on the left side. To fix that I had to leave width: 200px; in #wrapper. I also tried using min-width in #wrapper img and got the box filling the width of the screen. Even down to 2px produced the same results.

The image also comes out not proportional. Perhaps going with my original question of moving the image (<div>) might be the easiest and best way to go unless you can think of some more things to try.

Thanks.

langsor · Answer 5 · 2008-08-10T22:33:02+00:00

I'm still waking up so I don't totally get what the mess is on your browser there, but it's not working, I get that. It's interesting since the code I submitted works in IE7, FF3, Op 9.5 on Windows, didn't try it in older browsers or on Mac. I'll submit my whole page markup so you can look for differences and play around with it.

IE doesn't really support min-width but is supposed to treat width like min-width. Did IE 7 start supporting min-width? Probably. You can put IE specific conditional comments in your head to account for older version and maybe fix this problem -- give it a try.

<head>
<!--[if lt IE 7]>
<style type="text/css">
#wrapper{
  width: 200px;
}
</style>
<![endif]-->
</head>

That's my best guess
Here's the whole page ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#wrapper {
  position: absolute;
  right: 100px; /* put it anywhere */
  top: 20px;  /* put it anywhere */
  min-width: 200px;
}
#wrapper img {
  width: 200px; /* will auto-scale height */
}
#message {
  border: 3px solid black;
   white-space: nowrap;
}
#message b {
  display: block;
  text-align: center; /* selective centering */
}
</style>
</head>
<body>
  <div id="wrapper">
    <div id="message">
      <b>Light of God</b>
      The light of God surrounds me.<br>
      The love of God enfolds me.<br>
      The power of God protects me.<br>
      The presence of God watches over me.<br>
      Wherever I am, God is.<br>
    </div>
    <img src="http://www.lovingmemoriesofmemphis.com/backgrounds/prayerhands.jpg" />
  </div>
</body>
</html>

Does the image become non-proportional when using min-width in your browser, or is it not proportional when you assign only a width value without a specific height -- because it should auto-scale the non-specified dimension? I wouldn't use min-width anyway on an image--never tried it really.

Good luck

Mike_H 0 Light Poster · Answer 6 · 2008-08-11T05:08:17+00:00

Good news Langsor!!!

This last bit fixed it. Also some of the problem was a routine I had got from another site to load an image from a file while the page is loading. That was throwing the graphic sizing off. So I went with a different way of getting the graphic and that worked. I also put in a routine to make the graphic width the same as the text box.

You can see it at http://www.lovingmemoriesofmemphis.com/otest4.htm. For a look at the actual page this was for you can view it at http://www.lovingmemoriesofmemphis.com/orderform.htm. You will need to select a Verse and Scene first.

Thanks for all your help! You came to my rescue when no one else has. I have been working on this for about 2 weeks. You are the best! You get a big gold star! I hope I can count on you helping me in the future if I get stumped on something else.

Mike

P.S. Moderator, you can move this thread to the HTML and CSS forum since the solution was done with CSS and not JavaScript.