Layers ... in brief
Welcome to the world of dynamic HTML ... and the pleasures of coding in a text editor :) remember you need either NN4 or IE4 or better to become dynamic! Layers ...…
Welcome to the world of dynamic HTML … and the pleasures of coding in a text editor :) remember you need either NN4 or IE4 or better to become dynamic!
Layers … in brief
ok the only way you can achieve effects like this is with the use of layers, think of transparent plastic sheets stacked on top of each other and you have the underlying concept. you can implement a layer using two different tags, <layer> or <div>, the first is the netscape specific.
this is how you use it (if you want to keep it NN specific just replace the “div” with “layer”)
<div id="somename" style="position: absolute; left: somevalue px; top: somevalue px; width: somevalue px; height: somevalue px; z-index: somenumber"> whatever you want </div>
ok now let’s go over it ..
“id” gives the layer a name, something you can identify it with when applying styles to or accessing it with JavaScript
“style” the elements tell us all about the layer, it’s position etc.
“position: absolute” leave it as it is.
now for the positioning, the top left corner of your browser window is 0,0… the unit of measurement here is the pixel …
“left: somevalue px;” specifies the left corner value of the layer. (the “px” stands for pixel), the window starts at 0px, so if you have a negative value, only part of the layer will show … leading to come cool effects.
“top: somevalue px;” specifies the top value of the layer, works in the same way as the left element
the “width” and “height” values specify the dimensions of the layer. You can use either absolute values (number px) or relative values (number %)
it’s quite all right to leave out the height, never leave out the width.
“z-index” : this is the tricky one, remember all those plastic sheets stacked on top of each other, well this is the value which says which comes on top and which one is on the bottom
The bottom-most value is 1, overlapping layers will have values greater than 1…. remember, wherever two layers overlap you have to tell the browser which one comes on top and which one comes below.
Now add your images/ text to the layer or leave it blank … generate other layers which overlap and you could end up with extremely cool effects. If you add a little bit of javascript you can get stuff like drop down menus!!!
Head over to www.webmonkey.com (my favourite tutorial site) for a lesson on DHTML and/or Javascript.
Originally published on naren.8m.com, my first website, in 1999; recovered from the Wayback Machine.