Center Layers, even on window resize?

Hi!

I would like my layers to center in the browser window even if the window gets resized.
How would I do that, and is there a simple way of doing it ( not with a mass of code ), that would work on most browsers ?

Thank you :)
LVL 2
SaLzAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

EsopoCommented:
Hi,

Do you mean something like this?:

<div style="text-align: center;">
  My content
</div>


Best regards,

Esopo.
EsopoCommented:
WoodyRoundUpCommented:
Just to add on:

<div style="text-align: center; width:100%">
  My content
</div>

for the width?

I don't know whether this has any effect.
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

SaLzAuthor Commented:
Sorry, thats not what i want.

I need a code that checks the width of the browser window each time it gets resized, and repositions the layer accordingly ( to the center ).
WoodyRoundUpCommented:
That's what the link from Esopo is for.

On the page, there is this link:

http://www.quirksmode.org/css/centering_example.html

Try to resize your window with this page.
It will keep everything in the page centered while you are resizing it.
devicCommented:
probably the layer has absolute position, if so then try this:

=========================================
ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE<br>
<button id=myButton style="position:absolute;left:0px;top:0px;">runit</button>
TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO

<br><br>
<script>
function center()
{
      var mybtn=document.getElementById("myButton");
      mybtn.style.left=document.body.offsetWidth/2-mybtn.offsetWidth;
}
</script>
<button onclick=center()>center</button>
devicCommented:
ops here is the right version:

================================
ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE<br>
<div id=myButton style="position:absolute;left:0px;top:0px;width:200px;background:yellow;">MY LAYER</div>
TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO

<br><br>
<script>
function center()
{
      var mybtn=document.getElementById("myButton");
      mybtn.style.left=document.body.offsetWidth/2-mybtn.offsetWidth/2;
}
</script>
<button onclick=center()>center</button>
SaLzAuthor Commented:
Esopo I'm testing your solution now. Will it work on all browsers that way ( how about old ones ) ?

devic, your code doesn't work on FireFox, could you extend it so it would work on all browsers ?
devicCommented:
SaLz, I tested it and it works on FireFox too
EsopoCommented:
Well, it works on FF and IE. It uses basic standard CSS1, so it *should* be ok with most old browsers still in use.
StormyWatersCommented:
You don't need any javascript at all, just a bit of CSS.

<div style="margin:0 auto;width:200px;border:1px solid red">Test</div>

Setting the margin to auto centers the div, no matter what, without using absolute positioning, which is Bad(tm).


This works in Firefox as well as IE in Standards mode.
SaLzAuthor Commented:
devic, I tested it again on FireFox and it didn't work for me.

It should also contain the check for these:

//standard
document.getElementById
// old IE
document.all
// NN
document.Layers

SaLzAuthor Commented:
StormyWaters, will it work on old brosers as well ? How far in version wise is this CSS supported, do you know ?
devicCommented:
>>>devic, I tested it again on FireFox and it didn't work for me.

ok, you tried to change something :)
check again on your firefox:
=====================
http://www.sembel.net/expexc/js/position/center_layer.html


>>>It should also contain the check for these:
not should, there are no reason to support ultra old browsers.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
SaLzAuthor Commented:
hehe, ok this works.
 Do you know how to center it vertically too ? Also it should be done on page resize, i already put that in body onResize.
SaLzAuthor Commented:
Great, thank you devic! and thanks everybody for helping out.

Both StormyWater's and devic's solutions are the best from the solutions posted, so I'm going to give points where credit is due. :)

devic, can i ask, how could i pass the layername i want centered to the function i tried the below, but didn;t work?

<script>
function center(layerID)
{
      var mybtn=document.getElementById(layerID);
      mybtn.style.left=document.body.offsetWidth/2-mybtn.offsetWidth/2;
      mybtn.style.top=document.body.offsetHeight/2-mybtn.offsetHeight/2;
}
</script>

onClick="center(myButton)";

----------------
One last question before I accept the answers:

Which one is better considering browsers and functionality wise:
StormyWater's:
<div style="margin:0 auto;width:200px;border:1px solid red">Test</div>

or device's nice javascript ? :)



devicCommented:
onClick="center(myButton)";

should be:
========
onClick="center('myButton')";
SaLzAuthor Commented:
ah, thank you! i knew it has to be something small :)

devic, may i ask u, what do u think is it better to use your script, or just this :
<div style="margin:0 auto;width:200px;border:1px solid red">Test</div>

what are the advantages of both ?
devicCommented:
with css doesn't work on IE6 for me.
SaLzAuthor Commented:
Thank you :)

StormyWaters, with your method, setting top:20px; doesnt seem to have any effect, it puts the layer below all the content of the page ( where i set it ). Why is that ?
StormyWatersCommented:
>>setting top:20px;

Don't use absolute positioning. If you're going to do that, you might as well just use the javascript. Absolute positiioning pulls elements out of the page flow, and makes it break extremely easily. Does your page fit together at any font size? Have you checked? :)

Devic, it only works in standards mode; you need a valid page for it to work.
SaLzAuthor Commented:
one more question:

how would i set the layer 20px from the top ( since it will be a pop-up menu and will cover the area underneath ) ?
SaLzAuthor Commented:
with devic's method it's like this:      
myLayer.style.top='20px';

but I guess that isn't possible with your method Stormy ?
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.