View Single Post
  #4  
Old 02-11-2008, 12:09 PM
fredxeric's Avatar
fredxeric Offline
pixelpost guru
 
Join Date: Sep 2006
Location: Montréal, Québec, Canada
Posts: 407
Send a message via AIM to fredxeric Send a message via MSN to fredxeric
try this...

html
Code:
<div id="global" style="width:<IMAGE_WIDTH>px; height:<IMAGE_HEIGHT>px; margin-top:-<IMAGE_HALF_HEIGHT>px; margin-left: -<IMAGE_HLAF_WIDTH>px; "></div>

CSS
Code:
#body {
margin: 0; /* to avoid margins */
text-align: center; /* to correct the centering IE bug */
}

#global {
position: absolute;
left: 50%;
top: 50%;
text-align: left; /* to realign your text */
border: 3px dotted red; /* just to see the block */
}
You will also need to create an addon to get the <IMAGE_HALF_WIDTH> and <IMAGE_HALF_HEIGHT>

PHP
Code:
<?php

$addon_version = "1.0";
	$addon_name = "IMAGE_HALF_WIDTH AND IMAGE_HALF_HEIGHT";
$addon_description  =   "This addon will create 2 news tags, <IMAGE_HALF_WIDTH> & <IMAGE_HALF_HEIGHT>";


/* half_size */
$image_half_width = $image_width / 2;
$tpl = str_replace("<IMAGE_HALF_WIDTH>",$image_half_width,$tpl);

$image_half_height = $image_height / 2;
$tpl = str_replace("<IMAGE_HALF_HEIGHT>",$image_half_height,$tpl);


?>
This will work under multiple various of browser.....

good luck

P.S. I found only one bug with this centering code, it's when you have an image bigger that the screen size the top of the image overflow on the top... well you can try by your self...
Reply With Quote