Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Exclamation Having Trouble placing my image.

    I'm having trouble placing this image in center, tried using margins, but its not working.
    Please help setting my image in centre.
    Code:
    <div id="top" style="margin:0 auto;  width:900px; height:70px; alignment-adjust:central;"><img src="crop.jpg" width="900" 
    height="70" style=" margin:0 auto;" /></div> 
    <div id="below" style="height:50px; width:900px; background-color:#0FF; margin:0px auto;"><h4 style="text-align:center; margin:0 auto;">Produced and Introduced by</h4>
    <h2 style="text-align:center;margin:0 auto">Kiruba Realty Ltd</h2></div>
    
    <table width="1000" border="0" cellspacing="0" cellpadding="0" align="center">
      <tr>
        <td style="margin:0 auto;"><span class="map" style="padding: 0px; background: transparent url(calvaryhotspot2.jpg) repeat scroll 0%; display: block; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; position: relative; 
    width: 450px; height:950px; margin:0 auto;">
    		<img src="calvaryhotspot2.jpg" alt="" width="403" 
    
    height="909" usemap="#usa" class="map maphilighted" style="border: 0px none ; padding: 0px; opacity: 0; position: absolute; left: 0px; top: 0px;"></span>
          <map name="usa">
            
            
            
            <area shape="rect" coords="50,760,201,860" href="#?w=900" rel="popup1" class="poplight">
            <area shape="rect" coords="202,758,346,862" href="#?w=900" rel="popup2" class="poplight">
            <area shape="rect" coords="52,661,200,758" href="#?w=900" rel="popup1" class="poplight">
            <area shape="rect" coords="200,658,348,758" href="#?w=900" rel="popup1" class="poplight">
            <area shape="rect" coords="48,561,197,658" href="#?w=900" rel="popup1" class="poplight">
            <area shape="rect" coords="199,562,349,657" href="#?w=900" rel="popup1" class="poplight">
            <area shape="rect" coords="50,465,199,559" href="#?w=900" rel="popup1" class="poplight">
            <area shape="rect" coords="200,463,347,560" href="#?w=900" rel="popup1" class="poplight">
            <area shape="rect" coords="51,374,200,463" href="#?w=900" rel="popup1" class="poplight">
            <area shape="rect" coords="201,371,348,463" href="#?w=900" rel="popup1" class="poplight">
            <area shape="rect" coords="50,280,199,371" href="#?w=900" rel="popup1" class="poplight">
            <area shape="rect" coords="200,280,344,370" href="#?w=900" rel="popup1" class="poplight">
            <area shape="rect" coords="48,187,199,278" href="#?w=900" rel="popup1" class="poplight">
            <area shape="rect" coords="201,182,347,279" href="#?w=900" rel="popup1" class="poplight">
            <area shape="poly" coords="197,91,199,185,52,188,49,125,59,108,72,101,84,93" href="#?w=900" rel="popup1" class="poplight" />
            <area shape="poly" coords="200,183,347,185,347,107,340,97,331,91,200,92" href="#?w=900" rel="popup1" class="poplight" />
        </map></td>
      </tr>
    </table>
    
    
    
    
    <!--POPUP START-->
    
    <div id="popup2" class="popup_block">
    	<p><a href="http://www.designbombs.com/"></a></p>
    	<table width="865" border="0" cellspacing="0" cellpadding="0">
    	  <tr>
    	    <td><img src="2.jpg" width="864" height="335" alt="Scene1" /></td>
          </tr>
    	  <tr>
    	    <td><h2>Popup #2</h2>
            <p>Aliquip
    	      transverbero loquor esse ille vulputate exerci veniam fatua eros
    	      similis illum valde. Praesent, venio conventio rusticus antehabeo
    	      lenis. Melior pertineo feugait, praesent hos rusticus et haero
    	      facilisis abluo. </p>
            <p>Veniam tincidunt augue abluo vero, augue nisl melior quidem secundum nobis singularis eum eum.</p>
            
            <div id="button" style="height:20px; width:50px; margin:auto;">
            	<a href="#" style="color:#000;height:20px; width:50px; margin:auto; background-color:#9C0; padding:10px; border:1px solid #333;">Booking</a>
            </div></td>
          </tr>
      </table>
      </div>
      
      <div id="popup1" class="popup_block">
    	<p><a href="http://www.designbombs.com/"></a></p>
    	<table width="865" border="0" cellspacing="0" cellpadding="0">
    	  <tr>
    	    <td><img src="25408_112291338801592_2849154_n.jpg" width="600" height="300" alt="Scene1" style=" margin-left:170px;;" /></td>
          </tr>
    	  <tr>
    	    <td><h2>Popup #2</h2>
            <p>Aliquip
    	      transverbero loquor esse ille vulputate exerci veniam fatua eros
    	      similis illum valde. Praesent, venio conventio rusticus antehabeo
    	      lenis. Melior pertineo feugait, praesent hos rusticus et haero
    	      facilisis abluo. </p>
            <p>Veniam tincidunt augue abluo vero, augue nisl melior quidem secundum nobis singularis eum eum.</p>
            <div id="button" style="height:20px; width:50px; margin:auto;">
            	<a href="#" style="color:#000;height:20px; width:50px; margin:auto; background-color:#9C0; padding:10px; border:1px solid #333;">Booking</a>
            </div>
            </td>
          	</tr>
      	</table>
    
        
    	</div>
    Please Help, urgently needed.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,597
    Thanks
    23
    Thanked 646 Times in 645 Posts
    You fail to tell us what image your having trouble with. I'm guessing it's the images in the pop up's. These images are in a table and the table is in a div. Unless you give a div a width it will take the width of it's parent, in this case the whole page. So using margin:auto; on the tables will center them.

    This may bring up a problem with the <p><a href="http://www.designbombs.com/"></a></p> centering when you place text or an image in there, but you should be able to handle that.

    I suggest you learn or use a style css section instead of inline. Would make things easier.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •