...

View Full Version : Having Trouble placing my image.



SumanSriparna
11-18-2012, 08:30 AM
I'm having trouble placing this image in center, tried using margins, but its not working.
Please help setting my image in centre.

<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.:confused:

sunfighter
11-18-2012, 04:53 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum