Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17


problem with layers in html?

Posted on 2000-04-12
Medium Priority
Last Modified: 2013-11-19
i would like to now how the topic of layers is solved in html.
please write back to me at...
Question by:silverbloom
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
  • 5
  • 3

Expert Comment

ID: 2711002
I'm not sure how many experts will give personal support though e-mail for 5 points.

Your question seems too widely defined, try narrowing it down.

Author Comment

ID: 2711049
Adjusted points from 5 to 20

Author Comment

ID: 2711050
thank you v ery much for replying to me,
i am grateful and thankful,

i would like to know  what is layers in html and if posible like to know how to make use of such an option.?

what ever are your views and comments and what ever light you would  like to throw on such a topic would definitely and positively be accepted by me.

please try and make your explanation a bit easier for me to understand since i am not so good in english grammar.

kindly bear with me,

thank you very much,

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Accepted Solution

nettrom earned 40 total points
ID: 2711131
Ok. I'll try to make it easy. :)

There are two kinds of layers when you talk about HTML.

1: the LAYER element, created by Netscape: <layer></layer>.  It is a proprietary thing, only works in Netscape 4.x.  Using it is regarded as a bad idea.

2: a DIV (an HTML element) that is positioned using Cascading Style Sheets (CSS). It works in several browsers: Internet Explorer, Netscape 4.x, and the upcoming Netscape 6/Mozilla.

A "layer" is usually a "box" (a rectangular area) with some content, and you are able to control the position and size of the layer.  In other words it slightly "disconnected" from the rest of the document.

People usually do not use layers a lot, I only see them used when the author wants to make the content dynamic through scripting (usually done with JavaScript).  When doing that you have the ability to show and hide the layer, move it around, change various properties of it (text color, background color, font sizes, etc).

That's what I could come up with right now.  My brain's in idle right now, I'll have to go get some lunch.  Feel free to ask if there's something I've written that's difficult to understand.  I could probably come up with some example for you to look at, just let me know.

Author Comment

ID: 2718485
hi ,
first i would like to thank nettrom for being so generous and reply back to me i did understand ur explantion, and it was indeed very understandable.

but i would appreciate it if u could give me an example.

thank you very much.

bye for now,

p.s. i would like to have your email address so that in the future i could mail back to you, if i have any problems.

Author Comment

ID: 2718493
yes the explanation was indeed up to the point.
thank you very much

Expert Comment

ID: 2722242
an example is not a problem.

say you have an image, that you want to center in the browser window, both vertically and horisontally.  this can be done with tables, but for fun we'll do it with a layer.  we'll create a layer, put the image inside it, and then, when the document is loaded we'll center the image in the browser window.  the centering will be done through JavaScript.

I choose this example since it'll show what a "layer" is, as well as using JavaScript to control the layer, which is what most people use layers for.  using layers in static HTML is generally not done, since it's difficult to create good pages that adapt to the user's browser window size.

the HTML for our layer application is very simple.  in this example the image is 250 pixels in both width & height.  we use this information to control the size of the layer.

<div id="imageLayer" style="position:absolute;width:255px;height:255px;text-align:center;">
<img src="myImage.gif" width="250" height="250" alt="">

to create the layer we use a combination of HTML and CSS (Cascading Style Sheets).  the following style sheet properties are applied:

'position:absolute' - defines the element as positioned, needed to make the element exposed to JavaScripts in Netscape Navigator 4.x
'width:255px' - sets the width of the element (our layer) to 255 pixels.
'height:255px; - sets the height of our element to 255 pixels.
'text-align:center' - defines inline elements (in our case the image) to be centered inside the DIV (layer).

the content of the layer (DIV) is an image with the filename 'myImage.gif', width & height is 250 pixels, and it's given an empty ALT text.

our HTML document is now filled with a square area, our layer, which in turn contains the image.  what's left is to position the layer, and I'll give a quick example using Netscape's proprietary object model (in other words, this only works in Netscape 4.x):

<script type="text/javascript">
function calledOnload() {
  var winWidth = window.innerWidth;
  var winHeight = window.innerHeight;
  var divWidth = document.layers['imageLayer'].document.width;
  var divHeight = document.layers['imageLayer'].document.height;
  var xPos = Math.floor((winWidth-divWidth)/2);
  var yPos = Math.floor((winHeight-divHeight)/2);
  document.layers['imageLayer].moveTo(xPos, yPos);

window.onload = calledOnload;

this script goes into the HEAD of the HTML document.  it will be called when the document is fully loaded.  the script finds the width & height of the browser window, the width & height of our layer, and then moves the layer to a position which centers the layer in the window.

this is only _one_ application of layers.  often it's used in combination with JavaScript to create animation, or content that's shown & hidden upon user interaction to create interactive content.

hope you found the example understandable and useful.  feel free to ask if either of it was difficult to understand, or if you want to some URLs to references.

Author Comment

ID: 2758002
hello, nettrom,
how r u ?
I hope all is fine.

Yes thank You very much for the answer which you send me previously.

In the future if i have any problems i will definitely get back to you.

bye for now,

p.s. please could you give me your e-mail address, so that i could get back to you in the future if i have any difficulties....

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System ( introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

715 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