Improve company productivity with a Business Account.Sign Up

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 198
  • Last Modified:

problem with layers in html?

i would like to now how the topic of layers is solved in html.
please write back to me at...
  • 5
  • 3
1 Solution
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.
silverbloomAuthor Commented:
Adjusted points from 5 to 20
silverbloomAuthor Commented:
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,

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

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.
silverbloomAuthor Commented:
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.
silverbloomAuthor Commented:
yes the explanation was indeed up to the point.
thank you very much
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.
silverbloomAuthor Commented:
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....
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now