943,645 Members | Top Members by Rank

Ad:
Aug 8th, 2008
0

Align Two Images

Expand Post »
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;
	}
	//--> http://www.expertsrt.com/articles/Rod/imageAjaxNot.php
	</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>
Similar Threads
Reputation Points: 10
Solved Threads: 0
Light Poster
Mike_H is offline Offline
27 posts
since Jun 2007
Aug 9th, 2008
0

Re: Align Two Images

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.
HTML and CSS Syntax (Toggle Plain Text)
  1. <head>
  2. <style type="text/css">
  3. body {
  4. text-align: center; /* IE page centering */
  5. }
  6. #wrapper {
  7. max-width: 200px;
  8. margin: 0 auto; /* Mozilla page centering */
  9. }
  10. #wrapper img {
  11. width: 200px; /* will auto-scale height */
  12. }
  13. #message {
  14. border: 3px solid black;
  15. text-align: left; /* selective un-centering */
  16. }
  17. #message b {
  18. display: block;
  19. text-align: center; /* selective re-centering */
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <div id="wrapper">
  25. <div id="message">
  26. <b>Light of God</b>
  27. The light of God surrounds me.<br>
  28. The love of God enfolds me.<br>
  29. The power of God protects me.<br>
  30. The presence of God <br>
  31. watches over me.<br>
  32. Wherever I am, God is.<br>
  33. </div>
  34. <img src="http://www.lovingmemoriesofmemphis.com/backgrounds/prayerhands.jpg" />
  35. </div>
  36. </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.
Reputation Points: 30
Solved Threads: 36
Posting Whiz
langsor is offline Offline
389 posts
since Aug 2008
Aug 9th, 2008
0

Re: Align Two Images

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:

HTML and CSS Syntax (Toggle Plain Text)
  1. <style type="text/css">
  2. body {
  3. text-align: left; /* IE page centering */
  4. }
  5. #wrapper {
  6. max-width: 200px;
  7. margin: 0 left; /* Mozilla page centering */
  8. }
  9. #wrapper img {
  10. width: 200px; /* will auto-scale height */
  11. }
  12. #message {
  13. position: absolute;
  14. right:10px;
  15. padding: 5px;
  16. border-style: solid;
  17. border-color: #000099;
  18. background-color: #FFFFFF;
  19. font-family: serif;
  20. font-size: 12pt;
  21. }
  22. #message b {
  23. display: block;
  24. text-align: left; /* selective re-centering */
  25. }
  26. </style>
  27.  
  28. </head>
  29.  
  30. <body>
  31.  
  32. <div id="wrapper">
  33. <div id="message">
  34. <script language="JavaScript" type="text/javascript">
  35. <!-- hide from old browsers
  36. var sc = readCookie('Verse_url');
  37. sc = verse_1();
  38. sc = sc + "()";
  39. eval(sc);
  40. //-->
  41. </script>
  42. </div>
  43. <img id="theImgL" border="0" align="right" src="backgrounds/spacer.jpg">
  44. <script language="JavaScript" type="text/javascript">
  45. <!-- hide from old browsers
  46. sc = readCookie('Scene_url');
  47. sc="prayerhands"; //for testing only. will be removed when working correctly.
  48. sr = "../backgrounds/" + sc + ".jpg";
  49. getImage('theImgL', sr);
  50. //-->
  51. </script>
  52. </div>
  53.  
  54. </body>
Last edited by peter_budo; Aug 9th, 2008 at 1:24 pm. Reason: Please use code instead of quote.
Reputation Points: 10
Solved Threads: 0
Light Poster
Mike_H is offline Offline
27 posts
since Jun 2007
Aug 9th, 2008
0

Re: Align Two Images

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.

