DHTML: how do I center layers ?

Posted on 1998-09-23
Last Modified: 2010-04-09
Is it possible to center a layer relative to the 'document' width ?
Question by:aloha
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2

Accepted Solution

jbirk earned 100 total points
ID: 1838045
Using this seems to work for both netscape and ie:
<DIV ID="hw2Image" align="center" style="position:absolute;top:80px;visibility:hidden;border-width:thin;align:center;">

using align="center" does it only for IE and align:center; in the style does it only for netscape.

Hope this works for you!

Author Comment

ID: 1838046
It seems to work fine with IE4. But with NS4 if you resize the browser window you have to reload the page to center it again becuase for some strange reason after the resize the layer aligns itself to the left!

Any solution for this problem ?

Expert Comment

ID: 1838047
It seems that you have found a rather strange and bad error in netscape.  I tried a few things and couldn't get it to work.  So the only solution I could come up with was to reload the page onresize.  The code would look like this:
onResize="if (!document.all) document.go(0);"
That goes in the body tag.
It will work fine, but if you change the layers or have forms, it may reset that which is undesirable.  Test it to see, if it does screw up the page I'll check to see if there's some other way.

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users


Expert Comment

ID: 1838048
Man I don't know what came over me.  This line:
onResize="if (!document.all) document.go(0);"
should be:
onResize="if (!document.all) history.go(0);"

Sorry about that.

Author Comment

ID: 1838049
It works, Josh.

Do you think there could be a solution using Javascript ? Instead of reloading the page the onresize event could call a function that would update the left value of the Layer based on the browser width. I think that this might work, but I don't know much of Javascript. Could you help me here ?


Expert Comment

ID: 1838050
Well... yeah, you could do this.  It might be somewhat more complex though.  Ask a question in the JavaScript area, and I or someone else will help you there.
BTW, technically, it is already using javascript.  The onResize command is a javascript event, and what it does is execute the javascript event handler supplied to it as an argument, so:
"if (!document.all) history.go(0);"
is the event handler I gave it which simply said to reload the document when the onResize event occured.

So, ask a question in JavaScript (50 points is probably efficient for this), and someone will assist you (I'm not sure if I have the time right now, so it may be someone else).

Good luck, and glad I was able to help!

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question