Using Layers on Web Pages

[handittome]

What are some effective uses of layers on web pages? I haven’t seen them used that much, and I was curious as to how to use them in web design. Should they be used at all?

You must be referring to CSS. It has lots of uses. Suppose you have a flexible layout that changes with screen res. If there is a potential for elements to overlap at lower resolutions, or you want to deliberately overlap, layering is a nice way to control it. I have not had any problems with layers, but always test your design in multiple browsers and on different computers.

[onistaxu]

I've had a few problems with layers, ... we had a layer that interfered with a few hyperlinks and web buttons. But I think that was a fluke problem. Just wanted to throw that out there as a cautionary note though.

[handittome]

Originally Posted by JWDesignCenter

I've had a few problems with layers, ... we had a layer that interfered with a few hyperlinks and web buttons. But I think that was a fluke problem. Just wanted to throw that out there as a cautionary note though.

Thanks. I always check my work in three different browsers. Opera and Internet Explorer work much the same, but Netscape sometimes displays parts of the page differently. I tried using CSS to change the colors of the scroll bar which worked in Opera and Internet Explorer but Netscape stayed gray.

Jagella

[handittome]

Hi Steve:

Originally Posted by cbscreative

You must be referring to CSS.

Actually, yes, but I was trying out layers in Dreamweaver. Remember the other thread?

Originally Posted by cbscreative

It has lots of uses. Suppose you have a flexible layout that changes with screen res. If there is a potential for elements to overlap at lower resolutions, or you want to deliberately overlap, layering is a nice way to control it.

A flexible layout that changes with screen resolution? I’m having trouble picturing that. Do you know of any web sites that use that design?

Originally Posted by cbscreative

I have not had any problems with layers, but always test your design in multiple browsers and on different computers.

I test on Internet Explorer, Netscape, and Opera. I used a friend’s computer which has a smaller monitor and dial-up connection (I use a cable modem) to check some of my work. Sure enough, the page loaded glacially, and some graphics I scrolled on a marquee wouldn’t display properly. Bad idea. Come to think of it, I have a notebook computer. It would be handy to check my work.

Thanks,

Jagella

[JayVilla]

Effective use of layers has to do with CSS positioning and effects that can be made with layer techniques.

Lets say you want to background image to accent the page, you can use layers to place the image in the background using the z-index, with the text at a higher z-index.

Also, you can use it for dynamic rollover techniques for content. It might require some javascripting, but the effects are great.

If you are going Ajax techniques, then you will need to learn DOM, javascripting, and advanced CSS techniques to achieve the effects of the likes of gmail and such.

[handittome]

Originally Posted by cs_obd

Lets say you want to background image to accent the page, you can use layers to place the image in the background using the z-index, with the text at a higher z-index.

That’s some interesting advice. How would using a layer for a background be advantageous over setting a background in the usual fashion (in the body tag)?

Originally Posted by cs_obd

Also, you can use it for dynamic rollover techniques for content. It might require some javascripting, but the effects are great.

Can you use a layer to change a graphic on rollover?

Originally Posted by cs_obd

If you are going Ajax techniques, then you will need to learn DOM, javascripting, and advanced CSS techniques to achieve the effects of the likes of gmail and such.

More stuff to learn! Does it ever end?

Thanks, Ritchie,

Jagella

Just one thing to keep in mind - WYSIWYG editors seems to call these layers. While a lot of developers and designers will refer to them as divs or divides.

[handittome]

Originally Posted by Corey Bryant

Just one thing to keep in mind - WYSIWYG editors seems to call these layers. While a lot of developers and designers will refer to them as divs or divides.

Thanks, Corey. I’m aware of that fact. I usually check the code view in Dreamweaver, and it makes me glad that I don’t need to code all that.

Jagella

Jagella, I remember the thread very well, and I even remembered it was yours. At least my memory isn't failing, but then again, my strength is renewed every day like an eagle.

One thing to know with DW is that the design window view is not very reliable when you start adding in advanced coding. Always test in a browser. You will find it often looks very different from the way DW shows it. That just reinforces the advice to learn the code.

As for flexible screen res, I do know a site, this one. If you change screen res, you'll see the effect. You can also drag the corner of your browser screen to see it flex too. I don't see any layering here, but if there was, the higher layer would overlap the lower instead of stopping when the two objects butt up against each other. If you use layering, make sure the contrast doesn't defeat your purpose.

My site uses some layering too, but a more obvious example of layers is my design at www.hladvantage.com

I didn't use a flex design at the above example, but I did use a flexible layout for www.gtindustries.com

Hope that helps a little.