HTML and CSS Syntax (Toggle Plain Text)
  1. <head>
  2. <style type="text/css">
  3. #wrapper {
  4. position: absolute;
  5. right: 100px; /* put it anywhere */
  6. top: 20px; /* put it anywhere */
  7. width: 200px;
  8. }
  9. #wrapper img {
  10. width: 200px; /* will auto-scale height */
  11. }
  12. #message {
  13. border: 3px solid black;
  14. }
  15. #message b {
  16. display: block;
  17. text-align: center; /* selective centering */
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <div id="wrapper">
  23. <div id="message">
  24. <b>Light of God</b>
  25. The light of God surrounds me.<br>
  26. The love of God enfolds me.<br>
  27. The power of God protects me.<br>
  28. The presence of God <br>
  29. watches over me.<br>
  30. Wherever I am, God is.<br>
  31. </div>
  32. <img src="http://www.lovingmemoriesofmemphis.com/backgrounds/prayerhands.jpg" />
  33. </div>
  34. </body>
Last edited by langsor; Aug 9th, 2008 at 2:27 pm.
Reputation Points: 30
Solved Threads: 36
Posting Whiz
langsor is offline Offline
389 posts
since Aug 2008
Aug 9th, 2008
0

Re: Align Two Images

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!!!
Reputation Points: 10
Solved Threads: 0
Light Poster
Mike_H is offline Offline
27 posts
since Jun 2007
Aug 10th, 2008
0

Re: Align Two Images

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

HTML and CSS Syntax (Toggle Plain Text)
  1. <style type="text/css">
  2. #wrapper {
  3. position: absolute;
  4. right: 100px; /* put it anywhere */
  5. top: 20px; /* put it anywhere */
  6. min-width: 200px;
  7. }
  8. #wrapper img {
  9. width: 200px; /* will auto-scale height */
  10. }
  11. #message {
  12. border: 3px solid black;
  13. white-space: nowrap;
  14. }
  15. #message b {
  16. display: block;
  17. text-align: center; /* selective centering */
  18. }
  19. </style>

Peace
Reputation Points: 30
Solved Threads: 36
Posting Whiz
langsor is offline Offline
389 posts
since Aug 2008
Aug 10th, 2008
0

Re: Align Two Images

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.
Reputation Points: 10
Solved Threads: 0
Light Poster
Mike_H is offline Offline
27 posts
since Jun 2007
Aug 10th, 2008
0

Re: Align Two Images

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.
HTML and CSS Syntax (Toggle Plain Text)
  1. <head>
  2. <!--[if lt IE 7]>
  3. <style type="text/css">
  4. #wrapper{
  5. width: 200px;
  6. }
  7. </style>
  8. <![endif]-->
  9. </head>

That's my best guess
Here's the whole page ...
HTML and CSS Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <style type="text/css">
  5. #wrapper {
  6. position: absolute;
  7. right: 100px; /* put it anywhere */
  8. top: 20px; /* put it anywhere */
  9. min-width: 200px;
  10. }
  11. #wrapper img {
  12. width: 200px; /* will auto-scale height */
  13. }
  14. #message {
  15. border: 3px solid black;
  16. white-space: nowrap;
  17. }
  18. #message b {
  19. display: block;
  20. text-align: center; /* selective centering */
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <div id="wrapper">
  26. <div id="message">
  27. <b>Light of God</b>
  28. The light of God surrounds me.<br>
  29. The love of God enfolds me.<br>
  30. The power of God protects me.<br>
  31. The presence of God watches over me.<br>
  32. Wherever I am, God is.<br>
  33. </div>
  34. <img src="http://www.lovingmemoriesofmemphis.com/backgrounds/prayerhands.jpg" />
  35. </div>
  36. </body>
  37. </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
Last edited by langsor; Aug 10th, 2008 at 1:34 pm.
Reputation Points: 30
Solved Threads: 36
Posting Whiz
langsor is offline Offline
389 posts
since Aug 2008
Aug 10th, 2008
0

Re: Align Two Images

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.
Reputation Points: 10
Solved Threads: 0
Light Poster
Mike_H is offline Offline
27 posts
since Jun 2007

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: dynamic pop down list
Next Thread in HTML and CSS Forum Timeline: [ASK]Change CSS Drupal





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC