Go Premium for a chance to win a PS4. Enter to Win


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
  • 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,

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.


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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

824 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