PDA

View Full Version : Verticle Centering With Fluid Template

EcoSee
02-11-2008, 04:47 AM
Has anyone figured out how to make a template where the image is centered both vertically and horizontally in the browser. You have to be able to change the browser size and have it work cross platform. Ideally, with a header on top and a fixed footer on the bottom so that you can have your site look perfect on a small laptop or on a 24 inch desktop monitor. I have yet to solve this one, though I have been close multiple times.
xact
02-11-2008, 08:31 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Universal vertical center with CSS</title>
<style>
.greenBorder {border: 1px solid green;} /* just borders to see it */
</style>
</head>

<body>
<div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div class="greenBorder" style=" #position: relative; #top: -50%">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>
</body>
</html>

The solution might be "top:50%" but you might want to add some javascript like top=screen height - (image height /2). :D
EcoSee
02-11-2008, 09:14 AM
That's a fixed solution... but not fluid. Try resizing your browser... it just stays fixed in that one spot. I can get the image to move fluidly up and down just like we all do side to side. But it won't work in IE.
fredxeric
02-11-2008, 12:09 PM
try this...

html

<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

#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

<?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...
EcoSee
02-11-2008, 07:07 PM
I think the <IMAGE_HALF_HEIGHT> addon tag will solve my issue. I have a template designed that should work now in all browsers. Vertical centering is very difficult for cross browser support as we all know that IE Microsucks makes ours lives difficult. I will finish the design and post it for testing and downloading. Thanks!