problem with layers in html?

Posted on 2000-04-12
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,


Accepted Solution

nettrom earned 20 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.
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).


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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
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 …
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

746 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now