HTML and CSS RSS HTML and CSS RSS

Align Two Images

Thread Solved

•
•
Join Date: Jun 2007
Posts: 14
Reputation: Mike_H is an unknown quantity at this point 
Solved Threads: 0
Mike_H Mike_H is offline Offline
Newbie Poster

Align Two Images

 
0
  #1
Aug 8th, 2008
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>
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 381
Reputation: langsor is an unknown quantity at this point 
Solved Threads: 33
langsor langsor is offline Offline
Posting Whiz

Re: Align Two Images

 
0
  #2
Aug 9th, 2008
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2007
Posts: 14
Reputation: Mike_H is an unknown quantity at this point 
Solved Threads: 0
Mike_H Mike_H is offline Offline
Newbie Poster

Re: Align Two Images

 
0
  #3
Aug 9th, 2008
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 381
Reputation: langsor is an unknown quantity at this point 
Solved Threads: 33
langsor langsor is offline Offline
Posting Whiz

Re: Align Two Images

 
0
  #4
Aug 9th, 2008
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2007
Posts: 14
Reputation: Mike_H is an unknown quantity at this point 
Solved Threads: 0
Mike_H Mike_H is offline Offline
Newbie Poster

Re: Align Two Images

 
0
  #5
Aug 9th, 2008
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!!!
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 381
Reputation: langsor is an unknown quantity at this point 
Solved Threads: 33
langsor langsor is offline Offline
Posting Whiz

Re: Align Two Images

 
0
  #6
Aug 10th, 2008
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
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2007
Posts: 14
Reputation: Mike_H is an unknown quantity at this point 
Solved Threads: 0
Mike_H Mike_H is offline Offline
Newbie Poster

Re: Align Two Images

 
0
  #7
Aug 10th, 2008
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 381
Reputation: langsor is an unknown quantity at this point 
Solved Threads: 33
langsor langsor is offline Offline
Posting Whiz

Re: Align Two Images

 
0
  #8
Aug 10th, 2008
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]>
  4. <style type="text/css">
  5. #wrapper{
  6.   width: 200px;
  7. }
  8. </style>
  9. <![endif]-->
  10. </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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2007
Posts: 14
Reputation: Mike_H is an unknown quantity at this point 
Solved Threads: 0
Mike_H Mike_H is offline Offline
Newbie Poster

Re: Align Two Images

 
0
  #9
Aug 10th, 2008
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.
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC