PHP Positioning help please

[Barman007]

Im having trouble centering the content of this PHP code (please find code down the bottom fo this post) on my joomla site. I added

#google_map{margin-left:140px;}

to the CSS in the hopes of centering it all but it only centered the map itself. Since then I have added the "google1" and "google2" div class tags and

#google1{margin-left:140px;}
#google2{margin-left:140px;}

to the CSS but no love there. Can anyone help me out please. Also I am a student and this is my third year project and this is probably a rteally simple question. Thankyou to anyone who can help me.

<?php // no direct access
defined('_JEXEC') or die('Restricted access');



$conArr = $this->options;

$user_lan = $conArr[0]->mapLongitude;
$user_lat = $conArr[0]->mapLatitude;
$apiKeyVal = $conArr[0]->apiKey;
$apiWidth = $conArr[0]->mapHeight;
$apiHeight = $conArr[0]->mapWidth;
$apiComName = $conArr[0]->greeting;

$googleVideo = $conArr[0]->companyVideoProfile;
$imgDis  = $conArr[0]->mapPointImg ;
if(imgDis == NULL)
{
	$imgDis = "";
}
else
{
	$imgDis = "<img src=".$conArr[0]->mapPointImg." width='50' height='50'/>";
}

if($conArr[0]->mapViewHeight == NULL)
{
	$mapViewHeight = "18";
}
else
{
	$mapViewHeight = $conArr[0]->mapViewHeight;
}

if($conArr[0]->mapView == NULL)
{
	$mapView = "SATELLITE";
}
else
{
	$mapView = $conArr[0]->mapView;
}
 ?>
 <!--Div class added by Damion -->
<div class="google1">
	
<style>

#google_map
{
	width:<?php echo $apiWidth; ?>px;
	height:<?php echo $apiHeight; ?>px;
	border:1px solid #000;
	overflow:hidden;
	clear:both;
	border:1px #000000 solid;
}
</style>
 <table border="0" cellpadding="4" cellspacing="5">
 	<tr>
		<td valign="top">
		<div <!--Div class added by Damion -->
<div class="google2" align="left">
			<h3 style="text-align: center;"><img src="images/stories/buttonContactUs.png" border="0" /><strong></strong></h3>
		  <p><strong><?php echo $conArr[0]->greeting; ?></strong></p>  
		  <p><?php echo nl2br($conArr[0]->mapAddress); ?></p>
		  <p>Land Phone: <?php echo $conArr[0]->mapTp; ?></p>		  
		  <p>Fax: <?php echo $conArr[0]->mapFax; ?></p>
		  <p>E-mail:<a href="mailto:<?php echo $conArr[0]->mapEmail; ?>"> <?php echo $conArr[0]->mapEmail; ?></a></p>
		</div>
		</td>
		
		<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=<?php echo $apiKeyVal; ?>" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=<?php echo $apiKeyVal; ?>" type="text/javascript"></script>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=<?php echo $apiKeyVal; ?>" type="text/javascript"></script>	
        
<script language="javascript" >

		var localSearch = new GlocalSearch();		
		localSearch.setSearchCompleteCallback(null, 
				function() {initMap("<?php echo $user_lan; ?>","<?php echo $user_lat; ?>"); });	
					
				localSearch.execute(""+ ", ");	
				
		function initMap(lat, lng)
		{
	
		
			if (GBrowserIsCompatible()) 
			{
								
				var map = new GMap2(document.getElementById("google_map"));
				map.setMapType(G_<?php echo $mapView; ?>_MAP);
				var inetLatLng = new GLatLng(lat, lng);
				//developer [e-mail] 07/08/2009 Sri Lanka
				var zoomFactor = <?php echo $mapViewHeight; ?>;
				
				//Create the map and center 
				map.setCenter(inetLatLng, zoomFactor);
				
				
				
				map.addControl(new GSmallMapControl());
				map.addControl(new GMapTypeControl());
				map.addControl(new GScaleControl());
				
				
				//Custom Icon
				var pinIcon = new GIcon(G_DEFAULT_ICON);
				pinIcon.image = "<?php echo $live_site; ?>components/com_google/asset/img/mappin.png";
				pinIcon.iconSize = new GSize(20, 32);
			
				//Create the marker
				markerOptions = {title:'<?php echo $apiComName; ?>', icon:pinIcon};
				var mapMarker = new GMarker(inetLatLng, markerOptions);
				
				//Add click event for the marker
				GEvent.addListener(mapMarker, 'click', 
					function() {
						var address = "<span style='font-family:Arial;font-size:11px;'><b><?php echo $apiComName; ?></b><br/><?php echo $imgDis; ?><span> ";
						mapMarker.openInfoWindow(address);
					} ); 
					
				map.addOverlay(mapMarker);
			}	
		}
		
	</script>	
			 
		
	</tr>
	<tr>
	<?php
	if($googleVideo !="")
	{
	
	?>
		<td valign="top">
		
			<object width="350" height="225"><param name="movie" value="http://www.youtube.com/v/<?php echo $googleVideo; ?>&hl=en&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/<?php echo $googleVideo; ?>&hl=en&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="350" height="225"></embed></object>
		</td>
	<?php
	}
	?>
		<td valign="top">
		
		<div id="google_map"><!-- Added by Damion--></div>

	
		</td>
	</tr>
 </table>
 

</div>

[ShawnCplus]

Well you have an unclosed/broken tag here on line 62 that may be causing issues

<div <!--Div class added by Damion -->

Aside from that grab firebug(http://getfirebug.com) for firefox and toy around with the CSS until you get it where you want it then just copy into your file.

[Airshow]

Barman007,

At top of file your have

$apiWidth    = $conArr[0]->mapHeight;
$apiHeight   = $conArr[0]->mapWidth;

which looks like heigh<===>width inversion.

Then you could try:

#google_map
{
	position : relative;
	left : 50%;
	margin-left : -<?php echo $apiWidth/2; ?>px;
	width:<?php echo $apiWidth; ?>px;
	height:<?php echo $apiHeight; ?>px;
	overflow:hidden;
	clear:both;
	border:1px solid #000000;
}

This should center the map ragardless of screen size.

Airshow